标签：echats name color data chart 下拉选 type 数据 87

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

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

算了直接放代码吧：

<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>

标签：echats,name,color,data,chart,下拉选,type,数据,87
来源： https://www.cnblogs.com/codexlx/p/16409661.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。