3步搞定！Apache ECharts数据转换让Excel表格秒变可视化图表-优快云博客

3步搞定！Apache ECharts数据转换让Excel表格秒变可视化图表

【免费下载链接】echarts Apache ECharts is a powerful, interactive charting and data visualization library for browser 项目地址: https://gitcode.com/gh_mirrors/echarts16/echarts

你是否遇到过这样的困扰：手里有一堆Excel数据，想做成直观的图表却不知从何下手？用Python写代码太复杂，用Excel自带图表又不够美观？本文将带你用Apache ECharts（数据可视化图表库）的数据集（Dataset）功能，3步实现从原始数据到专业图表的转换，无需复杂编程，运营人员也能轻松掌握。

一、认识ECharts数据集：让数据和图表解耦

在传统的数据可视化流程中，我们通常需要手动处理数据格式，再将其填入图表配置。而ECharts的数据集（Dataset）功能改变了这一方式，它允许我们将数据集中管理，然后通过简单的映射关系（encode）将数据绑定到不同图表，实现"一份数据，多种图表"的灵活展示。

ECharts数据集支持两种常见数据格式：

1. 二维数组格式（适合简单表格数据）

dataset: {
  source: [
    ['年份', '销量', '利润'],
    ['2021', 1500, 450],
    ['2022', 2100, 630],
    ['2023', 3200, 960]
  ]
}

这种格式类似Excel表格，第一行是表头，后续行是数据记录。

2. 对象数组格式（适合JSON数据）

dataset: {
  source: [
    { 年份: '2021', 销量: 1500, 利润: 450 },
    { 年份: '2022', 销量: 2100, 利润: 630 },
    { 年份: '2023', 销量: 3200, 利润: 960 }
  ]
}

这种格式使用键值对表示每条数据，可读性更强，适合处理API返回的JSON数据。

数据集功能的核心优势在于数据与图表的解耦。通过修改encode配置，我们可以轻松将同一组数据映射到柱状图、折线图或散点图，而无需修改原始数据。

二、3步实现数据可视化转换

第1步：准备原始数据

首先，我们需要整理原始数据。以销售数据为例，假设我们有以下Excel表格数据：

年份	销量	利润	增长率
2021	1500	450	12%
2022	2100	630	15%
2023	3200	960	18%

我们可以直接将其转换为ECharts支持的二维数组格式：

var salesData = [
  ['年份', '销量', '利润', '增长率'],
  ['2021', 1500, 450, 0.12],
  ['2022', 2100, 630, 0.15],
  ['2023', 3200, 960, 0.18]
];

第2步：配置数据集和数据映射

接下来，我们需要在ECharts配置中定义数据集，并通过encode属性将数据映射到图表的x轴、y轴和视觉通道（如颜色、大小）。

option = {
  dataset: {
    source: salesData  // 引用原始数据
  },
  xAxis: { type: 'category' },  // 分类轴，自动使用第一列数据
  yAxis: {},  // 数值轴，自动适应数据范围
  
  // 系列配置：柱状图展示销量
  series: [
    {
      type: 'bar',
      name: '销量',
      encode: {
        x: '年份',  // x轴使用"年份"列
        y: '销量'   // y轴使用"销量"列
      },
      label: { show: true, position: 'top' }  // 显示数据标签
    },
    {
      type: 'line',
      name: '利润',
      encode: {
        x: '年份',
        y: '利润'
      },
      yAxisIndex: 1  // 使用右侧第二个y轴
    }
  ],
  
  // 添加第二个y轴（右侧）
  yAxis: [
    { name: '销量（台）' },
    { name: '利润（万元）', position: 'right', offset: 0 }
  ]
};

第3步：渲染图表并添加交互效果

最后，我们创建ECharts实例，设置配置项，并添加一些交互效果，如数据区域缩放、工具箱等。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入ECharts（使用国内CDN） -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 图表容器 -->
  <div id="salesChart" style="width: 800px; height: 400px;"></div>

  <script>
    // 初始化图表实例
    var chart = echarts.init(document.getElementById('salesChart'));
    
    // 设置配置项并渲染
    chart.setOption(option);
    
    // 添加窗口大小变化时的自适应
    window.addEventListener('resize', function() {
      chart.resize();
    });
  </script>
</body>
</html>

通过以上3步，我们就完成了从原始Excel数据到交互式图表的转换。这个图表包含了柱状图（销量）和折线图（利润），并支持鼠标悬停查看详情、窗口大小自适应等交互功能。

三、高级技巧：数据过滤与聚合

ECharts数据集还支持数据的过滤、排序和聚合操作，无需手动处理数据。例如，我们可以只显示销量大于2000的数据：

dataset: {
  source: salesData,
  transform: {
    type: 'filter',
    config: { dimension: '销量', gt: 2000 }  // 过滤销量>2000的数据
  }
}

或者对数据进行排序：

transform: {
  type: 'sort',
  config: { dimension: '销量', order: 'desc' }  // 按销量降序排列
}

这些转换操作可以链式组合，实现复杂的数据处理逻辑，如先过滤再聚合：

transform: [
  { type: 'filter', config: { dimension: '年份', gte: '2022' } },
  { type: 'aggregate', config: { groupBy: '年份', sum: '销量' } }
]

四、完整案例：销售数据分析仪表盘

结合以上技巧，我们可以创建一个完整的销售数据分析仪表盘，展示多个相关图表，共享同一份数据集。

option = {
  dataset: { source: salesData },
  title: { text: '销售数据分析（2021-2023）' },
  
  // 网格布局：2行2列
  grid: [
    { left: '10%', top: '15%', width: '35%', height: '30%' },
    { right: '10%', top: '15%', width: '35%', height: '30%' },
    { left: '10%', bottom: '15%', width: '35%', height: '30%' },
    { right: '10%', bottom: '15%', width: '35%', height: '30%' }
  ],
  
  // 四个图表共用x轴和y轴
  xAxis: [
    { gridIndex: 0, type: 'category' },
    { gridIndex: 1, type: 'category' },
    { gridIndex: 2, type: 'category' },
    { gridIndex: 3, type: 'category' }
  ],
  yAxis: [
    { gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }, { gridIndex: 3 }
  ],
  
  // 四个系列：柱状图、折线图、饼图、散点图
  series: [
    { type: 'bar', gridIndex: 0, encode: { x: 0, y: 1 } },
    { type: 'line', gridIndex: 1, encode: { x: 0, y: 2 } },
    { type: 'pie', gridIndex: 2, encode: { itemName: 0, value: 1 }, center: ['50%', '50%'], radius: '60%' },
    { type: 'scatter', gridIndex: 3, encode: { x: 1, y: 2, tooltip: [0, 1, 2] } }
  ],
  
  // 添加图例和工具箱
  legend: { bottom: 0 },
  toolbox: {
    feature: {
      saveAsImage: {},  // 保存为图片
      dataView: {}     // 查看原始数据
    }
  }
};

五、总结与进阶学习

通过ECharts的数据集功能，我们可以轻松实现从原始数据到可视化图表的转换，主要优势包括：

数据与图表分离：一份数据可用于多个图表，修改数据无需改动图表配置
简化数据处理：内置过滤、排序、聚合等数据转换功能
提升开发效率：减少重复代码，便于维护和更新
增强交互体验：支持联动高亮、数据视图等高级交互

要深入学习ECharts数据转换，建议参考以下资源：

官方文档：ECharts Dataset
示例代码：test/dataset-case.html
主题样式：theme/目录下提供了多种预设图表主题

掌握这些技巧后，你可以将Excel表格、CSV文件或API接口返回的JSON数据快速转换为专业的可视化图表，为数据分析和决策提供有力支持。

点赞收藏本文，关注后续ECharts高级可视化技巧分享！下期我们将介绍如何用ECharts实现动态数据更新和实时监控仪表盘。

【免费下载链接】echarts Apache ECharts is a powerful, interactive charting and data visualization library for browser 项目地址: https://gitcode.com/gh_mirrors/echarts16/echarts

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考