使用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
});

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