vue点击按钮切换饼状图数据，默认第一个按钮高亮

<template>
  <div class="ect-box">
    <el-button v-for="(item, index) in buttons" :key="index"
               :class="{ 'button': true, 'active': index === activeButtonIndex }"
               @click="changeData(index)">
      {{ item.name }}
    </el-button>
    <div class="ect-sty" id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "pieChart",
  data() {
    return {
      buttons: [{
        name: '构件类型'
      }, {
        name: '构件专业'
      }, {
        name: '系统分类'
      }],
      activeButtonIndex: 0 // 当前选中的按钮索引，默认为0
    }
  },
  mounted() {
    this.picChart()
  },
  methods: {
    picChart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'center',
          itemHeight: 12,
          itemWidth: 12
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 13, name: '混凝土构件'},
              {value: 10, name: '钢结构构件'},
              {value: 17, name: '外围护墙'},
              {value: 15, name: '单元式幕墙'},
              {value: 25, name: '外门窗系统'},
              {value: 20, name: '遮阳板'}
            ],
          }
        ]
      };
      myChart.setOption(option)
    },
    picChart2() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'center',
          itemHeight: 12,
          itemWidth: 12
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 13, name: '混凝土构件2'},
              {value: 10, name: '钢结构构件2'},
              {value: 17, name: '外围护墙2'},
              {value: 15, name: '单元式幕墙2'},
              {value: 25, name: '外门窗系统2'},
              {value: 20, name: '遮阳板2'}
            ],
          }
        ]
      };
      myChart.setOption(option)
    },
    picChart3() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'center',
          itemHeight: 12,
          itemWidth: 12
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 13, name: '混凝土构件3'},
              {value: 10, name: '钢结构构件3'},
              {value: 17, name: '外围护墙3'},
              {value: 15, name: '单元式幕墙3'},
              {value: 25, name: '外门窗系统3'},
              {value: 20, name: '遮阳板3'}
            ],
          }
        ]
      };
      myChart.setOption(option)
    },
    changeData(index) {
      this.activeButtonIndex = index;
      // 根据按钮索引切换饼状图数据
      // 例如，根据按钮索引为0、1、2分别获取不同的数据
      if (index === 0) {
        this.picChart()
      } else if (index === 1) {
        this.picChart2()
      } else if (index === 2) {
        this.picChart3()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ect-box {
  margin-top: 24px;
  border: 1px solid #EEEEEE;
  border-radius: 8px;
  padding: 12px;
  width: 49%;

  .ect-sty {
    width: 100%;
    height: 300px;
  }
}

.button {
  background-color: #fff;
  color: #191919;
}

.button.active {
  color: white;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: -webkit-gradient(linear, left top, right top, from(#137dce), to(#30c4f4)), -webkit-gradient(linear, left top, right top, from(#137dce), to(#30c4f4));
  background-image: linear-gradient(to right, #137dce, #30c4f4), linear-gradient(90deg, #137dce, #30c4f4);
}
</style>