**
1、给图例添加点击方法。
2、判断选择情况。
3、修改option的配置。
4、 myChart.setOption(option)刷新配置**
看代码----------------------------------------------------------------------------------------------------------------------------
getChart_zhphd () {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('xiaolvfenxi'))
let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
var option = {
title: [
{
text: '效率分析',
textAlign: 'left',
textStyle: {
fontSize: '12',
fontWeight: '20',
color: '#02F1FA',
textAlign: 'left'
}
}
],
tooltip: {},
animation: false,
grid: {
left: '10%',
right: '2%',
top: '25%',
bottom: '20%'
},
legend: {
data: ['一次的风机A', '一次的风机B'],
icon: "circle",
textStyle: {
fontSize: 12,//字体大小
color: '#07ded2'//字体颜色
},
x: 'right', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
padding: [20, 0, 0, 0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
},
xAxis: [
{
data: xLabel,
axisLabel: {
interval: 0,
rotate: 30,
show: true,
textStyle: {
color: '#02f1fa',
fontSize: 12
},
margin: 15 //刻度标签与轴线之间的距离。
},
axisLine: {
show: true //不显示x轴
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: 'solid',
color: '#03202E'
}
}
}
],
yAxis: [
{
name: '%',
nameTextStyle: {
color: '#02f1fa',
padding: [0, 0, 0, -20]
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#2B5060',
type: 'solid'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#02f1fa'
}
}
}
],
series: [
{
name: "一次的风机A",
type: "bar",
barWidth: 13,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#07ecd9"
},
{
offset: 1,
color: "#034881"
}
])
}
},
data: this.dataA,
z: 10,
zlevel: 0,
},
{
name: "一次的风机B",
type: "bar",
barWidth: 13,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#007aff"
},
{
offset: 1,
color: "#034881"
}
]),
}
},
data: this.dataB,
z: 10,
zlevel: 0,
},
{
// 分隔
name: "一次的风机A",
type: "pictorialBar",
itemStyle: {
normal: {
color: "#052e37"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",
symbolClip: true,
symbolSize: [13, 2],
symbolPosition: "start",
symbolOffset: [-9, -1],
data: this.dataA,
width: 25,
z: 0,
zlevel: 1,
},
{
// 分隔
name: "一次的风机B",
type: "pictorialBar",
itemStyle: {
normal: {
color: "#052e37"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",
symbolClip: true,
symbolSize: [13, 2], //每个分割的 宽度,长度
symbolPosition: "start",
symbolOffset: [9, -1], //偏移
// symbolBoundingData: this.total,
data: this.dataB,
width: 25,
z: 0,
zlevel: 1,
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
//关键代码!!!!!!!
myChart.on('legendselectchanged', (e) => {
if (e.selected['一次的风机A'] == false) {
option.series[3].symbolOffset[0] = 1
} else {
option.series[3].symbolOffset[0] = 9
}
if (e.selected['一次的风机B'] == false) {
option.series[2].symbolOffset[0] = 0
} else {
option.series[2].symbolOffset[0] = -9
}
myChart.setOption(option)
})
window.addEventListener('resize', function () {
myChart.resize()
})
}
})
改完后的效果图
无效情况:
偏移量在data中定义,在图例点击方法中,直接修改定义在data中的偏移量,例如:
这么写不会生效!!!!!!!!!!!!!!!!!!!!!!!!!!!!!