echarts柱状图实现圆角和每个柱体不同渐变色

• 2019-05-06
  简单的例子就先不写了，直接写实现功能的关键代码：

1. 柱状图实现圆角

	itemStyle: {
		emphasis: {
		    barBorderRadius: 7
		},
		normal: {
		    barBorderRadius: 7
		}
	}

2. 柱状图颜色渐变

	//这样可以实现所有柱体都有同一个渐变色
	normal: {
	  	color: new echarts.graphic.LinearGradient(
	  	0, 0, 1, 0,		//0010从左至右渐变，0001从上至下渐变
  		[
	          {offset: 0, color: '#3977E6'},
	          {offset: 1, color: '#37BBF8'}
    	]
 	)

然后参考一下每个柱体不同颜色的代码，如下：

	color:function(params) {
	    var colorList = ['#89aae6','#177cb0','#5a79ba','#98a6dd','#8b6eaf','#67afc8'];
	    return colorList[params.dataIndex]
	}

综合一下以上方法，如果想要每个柱体有不同的渐变颜色，应该这么写：

	color: function (params) {
	    var colorList = [
	        ['rgb(14,102,179)', 'rgb(51,36,169)'],
	        ['#F5cF0D', '#fa9203'],
	        ['#61dbe8', '#0785de'],
	        ['#ff9717', '#ff4518'],
	    ];
	    var index = params.dataIndex;
	    //给大于颜色数量的柱体添加循环颜色的判断
	    if (params.dataIndex >= colorList.length) {
	        index = params.dataIndex - colorList.length;
	    }
	    return new echarts.graphic.LinearGradient(0, 0, 1, 0,
	        [
	    		{
	                offset: 0,
	                color: colorList[index][0]
	            },
	            {
	                offset: 1,
	                color: colorList[index][1]
	            }
	        ]);
	}