vue-echarts 中双y轴点击legend 控制 对应的轴和name显示和隐藏

1、在v-chart 中 定义legend 点击事件

  <v-chart

    :options="options"

    :auto-resize="true"

    style="width: 100%; height: 100%"

    @legendselectchanged="legendselectchanged"

  />

2、定义lengend 事件,通过params 参数来判断y轴们的具体显示和隐藏值，通过setOptions去给设置

    legendselectchanged(params) {

      const legendShow = params.selected

      const arr = []

      // 参数为 '苹果数量'：true/false  '李子数量'：true/false

      for (const key in legendShow) {

        arr.push(legendShow[key])

      }

      this.setOption({ yAxis1: arr[0], yAxis2: arr[1] })

    },

3、 给对象的轴设置显示与隐藏,其中yAxis 中通过show属性控制显示与隐藏，其中yAxis中的name和 legend 中 data 和 selected 需要设置

this.setOptions(yAxis1,yAxis2){

  const options ={                 

         grid: {  },

         legend: {

             data: ['苹果数量', '李子数量'],

             selected: {

                 苹果数量: yAxis1,

                  李子数量: yAxis2

              }

        },

        xAxis: {

          axisLine: {

            show: true,

          },

          data: ['第一季度', '第二季度', '第三季度', '第四季度']

        },

        yAxis: [

          {

            show: yAxis1,

            name: '苹果数量',

             ......................

          },

          {

            name: '李子数量',

            show: yAxis2,

             ....................

            }

        ],

        series: [

          {

            name: '苹果数量',

            data: [7080, 2040, 10000, 6090],

            zlevel: 999,

           .................................

          },

          {

            name: '李子数量',

            data: [4080, 6040, 10000, 4090],

            yAxisIndex: 1,

            zlevel: 1,

            ................................

          }

        ]

      }

}

4、效果图