select跟echarts联动

效果图

下拉框切换值，对应的下边图形跟着变换，效果图如下

直接上代码

<template>
  <div>
      <div class="scale">
       <a-row :xs='1' style="margin-top:20px;width:100%;height:62px;display:flex;justify-content: space-between;align-items: center;">
         <div class="scale_title">测试</div>
         <div>
          <a-select default-value="0" style="width: 220px" @change="ScaleHandleChange">
            <a-select-option :value="item.value" v-for="(item,index) in plateList" :key="index">
              {{item.text}}
            </a-select-option>
          </a-select>
        </div>
       </a-row>
       <a-row :xs='23' >
          <div ref="scaleCharts" class="plateScale" style="width:100%;height:300px"></div>
       </a-row>
     </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data(){
    return{
      scaleCharts:{},
      scalePlates:0,
      plateList:[
        {
          text:'aaaaa',
          value:'0'
        },
        {
          text:'bbbb',
          value:'1'
        },
        {
          text:'cccc',
          value:'2'
        }
      ]
    }
  },
  mounted:function(){
    let _self = this
    _self.scaleInitCharts();
  },
  computed:{
    //注册资本规模
    scaleOpt(){
      let scaleOption = {
        color:['#9BD23C','#42D8B0','#5DC7FE','#508EF9','#5074F9'],
        tooltip: {
          trigger: 'item'
        },
          toolbox: {
              show: true,
              feature: {
                  mark: {show: true},
                  dataView: {show: false, readOnly: false},
                  restore: {show: false},
                  saveAsImage: {show: false}
              }
          },

          series: [
              {
                name: '测试',
                type: 'pie',
                left: 220,
                radius: [10, 80],
                center: ['10%', '50%'],
                roseType: 'area',
                avoidLabelOverlap: false,
                hoverAnimation: false,
                silent: false,
                label:{
                  distanceToLabelLine:6
                },
                labelLine: {
                  length:5,
                  length2:5,
                },
                itemStyle: {
                  borderRadius: 2,
                  borderColor: '#fff',
                  borderWidth: 0
                },
                data: []
              }
          ]
       }
      return scaleOption
    }
  },
  methods:{  

    ScaleHandleChange(value) {
      this.scalePlates = value
      this.scaleInitCharts()
    },

    scaleInitCharts(){
      this.scaleCharts = echarts.init(this.$refs.scaleCharts);
      this.scaleCharts.setOption(this.scaleOpt);
      if(this.scalePlates == 0){
        this.scaleCharts.setOption({
            series: [{
              data: [{
                name:'a11111',
                value:'15'
              },
              {
                name:'a22222',
                value:'25'
              },
              {
                name:'a33333',
                value:'5'
              },
              {
                name:'a444444',
                value:'35'
              }]  
            }]
          })
      }else if(this.scalePlates == 1){
        this.scaleCharts.setOption({
            series: [{
              data: [{
                name:'b11111',
                value:'15'
              },
              {
                name:'b22222',
                value:'25'
              },
              {
                name:'b33333',
                value:'5'
              }]  
            }]
          })
      }else if(this.scalePlates == 2){
        this.scaleCharts.setOption({
            series: [{
              data: [{
                name:'c11111',
                value:'15'
              },
              {
                name:'c22222',
                value:'25'
              },
              {
                name:'c33333',
                value:'5'
              },
              {
                name:'c444444',
                value:'35'
              },
              {
                name:'c55555555555',
                value:'35'
              },
              {
                name:'c66666666666',
                value:'35'
              }]  
            }]
          })
      }
    }
  }
}
</script>