Vue3 ECharts 使用数据集dataset - 附完整示例

<template>
  <div id="datasetMain"></div>
</template>

<script lang="ts" setup>
  import * as echarts from "echarts";

  initChart() {
    let chartDom = document.getElementById("datasetMain");
    let myChart = echarts.init(chartDom);
    let option;

    ...详见完整示例   
  };
</script>

<style lang="scss" scoped>
#datasetMain {
  width: 600px;
  height: 300px;
}
</style>

3、数据处理（关键点）

1）设置dataset

dataset: {
  source: [
    ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
    ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
    ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
    ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
    ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
  ],
},

数据集 - 概念篇 - 使用手册 - Apache ECharts

2）设置series

series: [
  {
    type: "bar", // 柱状图
    smooth: true, // 是否平滑曲线显示。
    // 如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。
    seriesLayoutBy: "row", // 指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。
    emphasis: { focus: "series" }, // 折线图的高亮状态。在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
    // 'none' 不淡出其它图形，默认使用该配置。
    // 'self' 只聚焦（不淡出）当前高亮的数据的图形。
    // 'series' 聚焦当前高亮的数据所在的系列的所有图形。
  },
  {
    type: "line", // 折线/面积图
    smooth: true,
    seriesLayoutBy: "row",
      emphasis: { focus: "series" },
    },
    {
      type: "line",
      smooth: true,
      seriesLayoutBy: "row",
      emphasis: { focus: "series" },
    },
    {
      type: "bar",
      smooth: true,
      seriesLayoutBy: "row",
      emphasis: { focus: "series" },
    },
  ],

四、完整示例

<template>
  <div id="datasetMain"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, nextTick } from "vue";

const initChart = () => {
  let chartDom = document.getElementById("datasetMain");
  let myChart = echarts.init(chartDom);
  let option;

  option = {
    legend: {},
    tooltip: {
      trigger: "axis",
      showContent: true,
      textStyle:{
        align: "left", // 文字左对齐
      }
    },
    dataset: {
      source: [
        ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
      ],
    },
    xAxis: { type: "category" },
    yAxis: { gridIndex: 0 },
    grid: { top: "10%" },
    series: [
      {
        type: "bar", // 柱状图
        smooth: true, // 是否平滑曲线显示。
        // 如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。
        seriesLayoutBy: "row", // 指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 series.seriesLayoutBy 属性来配置。默认是按照列（column）来映射。
        emphasis: { focus: "series" }, // 折线图的高亮状态。在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
        // 'none' 不淡出其它图形，默认使用该配置。
        // 'self' 只聚焦（不淡出）当前高亮的数据的图形。
        // 'series' 聚焦当前高亮的数据所在的系列的所有图形。
      },
      {
        type: "line", // 折线/面积图
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "bar",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
    ],
  };

  option && myChart.setOption(option);
}

onMounted(async() => {
  await nextTick()
  initChart()
})

</script>

<style lang="scss" scoped>
#datasetMain {
  width: 600px;
  height: 300px;
}
</style>