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

　　下面是我的公眾號，大家可以關注一下，可以一起學習，一起進步：