Echart 数据更新了,X轴或者Y轴显示不变化的问题

应用场景：点击不同的图例，显示不同的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
            }

上面三种都试了不行、

最终是通过监听重新调用echart的方法来更新数据！！！

echarts官网地址，可以选择自己需求的样式进行修改  Examples - Apache ECharts