根据选择不同的年份，会重新渲染图表

<template>
  <div class="home">
    <el-row>
      <el-col :span="24">
        <el-card class="card">
          <el-date-picker type="year" placeholder="选择年" v-model="value" class="picker" :picker-options="pickerOptions">
          </el-date-picker>
          <div class="home_list">
            <div id="chart" style="width: 100%; height: 650px;text-align:center"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { filterTime } from "../mixinx/data";
import { proportion } from '@/api/special'
export default {
  name: "Index",
  data() {
    return {
      value: new Date(),
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getFullYear() < 2000 ||
            time.getFullYear() > new Date().getFullYear()
          );
        },
      },
      key: [],
      val: []
    };
  },
  methods: {
    init() {
      var myChart = this.$echarts.init(document.getElementById("chart"));
      var option = {
        legend: {},
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: this.key
        },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            itemStyle:{normal:{ color:'#000' } },
            data: this.val
          },
          { showBackground:true,
            type: 'bar',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            itemStyle:{normal:{ color:'#4ad2ff' } },
            data: this.val
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}:{d}%'
            },
            data: [
              { value: this.val[0], name: this.key[0] },
              { value: this.val[1], name: this.key[1] },
              { value: this.val[2], name: this.key[2] },
              { value: this.val[3], name: this.key[3] },
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        let newTime = filterTime(newVal);
        console.log(newTime);
        proportion({ time: newTime }).then(res => {
          console.log(res)
          this.key = res.key
          this.val = res.val
          this.init();
        })
      },
      deep: true,
    },
  },
  mounted() {
    proportion({ time: new Date().getFullYear() }).then(res => {
      this.key = res.key
      this.val = res.val
      this.init();
    })
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #eaeaea;
  margin: 20px;

  .el-col {
    border-radius: 4px;
  }

  .card {
    margin: 20px;

    .home_list {
      display: flex;
      flex-direction: column;
      align-items: center;

      .picker {
        margin-top: 5px;
      }
    }
  }

  .card_bottom {
    margin-top: 0;
  }
}
</style>

//filterTime 是混入的一个方法，用来转换成对应的年份
//proportion 是自己定义的接口，每次选择日期都会重新调取这个接口并重新渲染图表
//key和val是后端返回的数组，根据自己情况判断

展示的效果