使用echarts时option可以复用的方法

其实复用option很简单，在所要展示的图形在其他需求大致一致时，即可写一个option然后设置不同的地方就好了，坐标轴、series等都可以设置，具体代码如下：

var barLeft = echarts.init(document.getElementById("barLeft"));
var barRight = echarts.init(document.getElementById("barRight"));
var barYear = echarts.init(document.getElementById("barYear"));
var optionBarLeft = {
	xAxis: {
		type: \'category\',
		axisLine:{
		                        lineStyle:{
		                            color:\'#D5DAE6\',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    },
                           
		axisLabel:{
			formatter: function(val) {
				var strs = val.split(\'\'); //字符串数组
				var str = \'\'
				for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
				str += s;
				if (!(i % 3)) str += \'\n\'; //按需要求余
				}
				return str
			},
			textStyle: {
                                    color: "#7A758C" // y轴单位坐标文字颜色
                                }
		},
		data: [\'日累 耗煤量\', \'月报 耗煤量\', \'耗煤量调整\']
	},
	grid: {
		left: \'3%\',
		right: \'4%\',
		bottom: \'3%\',
		containLabel: true
	},
	yAxis: {
		type: \'value\',
		name: \'单位：吨\',
		nameTextStyle: {
                                ontSize: \'8\',
                                color: "#7A758C" // y轴单位标签颜色
                            },
                            axisLine:{
		                        lineStyle:{
		                            color:\'#D5DAE6\',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    },
	},
	series: [{
		name: \'华电蒙能\',
		type: \'bar\',
		data: [11200, 10780, 420],
		//设置柱子的宽度
		barWidth: 30,
		//配置样式
		itemStyle: {
			//通常情况下：
			normal: {　　　　　　　　　　　　 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
				color: function(params) {
					var colorList = [\'#6278FF\', \'#239FFF\', \'#AD77FF\', \'#D36AFF\'];
					return colorList[params.dataIndex];
				},
				//以下为是否显示，显示位置和显示格式的设置了
				label: {
					show: true,
					position: \'top\',
					textStyle: {
						color: \'#4D4D4D\'
					}
				}
			},

		},
	}],
};
//这一步必须要有，不然会报错
barLeft.setOption(optionBarLeft);
barRight.setOption(optionBarLeft);
barYear.setOption(optionBarLeft);

//复用时，需要设置修改不同的数据参数
var barRightSeries=[{
		name: \'华电蒙能\',
		type: \'bar\',
		data: [5100, 5300, 200],
		//设置柱子的宽度
		barWidth: 30,
		//配置样式
		itemStyle: {
			//通常情况下：
			normal: {　　　　　　　　　　　　 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
				color: function(params) {
					var colorList = [\'#6278FF\', \'#239FFF\', \'#AD77FF\', \'#D36AFF\'];
					return colorList[params.dataIndex];
				},
				//以下为是否显示，显示位置和显示格式的设置了
				label: {
					show: true,
					position: \'top\',
					textStyle: {
						color: \'#4D4D4D\'
					}
				}
			},

		},
	}];
var barRightX={
		type: \'category\',
		
		axisLabel:{
			formatter: function(val) {
				var strs = val.split(\'\'); //字符串数组
				var str = \'\'
				for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
				str += s;
				if (!(i % 3)) str += \'\n\'; //按需要求余
				}
				return str
			}
		},
		data: [\'日累值\', \'日累值\', \'调整量\']
	}
var barRightY={
		type: \'value\',
		name: \'单位：千卡/千克\',
	}

//复用设置即可
barRight.setOption({
			series :barRightSeries
});
barRight.setOption({
			xAxis :barRightX
});
barRight.setOption({
			yAxis :barRightY
});

　　下面是我的公众号，大家可以关注一下，可以一起学习，一起进步：