使用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>
上一篇:Latex排版-图片


下一篇:【数据结构(C语言版)系列四】 串