echarts桑基图 设置每个节点的不同颜色

• 2019-05-06
  今天做桑基图的时候踩了个小坑，本来想把桑基图的每个节点设置成不同的颜色，但是很多种方法都不好用，记录一下

踩坑实况记录

	//用到的数据
	var dataList = [
     	{ name: 'a' },{ name: 'b' }, { name: 'c' }, 
     	{ name: 'x' }, { name: 'y' }
   	];
	var linksList = [{
        source: 'a',
        target: 'x',
        value: 20
    }, {
        source: 'a',
        target: 'y',
        value: 25
    }, {
        source: 'b',
        target: 'x',
        value: 20
    }, {
        source: 'b',
        target: 'y',
        value: 25
    }, {
        source: 'c',
        target: 'x',
        value: 20
    }, {
        source: 'c',
        target: 'y',
        value: 22
   }];

1. 在全局样式中设置想要的每个节点的颜色

	option = {
		color: ['#fc853e','#28cad8','#9564bf','#bd407e','#e5a214'],		
	    series: {
	        type: 'sankey',
	        data: dataList,
	        links: linksList,
	    }
	};

效果图如下，节点的颜色有改变，但是并不是想要的样子，而且有几个节点的颜色重复了

2. 在itemStyle中设置不同的节点颜色

	option = {
	    series: {
	        type: 'sankey',
	        data: dataList,
	        links: linksList,
        	itemStyle: {
        	    normal: {
        	    	// （1） 直接写一个颜色，这样的结果是所有节点都是同一个颜色
        		 	color: '#fff',
        	    	// （2） 像在全局定义中一样，使用数组声明多个颜色
        	    	//		但是这样的结果是所有颜色都变成黑色（大概是不允许这样用吧）
         			color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
        	    	// （3） 类似柱状图定义多个颜色，利用函数返回不同的颜色值
        	    	//		结果同上，全变成黑色了
         		    color: function(params) {
         		         var colorList = ['#89aae6','#177cb0','#5a79ba','#98a6dd','#8b6eaf','#67afc8'];
         		         return colorList[params.dataIndex]
         		    }
        	    }
        	}
	    }
	};

运行结果：

定义不同样式的正确打开方式

	//在定义数据时对每个数据定义不同的颜色
	var dataList = [{ 
    	name: 'a',
    	itemStyle: {
    	    color: '#fc853e'
    	}
    }, { 
    	name: 'b',
    	itemStyle: {
    	    color: '#28cad8'
    	}
    }, { 
    	name: 'c',
    	itemStyle: {
    	    color: '#9564bf'
    	} 
    }, { 
    	name: 'x',
    	itemStyle: {
    	    color: '#bd407e'
    	} 
    },{ 
		name: 'y',
    	itemStyle: {
    	    color: '#28cad8'
    	} 
    }];

完成效果：