echats根据下拉选数据调用接口获取图表数据

有个图表需要根据当前选择的选项展示不同的数据，效果如果图：

左边的图表要根据右边的下拉选获取对应接口数据。

算了直接放代码吧：

<template>
  <div class="transaction-chart-comp">
    <div class="tc-title chart-box-title">
      <span>学籍异动趋势分析</span>
      <div class="inp-box">
        <el-select @change="typeChange" v-model="type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="tc-content">
      <div id="transaction-chart"></div>
      <ul class="view-count">
        <li v-for="(item, i) in abnormalData" :key="i">
          <p>{{ item.name }}</p>
          <p class="count">{{ item.value }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { abnormalChart, abnormalData } from "@/api/charts";
const commSeriesConfig = function (color) {
  return {
    type: "line",
    emphasis: {
      focus: "series",
    },
    color: `rgb(${color})`,
    lineStyle: {
      color: `rgb(${color})`,
    },
    areaStyle: {
      opacity: 0.4,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: `rgba(${color}, 0.8)`,
        },
        {
          offset: 1,
          color: `rgba(${color}, 0.1)`,
        },
      ]),
    },
  };
};

export default {
  name: "TransactionChart",
  data() {
    return {
      type: 0,
      options: [
        { label: "休学、复学", value: 0 },
        { label: "转班、转专业", value: 1 },
        { label: "晋级、降级、留级", value: 2 },
        { label: "转入、转出", value: 3 },
        { label: "取消学籍", value: 4 },
      ],
      seriesMap: [
        [
          { name: "休学", color: "23, 125, 230" },
          { name: "复学", color: "87, 217, 87" },
        ],
        [
          { name: "转班", color: "23, 125, 230" },
          { name: "转专业", color: "87, 217, 87" },
        ],
        [
          { name: "晋级", color: "87, 217, 87" },
          { name: "降级", color: "227, 200, 23" },
          { name: "留级", color: "23, 125, 230" },
        ],
        [
          { name: "转入", color: "23, 125, 230" },
          { name: "转出", color: "87, 217, 87" },
        ],
        [{ name: "取消学籍", color: "87, 217, 87" }],
      ],
      abnormalData: [],
      chart: null,
      chartOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {},
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: { color: "#909399" },
            splitLine: { // 分割线设置
              lineStyle: {
                color: '#E4E7ED'
              }
            }
          },
        ],
        series: [],
      },
    };
  },
  methods: {
    initChart() {
      const chart = document.getElementById("transaction-chart");
      this.chart = echarts.init(chart);
      this.chart.setOption(this.chartOption);
    },
    typeChange() {
      this.getData();
    },
    getData() {
      abnormalChart({ type: this.type }).then((res) => {
        const data = res?.data || [];
        // 所有的xAxis都一样,用第一条数据的name代替
        this.chartOption.xAxis[0].data = data[0].map((e) => {
          return e.name;
        });
        this.chartOption.series = this.seriesMap[this.type].map((e, i) => {
          return {
            ...e,
            ...commSeriesConfig(e.color),
            data: data[i].map((e) => {
              //   return Math.random();
              return e.value;
            }),
          };
        });
        this.chart.setOption(this.chartOption, true);
      });
    },
  },
  mounted() {
    this.initChart();
    this.getData();
    /* 获取异动数据分析 */
    abnormalData().then((res) => {
      this.abnormalData = res?.data || [];
    });
  },
};
</script>

<style scoped>
.tc-content {
  display: flex;
}

#transaction-chart {
  width: calc(100% - 200px);
  height: 266px;
}
.view-count {
  width: 200px;
  height: 266px;
  margin: 0;
  list-style: none;
  padding-left: 12px;
}
.chart-box-title {
  height: 53px;
  line-height: 54px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  padding-left: 20px;
  box-shadow: inset 0px -1px 0px 0px #ebeef5;
}
.tc-title {
  display: flex;
  justify-content: space-between;
}
.inp-box {
  width: 200px;
  padding-right: 12px;
}
.view-count .count {
  font-size: 2em;
  margin: 8px 0;
}
.view-count p {
  margin: 0;
}
.view-count li {
  margin: 16px 12px;
}

.test {
  color: rgb(87, 217, 87);
}
</style>