常用图表类型

🎯 引言

option 的结构已经清楚了，接下来解决“用什么图展示数据”的问题。学会这篇文章，你能掌握折线图、柱状图、饼图、散点图这四大常用图表的配置要点，并知道什么场景该选哪种图。

🧱 折线图：看趋势

折线图（type: 'line'）适合展示数据随时间变化的趋势，比如一周访问量、每月气温：

series: [
    {
        name: '访问量',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
],

两个高频属性：

• smooth: true：折线变平滑曲线，视觉上更柔和。
• areaStyle: {}：给折线下方填充颜色，变成面积图，突出总量感。

series: [
    {
        name: '访问量',
        type: 'line',
        smooth: true,
        areaStyle: {},
        data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
],

平滑曲线加面积填充的真实渲染效果：

🧱 柱状图：比大小

柱状图（type: 'bar'）适合不同分类之间的数值对比：

series: [
    {
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70],
    },
],

常用属性 barWidth 控制柱子宽度，可以写百分比：

series: [
    {
        name: '销量',
        type: 'bar',
        barWidth: '40%',
        data: [120, 200, 150, 80, 70],
    },
],

🧱 饼图：看占比

饼图（type: 'pie'）展示部分占整体的比例，比如流量来源分布。它和前两种图有个重要区别：不需要坐标轴，数据格式也不一样，每项是 { name, value } 对象：

series: [
    {
        name: '流量来源',
        type: 'pie',
        radius: '50%',
        data: [
            { name: '搜索引擎', value: 1048 },
            { name: '直接访问', value: 735 },
            { name: '邮件营销', value: 580 },
        ],
    },
],

• radius 控制半径，写百分比表示相对容器大小。
• 把 radius 写成数组 ['40%', '70%']，中间镂空，秒变环形图。

这段饼图代码的真实渲染效果：

🧱 散点图：看分布

散点图（type: 'scatter'）用来观察两个数值变量之间的关系，比如身高和体重的分布。它的数据是二维数组，每项是 [x, y]：

series: [
    {
        name: '用户',
        type: 'scatter',
        data: [
            [168, 60],
            [175, 72],
            [160, 50],
            [180, 85],
        ],
    },
],

此时 xAxis 和 yAxis 都要设成 type: 'value'，因为两个方向都是数值。

真实渲染效果如下，两个方向都是数值轴：

💡 四种图表怎么选

🧾 小节总结

• 折线图看趋势，smooth 平滑、areaStyle 变面积图。
• 柱状图比大小，barWidth 控制柱宽。
• 饼图看占比，无需坐标轴，数据是 { name, value }，双层 radius 变环形图。
• 散点图看两个数值变量的分布，数据是 [x, y] 二维数组。
• 选型口诀：趋势用折线、对比用柱状、占比用饼图、分布用散点。

❓ 知识问答

Q1：折线图和柱状图可以放在同一个图表里吗？

可以。series 数组里一项写 'line'、一项写 'bar' 即可，这就是常见的混合图表。

Q2：饼图为什么不写 xAxis 和 yAxis？

饼图不属于直角坐标系，它是围绕圆心布局的，坐标轴配置对它无效。

Q3：环形图是一种新的图表类型吗？

不是。它就是 radius 设成内外两个值的饼图，例如 ['40%', '70%']。

Q4：散点图点太多看不清怎么办？

可以把 symbolSize 调小，ECharts 6 还支持通过 jitter 参数把重叠的点打散。初学阶段先掌握基础用法即可。

🧪 小练习

把下面的“流量来源”数据画成一个环形图：

1. 类型用 'pie'，radius 设为 ['40%', '70%']。
2. 数据：搜索引擎 1048、直接访问 735、邮件营销 580。
3. 加上 tooltip（用 'item' 触发）和 legend。

chart.setOption({
    // 请在这里编写代码
});

🎉 恭喜你已经掌握四大常用图表！下一篇我们学习样式定制与主题，让图表从“能看”变成“好看”。