echarts使用案例

1.配置legend icon 根据点击事件动态更换样式

<template>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'EchartsExample',
    data() {
      return {
        chart: null,
        legendIcons: {
          selected: 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m299.264 382.208L481.28 712.192a51.2 51.2 0 0 1-70.656 0L212.992 514.56a51.2 51.2 0 0 1 70.656-69.888l162.048 162.048 294.656-295.168a49.664 49.664 0 0 1 48.384-13.056 51.2 51.2 0 0 1 22.528 83.712z',
          unselected: 'path://M512 64c60.5 0 119.2 11.8 174.4 35.2 53.3 22.6 101.3 54.9 142.4 96 41.2 41.2 73.5 89.1 96 142.4C948.2 392.8 960 451.5 960 512s-11.8 119.2-35.2 174.4c-22.6 53.3-54.9 101.3-96 142.4-41.2 41.2-89.1 73.5-142.4 96C631.2 948.2 572.5 960 512 960s-119.2-11.8-174.4-35.2c-53.3-22.6-101.3-54.9-142.4-96-41.2-41.2-73.5-89.1-96-142.4C75.8 631.2 64 572.5 64 512s11.8-119.2 35.2-174.4c22.6-53.3 54.9-101.3 96-142.4s89.1-73.5 142.4-96C392.8 75.8 451.5 64 512 64m0-64C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z',
        },
        legendSelected: {
          'Category1': true,
          'Category2': false,
          'Category3': false,
          'Category4': false,
          'Category5': false,
        }
      };
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.chart);
        this.setOption();
        this.chart.on('legendselectchanged', this.updateLegendIcons);
      },
      setOption() {
        const option = {
          title: {
            text: 'ECharts Example'
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            bottom:0,
            data: [
              {
                name: 'Category1',
                icon: this.legendIcons.selected
              },
              {
                name: 'Category2',
                icon: this.legendIcons.unselected
              },
              {
                name: 'Category3',
                icon: this.legendIcons.unselected
              },
              {
                name: 'Category4',
                icon: this.legendIcons.unselected
              },
              {
                name: 'Category5',
                icon: this.legendIcons.unselected
              }
            ],
            selected: this.legendSelected,
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
          {
            name: 'Category1',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
          }, 
          {
            name: 'Category2',
            type: 'bar',
            data: [60, 100, 90, 130, 140, 120, 160]
          },
          {
            name: 'Category3',
            type: 'bar',
            data: [60, 100, 90, 130, 140, 120, 160]
          },
          {
            name: 'Category4',
            type: 'bar',
            data: [60, 100, 90, 130, 140, 120, 160]
          },
          {
            name: 'Category5',
            type: 'bar',
            data: [60, 100, 90, 130, 140, 120, 160]
          }
          ]
        };
  
        this.chart.setOption(option);
      },
      updateLegendIcons(params) {
        this.legendSelected = params.selected;
        const legendData = [
          {
            name: 'Category1',
            icon: this.legendSelected['Category1'] ? this.legendIcons.selected : this.legendIcons.unselected
          },
          {
            name: 'Category2',
            icon: this.legendSelected['Category2'] ? this.legendIcons.selected : this.legendIcons.unselected
          },
          {
            name: 'Category3',
            icon: this.legendSelected['Category3'] ? this.legendIcons.selected : this.legendIcons.unselected
          },
          {
            name: 'Category4',
            icon: this.legendSelected['Category4'] ? this.legendIcons.selected : this.legendIcons.unselected
          },
          {
            name: 'Category5',
            icon: this.legendSelected['Category5'] ? this.legendIcons.selected : this.legendIcons.unselected
          }
        ];
        this.chart.setOption({
          legend: {
            data: legendData
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  </style>
  复制

效果展示