在数据驱动的时代，如何有效地展示和传达数据信息变得至关重要。数据可视化是将复杂数据转化为直观图形的过程，而 ECharts 正是这一领域中的佼佼者。本文将带你认识 ECharts，并展示如何通过简单的步骤创建出丰富多样的交互式图表。

引入 ECharts 库 (使用 CDN)

为了让下面的示例能够直接在浏览器中运行，我们在页面中首先引入 ECharts 的库文件。这里我们使用 CDN 的方式：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

(请注意：上面的 CDN 链接指向一个特定版本，你可以在 ECharts 官网找到最新的或更合适的版本链接。)

什么是 ECharts？

ECharts (Enterprise Charts) 是一个由百度前端技术团队开发的、基于 JavaScript 的开源可视化库。现在是 Apache 软件基金会的顶级项目 (Apache ECharts)。它凭借其强大的功能、丰富的图表类型、灵活的配置项以及优秀的交互体验，在国内外获得了广泛的应用。

主要特点：

  1. 丰富的图表类型： 支持常见的折线图、柱状图、饼图、散点图，还有 K 线图、地图、热力图、关系图、树图、仪表盘、3D 图表等等，几乎涵盖了所有常见的数据可视化需求。
  2. 强大的交互性： 内置了如图例切换、数据视图、区域缩放 (dataZoom)、提示框 (tooltip)、值域漫游 (visualMap) 等交互组件，用户可以轻松地与图表进行互动，深入探索数据。
  3. 高度可定制： 提供了极其丰富的配置项，允许开发者对图表的样式、布局、动画、事件等进行精细控制，满足个性化的视觉需求。
  4. 跨平台兼容： 基于 Canvas 技术（也支持 SVG 渲染），能够流畅地运行在主流 PC 和移动设备浏览器上。
  5. 大数据量渲染优化： 对大数据量的渲染进行了优化，能够处理千万级的数据并保持流畅。
  6. 活跃的社区与文档： 拥有完善的官方文档、示例和活跃的社区，遇到问题时容易找到解决方案。

如何开始使用 ECharts？

使用 ECharts 创建图表通常遵循以下三个基本步骤：

  1. 准备一个具备高宽的 DOM 容器： 在 HTML 中创建一个 <div> 元素，并为其指定一个唯一的 id 以及明确的宽度和高度。ECharts 图表将在这个容器中绘制。
  2. 初始化 ECharts 实例： 通过 echarts.init() 方法，传入 DOM 容器的引用，创建一个 ECharts 实例。
  3. 设置配置项 (Option) 并渲染图表： 定义一个 JavaScript 对象（通常称为 option），这个对象描述了图表的各种配置（如标题、数据、坐标轴、图例等）。然后调用 ECharts 实例的 setOption() 方法，将配置项应用到图表上，ECharts 会根据配置自动绘制图表。

核心概念：option 配置项

option 是 ECharts 的灵魂，几乎所有的图表定制都是通过配置这个对象来完成的。它包含了很多一级和二级属性，一些最常用的包括：

  • title: 图表标题组件，包含主标题和副标题。
  • tooltip: 提示框组件，鼠标悬浮或点击时显示数据信息。
  • legend: 图例组件，用于筛选系列（Series）。
  • grid: 直角坐标系内绘图网格，用于布局。
  • xAxis: 直角坐标系的 X 轴。
  • yAxis: 直角坐标系的 Y 轴。
  • series: 核心部分，系列列表。每个系列通过 type 决定自己的图表类型（如 bar、line、pie），并通过 data 设置系列数据。一个图表中可以包含多个 series。
  • toolbox: 工具栏组件，提供导出图片、数据视图、动态类型切换、数据区域缩放等功能。
  • dataZoom: 数据区域缩放组件，用于大数据量的展示。
  • visualMap: 视觉映射组件，用于指定数据映射到视觉元素（颜色、大小等）。

基础示例：绘制一个简单的柱状图

下面我们来创建一个基础的柱状图，展示几种水果的销量。

HTML 结构:

<!-- 1. 准备一个 DOM 容器 -->
<div id="barChart" style="width: 100%; height: 400px;"></div>

JavaScript 代码:

<script>
  // 2. 基于准备好的 DOM，初始化 ECharts 实例
  var myBarChart = echarts.init(document.getElementById('barChart'));

  // 3. 指定图表的配置项和数据
  var barOption = {
    // 标题
    title: {
      text: '水果销量统计'
    },
    // 提示框
    tooltip: {},
    // 图例
    legend: {
      data:['销量']
    },
    // X 轴
    xAxis: {
      data: ["苹果", "香蕉", "橘子", "葡萄", "西瓜", "芒果"]
    },
    // Y 轴
    yAxis: {},
    // 系列列表
    series: [{
      name: '销量', // 系列名称，需与 legend 对应
      type: 'bar',  // 图表类型：柱状图
      data: [50, 200, 360, 100, 150, 280] // 系列数据
    }]
  };

  // 4. 使用刚指定的配置项和数据显示图表
  myBarChart.setOption(barOption);

  // 让图表自适应窗口大小变化
  window.addEventListener('resize', function() {
    myBarChart.resize();
  });
</script>

(运行效果： 上面的 HTML 和 JavaScript 代码结合在一起，并且引入了 ECharts 库后，你将在页面上看到一个动态的柱状图。鼠标悬浮在柱子上会显示具体数值。)

进阶示例：绘制包含多系列的折线图

接下来，我们创建一个稍微复杂点的折线图，展示两种产品在几个月内的销售趋势。

HTML 结构:

<!-- 准备另一个 DOM 容器 -->
<div id="lineChart" style="width: 100%; height: 400px;"></div>

JavaScript 代码:

<script>
  var myLineChart = echarts.init(document.getElementById('lineChart'));

  var lineOption = {
    title: {
      text: '产品月度销售趋势'
    },
    tooltip: {
      trigger: 'axis' // 触发类型：坐标轴触发
    },
    legend: {
      data: ['产品A', '产品B'] // 图例数据，对应 series 的 name
    },
    grid: { // 控制图表主体位置
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true // 防止标签溢出
    },
    toolbox: { // 工具栏
      feature: {
        saveAsImage: {} // 提供下载功能
      }
    },
    xAxis: {
      type: 'category', // 类目轴
      boundaryGap: false, // 数据点是否在刻度中间
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
      type: 'value' // 数值轴
    },
    series: [
      {
        name: '产品A',
        type: 'line',
        stack: '总量', // 可选：用于堆叠，这里只是演示，可以去掉
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '产品B',
        type: 'line',
        stack: '总量', // 可选：用于堆叠
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };

  myLineChart.setOption(lineOption);

  // 自适应
  window.addEventListener('resize', function() {
    myLineChart.resize();
  });
</script>

(运行效果： 你会看到一个包含两条折线的图表，代表两种产品的销售趋势。鼠标悬浮在图表上，会出现辅助线和显示该月份两种产品具体销售额的提示框。右上角还有工具栏按钮。点击图例可以隐藏或显示对应的产品线。)

其他常见图表：饼图示例

饼图常用于展示各部分占整体的比例。

HTML 结构:

<!-- 准备饼图的 DOM 容器 -->
<div id="pieChart" style="width: 100%; height: 400px;"></div>

JavaScript 代码:

<script>
  var myPieChart = echarts.init(document.getElementById('pieChart'));

  var pieOption = {
    title: {
      text: '用户访问来源',
      subtext: '模拟数据',
      left: 'center'
    },
    tooltip: {
      trigger: 'item', // 触发类型：数据项触发
      formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式器
    },
    legend: {
      orient: 'vertical', // 图例垂直布局
      left: 'left', // 图例靠左
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
      {
        name: '访问来源', // 系列名称
        type: 'pie',     // 图表类型：饼图
        radius: '50%',   // 饼图半径
        center: ['50%', '60%'], // 饼图中心坐标
        data: [             // 系列数据，格式为 {value: 值, name: 名称}
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: { // 高亮状态下的样式
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myPieChart.setOption(pieOption);

  // 自适应
  window.addEventListener('resize', function() {
    myPieChart.resize();
  });
</script>

(运行效果： 页面上将显示一个饼图，展示了不同访问来源的占比。鼠标悬浮在某个扇区上会高亮显示，并弹出提示框显示详细信息（名称、数值、百分比）。点击左侧的图例项可以隐藏或显示对应的扇区。)

更多探索

ECharts 的功能远不止于此。你还可以探索：

  • 异步数据加载： 从服务器获取数据并动态更新图表。
  • 事件处理： 监听图表的点击、鼠标悬浮等事件，实现更复杂的交互逻辑。
  • 自定义主题： 创建符合自己网站风格的图表主题。
  • 使用 ECharts GL 实现 3D 可视化。
  • 结合地图数据进行地理空间可视化。
  • 使用 graphic 组件绘制自定义图形元素。

总结

Apache ECharts 是一个功能极其强大且易于上手的 JavaScript 数据可视化库。通过简单的三步（准备容器、初始化实例、设置配置项），就可以创建出丰富多样、交互性强的图表。其详尽的文档和丰富的示例使得学习曲线相对平缓。无论你是数据分析师、前端开发者还是产品经理，掌握 ECharts 都将为你的数据展示工作增添巨大的价值。

推荐资源：