Echarts中数据集的使用

码客说

发布于 2023-10-19 14:38:21

2310

发布于 2023-10-19 14:38:21

文章被收录于专栏：码客码客

前言

从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。

https://echarts.apache.org/handbook/zh/concepts/dataset

数据集最大的特点就是数据和数据展示配置的分离。

以前我们都是在系列（series）中设置数据。

如下

option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};

使用数据集后，序列中只需要设置x,y展示的列即可。

{
  "legend": {},
  "tooltip": {},
  "dataset": {
    "dimensions": [
      "product",
      "2015",
      "2016",
      "2017"
    ],
    "source": [
      {
        "2015": 43.3,
        "2016": 85.8,
        "2017": 93.7,
        "product": "Matcha Latte"
      },
      {
        "2015": 83.1,
        "2016": 73.4,
        "2017": 55.1,
        "product": "Milk Tea"
      },
      {
        "2015": 86.4,
        "2016": 65.2,
        "2017": 82.5,
        "product": "Cheese Cocoa"
      },
      {
        "2015": 72.4,
        "2016": 53.9,
        "2017": 39.1,
        "product": "Walnut Brownie"
      }
    ]
  },
  "xAxis": {
    "type": "category"
  },
  "yAxis": {},
  "series": [
    {
      "type": "bar",
      "name": "2015",
      "encode": {
        "tooltip": [
          "product"
        ],
        "x": "product",
        "y": "2015"
      }
    },
    {
      "type": "bar",
      "name": "2016",
      "encode": {
        "tooltip": [
          "product"
        ],
        "x": "product",
        "y": "2016"
      }
    },
    {
      "type": "bar",
      "name": "2017",
      "encode": {
        "tooltip": [
          "product"
        ],
        "x": "product",
        "y": "2017"
      }
    }
  ]
}

基本

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/chat_resize.js";

export default {
  name: "BarChart",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "600px",
    },
    height: {
      type: String,
      default: "400px",
    },
    title: {
      type: String,
      default: "",
    },
    colorField: {
      type: String,
      default() {
        return "name";
      },
    },
    keyFields: {
      type: Array,
      default() {
        return ["name", "subject"];
      },
    },
    valueFields: {
      type: Array,
      default() {
        return ["score", "socreHistory"];
      },
    },
    dataList: {
      type: Array,
      default() {
        return [
          {
            id: 1001,
            name: "王宁",
            subject: "语文",
            score: 80,
            sex: "女",
            socreHistory: 100,
          },
          {
            id: 1002,
            name: "王宁",
            subject: "数学",
            score: 60,
            sex: "女",
            socreHistory: 80,
          },
          {
            id: 1003,
            name: "王宁",
            subject: "英语",
            score: 93,
            sex: "女",
            socreHistory: 60,
          },
          {
            id: 1004,
            name: "张瑞红",
            subject: "语文",
            score: 99,
            sex: "女",
            socreHistory: 30,
          },
          {
            id: 1005,
            name: "张瑞红",
            subject: "数学",
            score: 70,
            sex: "女",
            socreHistory: 80,
          },
          {
            id: 1006,
            name: "张瑞红",
            subject: "英语",
            score: 80.5,
            sex: "女",
            socreHistory: 60,
          },
          {
            id: 1007,
            name: "王中露",
            subject: "语文",
            score: 60,
            sex: "男",
            socreHistory: 70,
          },
          {
            id: 1008,
            name: "王中露",
            subject: "数学",
            score: 90,
            sex: "男",
            socreHistory: 100,
          },
          {
            id: 1009,
            name: "王中露",
            subject: "英语",
            score: 70,
            sex: "男",
            socreHistory: 90,
          },
          {
            id: 1010,
            name: "郭忠博",
            subject: "语文",
            score: 80,
            sex: "男",
            socreHistory: 60,
          },
          {
            id: 1011,
            name: "郭忠博",
            subject: "数学",
            score: 70,
            sex: "男",
            socreHistory: 50,
          },
          {
            id: 1012,
            name: "郭忠博",
            subject: "英语",
            score: 99,
            sex: "男",
            socreHistory: 70,
          },
          {
            id: 1013,
            name: "雍文秀",
            subject: "语文",
            score: 30,
            sex: "女",
            socreHistory: 80,
          },
          {
            id: 1014,
            name: "雍文秀",
            subject: "数学",
            score: 100,
            sex: "女",
            socreHistory: 98,
          },
          {
            id: 1015,
            name: "雍文秀",
            subject: "英语",
            score: 98,
            sex: "女",
            socreHistory: 65,
          },
        ];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    dataList: function () {
      this.initChart();
    },
  },
  async mounted() {
    await this.$nextTick();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$el);
      }

      let dataList = this.dataList;

      let option = {
        legend: {
          show: true,
          top: 2,
          right: 2,
        },
        tooltip: {
          show: true,
        },
        color: [
          "#20afff",
          "#2cd9ff",
          "#9dfff0",
          "#77fef6",
          "#fffc91",
          "#fdc67f",
          "#f2528b",
        ],
        dataset: {
          dimensions: dataList.length ? Object.keys(dataList[0]) : [],
          source: dataList,
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [
          {
            type: "bar",
            stack: "分数",
            name: "分数",
            showBackground: true,
            backgroundStyle: {
              color: "#f3f3f3",
            },
            seriesLayoutBy: "column",
            encode: {
              tooltip: ["name", "subject", "score"],
              x: ["name"],
              y: "score",
              itemGroupID: "subject",
              itemName: "subject",
            },
          },
          {
            type: "bar",
            name: "历史分数",
            showBackground: true,
            backgroundStyle: {
              color: "#f3f3f3",
            },
            stack: "历史分数",
            encode: {
              tooltip: ["name", "subject", "score"],
              x: "name",
              y: "socreHistory",
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>