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

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

版权声明:本文为weixin_30347009原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30347009/article/details/95197442