应用场景：点击不同的图例，显示不同的X轴或者Y轴的图表
问题：数据打印更新了，Y轴仍然不变。
点第一个legend块，Y轴应该['名称1', '名称2', '名称3', '名称4', '名称5', '名称6', '名称7', '名称8'],
点第二个legend块，Y轴应该 ['名称二1', '名称二2', '名称二3', '名称二4', '名称二5', '名称二6', '名称二7', '名称二8'],
下面是我的代码，解决办法看第4步。
页面和样式部分
<template>
<div class="home" style="margin-left: 20px;margin-top: 60px;">
<div id="container" ref="echart1"></div>
</div>
</template>
<style lang="less" scoped>
#container {
width: 88%;
height: 680px;
}
</style>1.数据 我这里写了测试数据
data() {
return {
barData1: [250, 500, 750, 850, 1000, 1200, 1800, 2500, 3500], //坐标数据
barData2: [20, 55, 80, 90, 105, 125, 185, 245], //坐标数据
x_Data: ['名称1', '名称2', '名称3', '名称4', '名称5', '名称6', '名称7', '名称8'],
y_Data: ['名称二1', '名称二2', '名称二3', '名称二4', '名称二5', '名称二6', '名称二7', '名称二8'],
option1: {
grid: {
top: "15%",
left: "17%",
right: "2%",
bottom: "8%",
containLabel: false
},
yAxis: {},
xAxis: {
type: 'value',
},
legend: {
selectedMode: 'single', //只能选一个
data: ['销量: ㎡', '实收平均: 元/㎡'],
selected: {
'销量: ㎡': true,
'实收平均: 元/㎡': false
}
},
series: [{
name: '销量: ㎡',
type: 'bar',
data: [],
barWidth: 25,
label: {
formatter: "{c}",
show: true, //开启显示
position: 'right',
textStyle: { //数值样式
color: '#5087EC',
fontSize: 12
}
},
itemStyle: { //柱状颜色和圆角
color: '#5087EC',
},
},
{
name: '实收平均: 元/㎡',
type: 'bar',
data: [],
label: {
formatter: "{c}",
show: true, //开启显示
position: 'right',
textStyle: { //数值样式
color: '#68BBC4',
fontSize: 12
}
},
barWidth: 25,
itemStyle: { //柱状颜色和圆角
color: '#68BBC4',
},
}
]
}2.初始化数据
getxydate() {
// 初始化赋值。我这里是直接用data中的数据，大家可以在这里获取接口中数据
this.option1.series[0].data = this.barData1 //初始化时赋值 x轴，第一个块数据
this.option1.series[1].data = this.barData2 //初始化时赋值 x轴，第二个块数据
this.option1.yAxis = {
type: 'category',
data: this.x_Data,
} //初始化赋值y轴数据
this.option1.legend.selected = {
'销量: ㎡': true,
'实收平均: 元/㎡': false
} //默认回到第一个legend块
this.mychart2() //执行echart方法
},3.获取数据后加载获取echart的方法
mychart2() {
var echart = this.$echarts.init(document.getElementById("container"));
echart.setOption({}, true)
// var sel_name = this.option1.series[0].name
echart.off('legendselectchanged') //解决重复触发
echart.on('legendselectchanged', (e) => {
//点击legend切换时执行的方法
if (e.name == '销量: ㎡') {
this.option1.yAxis = {
type: 'category',
data: this.x_Data,
boundaryGap: true
}
this.option1.legend.selected = {
'销量: ㎡': true,
'实收平均: 元/㎡': false
}
console.log(this.x_Data, '销量: ㎡')
} else {
this.option1.yAxis = {
type: 'category',
data: this.y_Data,
boundaryGap: true
}
this.option1.legend.selected = {
'销量: ㎡': false,
'实收平均: 元/㎡': true
}
console.log(this.y_Data, '否则')
}
sel_name = e.name
})
console.log(this.option1.yAxis.data, ' this.option1.yAxis')
echart.setOption(this.option1, true);
},到此，上面执行后是有问题的，切换legend后Y轴是不变的
4.解决办法，用监听重新调用echart的方法来更新数据，ok,成功
watch: {
option1: {
handler() {
console.log('监听')
this.mychart2();
},
deep: true
}
},
1.中间我尝试过
myChart.setOption(option2,true);//设置为true时不会合并数据，而是重新刷新数据2.在数据发生改变时，先清空原来的数据
this.chart.clear();
// or
this.chart.setOption( {}, true)3.或者直接修改整个xAxis的值，而不是xAxis.data
option.yAxis = {
type: 'category',
data: this.HistogramList.series[1].titles
}
