使用ElementUI下拉实现echarts图例控制

<template>

  <div class="block">

    <div ref="main" style="width: 800px; height: 400px"></div>

    <div>

      <el-dropdown

        placement=" bottom-start"

        trigger="click"

        :hide-on-click="false"

      >

        <span class="el-dropdown-link">

          图例控制<i class="el-icon-arrow-down el-icon--right"></i>

        </span>

        <el-dropdown-menu slot="dropdown">

          <el-dropdown-item v-for="item in options" :key="item.name"

            ><el-checkbox v-model="item.ischeck" @change="test(item)">{{

              item.label

            }}</el-checkbox></el-dropdown-item

          >

        </el-dropdown-menu>

      </el-dropdown>

    </div>

  </div>

</template>

<script>

const cityOptions = ["上海", "北京", "广州", "深圳"];

import * as echarts from "echarts";

export default {

  name: "time-demo",

  data() {

    return {

      checkAll: false,

      checkedCities: ["上海", "北京"],

      cities: cityOptions,

      isIndeterminate: true,

      myChartInstance: {},

      options: [

        {

          ischeck: true,

          label: "all",

        },

        {

          ischeck: true,

          label: "2015",

        },

        {

          ischeck: true,

          label: "2016",

        },

        {

          ischeck: true,

          label: "2017",

        },

      ],

    };

  },

  mounted() {

    this.buildCharts();

  },

  methods: {

    test(d) {

      var testd = this.myChartInstance;

      if (d.label === "all" && d.ischeck) {

        this.options.forEach(function (item) {

          item.ischeck = true;

        });

        testd.dispatchAction({

          type: "legendAllSelect",

        });

      } else if (d.label === "all" && !d.ischeck) {

        testd.dispatchAction({

          type: "legendAllSelect",

        });

        testd.dispatchAction({

          type: "legendInverseSelect",

        });

        this.options.forEach(function (item) {

          item.ischeck = false;

        });

      } else {

        testd.dispatchAction({

          type: "legendToggleSelect",

          name: d.label,

        });

        var array = this.options;

        console.log(d);

        var count1 = 0;

        var count2 = 0;

        for (let index = 1; index < array.length; index++) {

          const element = array[index];

          if (element.ischeck) {

            count1++;

          } else {

            count2++;

          }

        }

        if (count1 == array.length - 1) {

          this.options[0].ischeck = true;

        }

        if (count2 == array.length - 1) {

          this.options[0].ischeck = false;

        }

      }

    },

    buildCharts() {

      console.log(this.$refs.main);

      var myChart = echarts.init(this.$refs.main);

      this.myChartInstance = myChart;

      // 绘制图表

      myChart.setOption({

        legend: {},

        tooltip: {},

        dataset: {

          source: [

            ["product", "2015", "2016", "2017"],

            ["Matcha Latte", 43.3, 85.8, 93.7],

            ["Milk Tea", 83.1, 73.4, 55.1],

            ["Cheese Cocoa", 86.4, 65.2, 82.5],

            ["Walnut Brownie", 72.4, 53.9, 39.1],

          ],

        },

        xAxis: { type: "category" },

        yAxis: {},

        // Declare several bar series, each will be mapped

        // to a column of dataset.source by default.

        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],

      });

    },

  },

};

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>