使用ElementUI下拉實現echarts圖例控制
阿新 • • 發佈：2021-11-21
<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>
<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>