4、ECharts 基础：ECharts 5 核心概念、柱状图/折线图/饼图快速上手、图表配置项详解

好，咱们进入正题。这一章是 ECharts 的入门实战。

说实话，ECharts 是我在可视化项目里用得最多的库。没有之一。它上手快、文档全、社区活跃。你想想看，一个图表库能火这么多年，肯定有它的道理。

我个人习惯把 ECharts 的学习分成三步：理解核心概念 → 快速上手三种基础图表 → 吃透配置项。咱们一步步来。

4.1 ECharts 5 的核心概念

先搞清楚几个关键概念。不然你后面写配置项会懵。

• 实例（Instance）：通过 echarts.init() 创建。一个 DOM 容器对应一个实例。
• 选项（Option）：核心中的核心。图表长什么样，全看 option 怎么写。
• 系列（Series）：一组数据及其展示方式的集合。柱状图、折线图、饼图，每个都是一个 series。
• 组件（Component）：标题、图例、坐标轴、提示框……这些都是组件。
• 坐标系（Coordinate System）：最常见的是直角坐标系（xAxis + yAxis）和极坐标系。

我在项目中遇到过一个问题：同一个容器反复调用 setOption，结果图表越来越卡。后来发现，每次 setOption 都会合并配置项，而不是替换。如果你要完全重置，记得加第二个参数 true：myChart.setOption(option, true)。

4.2 柱状图：快速上手

柱状图是最直观的图表。说白了，就是比大小。

先看一个最简单的例子：

// 1. 准备容器
<div id="main" style="width: 600px; height: 400px;"></div>

// 2. 初始化
const myChart = echarts.init(document.getElementById('main'));

// 3. 写 option
const option = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70]
    }
  ]
};

// 4. 渲染
myChart.setOption(option);

嗯，这里要注意：xAxis 的 type 是 'category'，yAxis 的 type 是 'value'。这是最标准的搭配。如果你把 xAxis 写成 'value'，数据会乱掉。

我曾经在项目里犯过这个错——数据死活显示不对，排查了半天，结果就是 type 写反了。你想想看，多冤枉。

4.3 折线图：快速上手

折线图适合展示趋势。代码和柱状图几乎一样，只是把 type: 'bar' 改成 type: 'line'。

const option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [820, 932, 901, 934, 1290],
      smooth: true  // 平滑曲线，我个人习惯加上
    }
  ]
};

这里有个小技巧：加上 smooth: true，折线会变成平滑曲线，视觉上更舒服。但要注意，如果数据点很少（比如只有两三个），平滑效果反而会失真。我建议数据点超过 5 个再用。

4.4 饼图：快速上手

饼图展示占比。核心配置和柱状图、折线图不太一样——它不需要坐标轴。

const option = {
  series: [
    {
      type: 'pie',
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' }
      ],
      radius: '50%'  // 饼图半径
    }
  ]
};

饼图的 data 是对象数组，每个对象必须有 value 和 name。少了 name，图例和提示框都会出问题。

我记得有一次，后端返回的数据里 name 字段叫 label，结果饼图死活不显示图例。排查了半天，才发现是字段名对不上。所以，前后端约定字段名很重要。

4.5 图表配置项详解

配置项是 ECharts 的灵魂。你掌握了配置项，就等于掌握了 ECharts。

我把它分成几大类：

类别	常用配置项	说明
标题	title.text	图表标题，支持富文本
图例	legend.data	系列名称列表，可控制显示/隐藏
提示框	tooltip	鼠标悬停时显示数据详情
工具栏	toolbox	提供保存图片、数据视图等功能
坐标轴	xAxis / yAxis	控制轴线的样式、刻度、标签
系列	series	核心，控制图表类型、数据、样式

咱们挑几个重点说说。

4.5.1 tooltip：提示框

提示框是用户交互的第一触点。我建议你至少配置 trigger 和 formatter。

tooltip: {
  trigger: 'axis',  // 'axis' 适合柱状图/折线图，'item' 适合饼图
  formatter: function(params) {
    return params[0].name + '<br/>' +
           '销量：' + params[0].value + ' 件';
  }
}

为什么用 trigger: 'axis'？因为鼠标靠近坐标轴时，会显示该轴上的所有数据。而 trigger: 'item' 只显示当前悬停的那一项。我个人习惯柱状图和折线图用 'axis'，饼图用 'item'。

4.5.2 toolbox：工具栏

这个功能很实用。用户可以直接保存图表为图片。

toolbox: {
  feature: {
    saveAsImage: {},  // 保存为图片
    dataView: {},     // 查看数据
    restore: {}       // 重置图表
  }
}

我在给客户做演示时，经常用 saveAsImage 功能。客户说「这个图不错，发我一份」，我直接让他点一下按钮就保存了。省事。

4.5.3 颜色与样式

ECharts 默认有一套颜色，但说实话，不太好看。我建议你自定义。

// 全局颜色
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],

// 或者单独设置每个系列
series: [
  {
    type: 'bar',
    itemStyle: {
      color: '#5470c6',
      borderRadius: [5, 5, 0, 0]  // 圆角柱状图
    }
  }
]

圆角柱状图是最近比较流行的风格。加上 borderRadius 后，柱子顶部是圆角，看起来更现代。但要注意，圆角不能太大，否则柱子会变成胶囊形状，反而不好看。

4.6 实战小技巧

最后分享几个我在项目中积累的经验：

• 先写数据，再调样式：先把数据展示出来，确保数据正确，再慢慢调颜色、字体、间距。不要一上来就调样式，容易浪费时间。
• 善用 notMerge：如果你要完全替换 option，记得加 true。否则旧配置会和新配置合并，产生意想不到的效果。
• 响应式适配：大屏项目里，图表容器大小会变化。监听 window.resize 事件，调用 myChart.resize()。

window.addEventListener('resize', function() {
  myChart.resize();
});

嗯，这一章的内容就到这里。你掌握了 ECharts 的核心概念、三种基础图表的写法，以及常用配置项。下一章，咱们会把这些知识用到一个真实的大屏项目里。到时候你会发现，这些基础有多重要。

公众号:蓝海资料掘金营，微信deep3321