其实复用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
});
下面是我的公众号,大家可以关注一下,可以一起学习,一起进步: