echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient

最近用的echarts的柱状图，客户需要有立体的效果，需要echarts的渐变色生成器echarts.graphic.LinearGradient实现，特记录一下解决方法：

效果图如下

代码如下（主要配置color）：

var myChart = echarts
				.init(document.getElementById('main3'), 'macarons');
		// 指定图表的配置项和数据
		var jobGrade1Data = [];
		var countData = [];
		for ( var i = 0; i < data.list.length; i++) {
			jobGrade1Data[i] = data.list[i].jobGrade1;
			countData[i] = data.list[i].count;
		}
		option = {
			title : {
				text : '职级情况分析(人数:'+data.num+')',
				subtext : '',
				left : 'center'
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'none'
				}
			},
			xAxis : [ {
				type : 'category',
				data : jobGrade1Data
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '人数',
				type : 'bar',
				data : countData,
				itemStyle : {
					normal : {
						label : {
							show : true,
							//开启显示
							position : 'top',
							//在上方显示
							textStyle : { //数值样式
							// fontSize: 16
							}
						},
　　　　　　　　　　color: function (params){
　　　　　　　　　　　　//数组定义的一种颜色
　　　　　　　　　　　　var colorList = [
　　　　　　　　　　　　　　　　　　　　['#f24a78','#fedce6','#f24a78']
　　　　　　　　　　　　　　　　　　　];
 
                              var index=params.dataIndex;
                              if(params.dataIndex >= colorList.length){
                                      index=params.dataIndex%colorList.length;
                               }
 
　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(1,0, 0, 0,
　　　　　　　　　　　　　     [
　　　　　　　　　　　　　　       {offset: 0, color: colorList[0][0]},
　　　　　　　　　　　　　　       {offset: 0.5, color: colorList[0][1]},
　　　　　　　　　　　　　　       {offset: 1, color: colorList[0][2]}
　　　　　　　　　　　　　     ]);
　　　　　　　　　　},
　　　　　　　　　　barBorderRadius: 5  //柱状角成椭圆形
　　　　　　　　}
				}

			} ],
			axisLabel : {//坐标轴刻度标签的相关设置。
				formatter : function(params) {
					var newParamsName = "";// 最终拼接成的字符串
					var paramsNameNumber = params.length;// 实际标签的个数
					var provideNumber = 3;// 每行能显示的字的个数
					var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
					/**
					 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
					 */
					// 条件等同于rowNumber>1
					if (paramsNameNumber > provideNumber) {
						/** 循环每一行,p表示行 */
						for ( var p = 0; p < rowNumber; p++) {
							var tempStr = "";// 表示每一次截取的字符串
							var start = p * provideNumber;// 开始截取的位置
							var end = start + provideNumber;// 结束截取的位置
							// 此处特殊处理最后一行的索引值
							if (p == rowNumber - 1) {
								// 最后一次不换行
								tempStr = params.substring(start,
										paramsNameNumber);
							} else {
								// 每一次拼接字符串并换行
								tempStr = params.substring(start, end) + "\n";
							}
							newParamsName += tempStr;// 最终拼成的字符串
						}

					} else {
						// 将旧标签的值赋给新标签
						newParamsName = params;
					}
					//将最终的字符串返回
					return newParamsName
				}

			}
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
        //点击事件
        myChart.on('click', function (params) { 
		//alert(params.name);
		});

多种颜色的demo:

代码：

var myChart = echarts
				.init(document.getElementById('main1'), 'macarons');
		// 指定图表的配置项和数据
		option = {
			title : {
				text : '年龄情况分析(人数:' + data.ageAll + ')',
				subtext : '',
				left : 'center'
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'shadow'
				}
			},
			xAxis : [ {
				type : 'category',
				data : [ '30岁及以下', '31-35岁', '36-40岁', '41-45岁', '46-50岁',
						'51-55岁', '56-60岁', '60岁以上' ]
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '人数',
				type : 'bar',
				data : [ data.age30, data.age31, data.age36, data.age41,
						data.age46, data.age51, data.age56, data.age60 ],
				itemStyle : {
					normal:{
					label : {contentType: false,
							show : true,
							//开启显示
							position : 'top',
							//在上方显示
							textStyle : { //数值样式
							// fontSize: 16
							}
						},
　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
　　　　　　　　　　color: function (params){
　　　　　　　　　　　　//注意颜色值循环使用
　　　　　　　　　　　　var colorList = [
　　　　　　　　　　　　　　　　　　　　['#f24a78','#fedce6','#f24a78'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
['#1324b4','#d6dafa','#1324b4'],
　　　　　　　　　　　　　　　　　　　];
 
                              var index=params.dataIndex;
                              if(params.dataIndex >= colorList.length){
                                      index=params.dataIndex%colorList.length;
                               }
 
　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(1,0, 0, 0,
　　　　　　　　　　　　　     [
　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
　　　　　　　　　　　　　　       {offset: 0.5, color: colorList[index][1]},
　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][2]}
　　　　　　　　　　　　　     ]);
　　　　　　　　　　},
　　　　　　　　　　barBorderRadius: 5  //柱状角成椭圆形
　　　　　　　　}
				}

			} ],
			axisLabel : {//坐标轴刻度标签的相关设置。
				formatter : function(params) {
					var newParamsName = "";// 最终拼接成的字符串
					var paramsNameNumber = params.length;// 实际标签的个数
					var provideNumber = 5;// 每行能显示的字的个数
					var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
					/**
					 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
					 */
					// 条件等同于rowNumber>1
					if (paramsNameNumber > provideNumber) {
						/** 循环每一行,p表示行 */
						for ( var p = 0; p < rowNumber; p++) {
							var tempStr = "";// 表示每一次截取的字符串
							var start = p * provideNumber;// 开始截取的位置
							var end = start + provideNumber;// 结束截取的位置
							// 此处特殊处理最后一行的索引值
							if (p == rowNumber - 1) {
								// 最后一次不换行
								tempStr = params.substring(start,
										paramsNameNumber);
							} else {
								// 每一次拼接字符串并换行
								tempStr = params.substring(start, end) + "\n";
							}
							newParamsName += tempStr;// 最终拼成的字符串
						}

					} else {
						// 将旧标签的值赋给新标签
						newParamsName = params;
					}
					//将最终的字符串返回
					return newParamsName
				}

			}
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);