以下是以资深软件开发工程师的视角，对“ECharts 数据集（dataset）”的专业回答。我将详细讲解如何使用 ECharts 的 dataset 功能，包括基础概念、配置方法和示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 ECharts 5.x（最新稳定版）为基准。由于您之前的上下文涉及 Vue3，我也会提供一个 Vue3 集成的示例。
ECharts 数据集 (Dataset)
目录
1. 引言
ECharts 的 dataset 是一种现代化的数据管理方式，允许将数据与图表展示逻辑分离，提升代码复用性和可维护性。本教程将介绍如何使用 dataset 创建图表，提供纯 HTML 和 Vue3 的实现示例，帮助您快速掌握其用法。
2. ECharts 数据集概述
- 定义：
dataset是 ECharts 提供的一种数据容器，用于集中管理图表数据，系列通过encode属性映射数据维度。 - 特点：
- 数据分离：数据与展示分离，易于复用。
- 多图表共享：一个数据集可供多个系列使用。
- 数据转换：支持内置转换（如排序、过滤）。
- 用途：简化复杂图表配置，动态数据展示。
3. 准备工作
3.1 安装 ECharts
- CDN 方式：
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
- npm 方式：
npm install echarts
3.2 加载 ECharts
- 说明：
dataset是 ECharts 核心功能，无需额外模块。 - npm：
import * as echarts from 'echarts';
4. 使用数据集
4.1 数据结构
- 格式：
- 数组格式：二维数组，第一行为维度名称，后续为数据。
- 对象格式：包含
source或sourceHeader。 - 示例（数组格式）：
const data = [
['product', '销量', '利润'],
['苹果', 100, 20],
['香蕉', 150, 30],
['橙子', 200, 50]
];
4.2 基本配置
- 核心选项：
属性 作用 示例值dataset.source数据源[['product', '销量'], ...]series.type图表类型'bar'series.encode数据映射{ x: 'product', y: '销量' }示例（柱形图）：const option = { dataset: { source: [ ['product', '销量'], ['苹果', 100], ['香蕉', 150], ['橙子', 200] ] }, xAxis: { type: 'category' }, yAxis: {}, series: [{ type: 'bar', encode: { x: 'product', y: '销量' } }] };4.3 数据转换- 功能：支持排序、过滤等操作。
- 示例（按销量排序）：
dataset: [ { source: [ ['product', '销量'], ['苹果', 100], ['香蕉', 150], ['橙子', 200] ] }, { transform: { type: 'sort', config: { dimension: '销量', order: 'desc' } } } ]4.4 动态更新- 方法：使用
setOption更新dataset.source。 - 示例：
myChart.setOption({ dataset: { source: [ ['product', '销量'], ['苹果', 120], ['香蕉', 170], ['橙子', 220] ] } });5. 完整示例 5.1 纯 HTML 示例<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>ECharts 数据集</title> <style> #chart { height: 400px; width: 100%; } </style> </head> <body> <div id="chart"></div> <button onclick="updateChart()">更新数据</button> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <script> const myChart = echarts.init(document.getElementById('chart')); let option = { dataset: { source: [ ['product', '销量', '利润'], ['苹果', 100, 20], ['香蕉', 150, 30], ['橙子', 200, 50] ] }, xAxis: { type: 'category' }, yAxis: {}, series: [ { type: 'bar', encode: { x: 'product', y: '销量' } }, { type: 'bar', encode: { x: 'product', y: '利润' } } ], tooltip: {} }; myChart.setOption(option); function updateChart() { myChart.setOption({ dataset: { source: [ ['product', '销量', '利润'], ['苹果', 120, 25], ['香蕉', 170, 35], ['橙子', 220, 55] ] } }); } </script> </body> </html>- 效果：显示双柱形图，点击按钮更新数据。
- 创建项目：
npm create vite@latest vue-dataset -- --template vue cd vue-dataset npm install echarts- 修改
src/App.vue：
<template> <div> <div id="chart" style="height: 400px; width: 100%;"></div> <button @click="updateChart">更新数据</button> </div> </template> <script setup> import { onMounted, ref } from 'vue'; import * as echarts from 'echarts'; const chart = ref(null); onMounted(() => { chart.value = echarts.init(document.getElementById('chart')); const option = { dataset: { source: [ ['product', '销量', '利润'], ['苹果', 100, 20], ['香蕉', 150, 30], ['橙子', 200, 50] ] }, xAxis: { type: 'category' }, yAxis: {}, series: [ { type: 'bar', encode: { x: 'product', y: '销量' } }, { type: 'bar', encode: { x: 'product', y: '利润' } } ], tooltip: {} }; chart.value.setOption(option); }); const updateChart = () => { chart.value.setOption({ dataset: { source: [ ['product', '销量', '利润'], ['苹果', 120, 25], ['香蕉', 170, 35], ['橙子', 220, 55] ] } }); }; </script>- 运行：
npm run dev- 效果：访问
http://localhost:5173，显示双柱形图，点击按钮更新数据。
- 关键优势：
dataset提升数据管理效率。
- 数据清晰：确保维度名称与
encode匹配。 - 复用性：多系列图表优先使用
dataset。 - 动态性：结合
setOption实现实时更新。 - 性能：大数据时优化
dataset大小。 - 文档：参考 ECharts 数据集文档。
dataset提供了一种优雅的数据管理方式，简化了图表配置。本教程展示了基础用法和动态更新，涵盖 HTML 和 Vue3 示例。掌握基础后，您可探索数据转换或多数据集应用。如需特定功能（如实时数据或复杂转换），请提出需求，我将继续提供帮助！ 回答特点- 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
- 实用性：从基础到实践，覆盖
dataset全貌。 - 内部链接：通过
<a href="#ID">跳转，如 使用数据集。 - 出站链接：嵌入正文，指向权威资源。
发表回复