ECharts 教程 | 语法速查表

入门

安装与第一个图表

ECharts 在带有明确宽高的 DOM 元素上初始化。setOption 配置整个图表。Apache ECharts（原百度 ECharts）是最强大的 JavaScript 图表库之一。

echarts

<!-- include ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<div id="chart" style="width: 600px; height: 400px;"></div>

<script>
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  title: { text: 'Sales' },
  xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: {},
  series: [{
    type: 'bar',
    data: [100, 200, 150, 300]
  }]
});
</script>

主题与渲染器初始化

init 接收 (dom, theme, opts) 参数。'svg' 渲染器在任何缩放级别都更清晰，且对简单图表生成更小的 DOM，而 'canvas' 对大数据集更快。devicePixelRatio 控制 retina 屏幕的清晰度。移除图表时务必调用 dispose() 释放内存。

echarts

// register a theme (defined elsewhere or imported)
echarts.registerTheme('myTheme', {
  color: ['#5470c6', '#91cc75'],
  backgroundColor: '#f5f5f5'
});

// renderer: 'canvas' (default, faster) or 'svg' (sharper, lighter)
const chart = echarts.init(document.getElementById('chart'), 'myTheme', {
  renderer: 'svg',
  devicePixelRatio: 2,
  width: 800,
  height: 600,
  locale: 'EN'
});

// detached from DOM later
chart.dispose();

响应式缩放

ECharts 不会在容器变化时自动缩放——必须调用 chart.resize()。ResizeObserver 是监听容器尺寸的现代方式（比 window resize 更适合布局驱动的变化）。在 SPA 中务必在卸载时 dispose() 以防止内存泄漏。

echarts

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({ /* ... */ });

// resize when window changes
window.addEventListener('resize', () => chart.resize());

// or observe the container
const ro = new ResizeObserver(() => chart.resize());
ro.observe(document.getElementById('chart'));

// resize with explicit size
chart.resize({ width: 500, height: 300, silent: false });

// cleanup
window.addEventListener('unload', () => chart.dispose());

setOption 合并模式

默认情况下 setOption 深度合并新选项到已有选项中，因此可以更新单个部分。notMerge: true 替换整个选项（在 series 数量变化时有用）。replaceMerge 针对特定组件类型（series、xAxis）进行部分替换。lazyUpdate 将多次 setOption 调用批处理为一次渲染。

echarts

const chart = echarts.init(document.getElementById('chart'));

// merge (default): deep-merges with existing option
chart.setOption({ xAxis: { data: ['A', 'B'] } });

// notMerge: replace entire option (old config discarded)
chart.setOption({ xAxis: { data: ['X', 'Y'] } }, { notMerge: true });

// replaceMerge: replace specific component types only
chart.setOption(
  { series: [{ type: 'bar', data: [5, 6] }] },
  { replaceMerge: ['series'] }
);

// lazyUpdate: batch updates, apply on next frame
chart.setOption({ series: [{ data: [1, 2] }] }, { lazyUpdate: true });

生命周期：getInstanceByDom 与 dispose

在已有图表的 DOM 上调用 init 会抛错。用 getInstanceByDom 检查。dispose() 释放内存并移除图表，DOM 元素保留。属性 _echarts_instance_ 标记图表容器——查询它可以找到并清理散落的图表。务必在框架卸载钩子中 dispose。

echarts

function mountChart(dom) {
  // avoid double-init on the same DOM node
  const existing = echarts.getInstanceByDom(dom);
  if (existing) return existing;

  const chart = echarts.init(dom);
  chart.setOption({ /* ... */ });
  return chart;
}

// in a framework cleanup (React useEffect / Vue onUnmounted):
function unmount(dom) {
  const chart = echarts.getInstanceByDom(dom);
  if (chart) chart.dispose();  // free memory + remove DOM
}

// dispose all charts on a page
echarts.disposeAll?.();  // not built-in; iterate manually
Array.from(document.querySelectorAll('[_echarts_instance_]'))
  .forEach(dom => echarts.dispose(dom));

柱状图

基础柱状图

柱状图需要 category xAxis 和 value yAxis。每个 series.data 值映射到一个类别。itemStyle 控制柱子外观。垂直柱状图的类别轴是 x 轴；水平柱状图则交换 x 和 y 轴类型。

echarts

chart.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70],
    itemStyle: { color: '#5470c6' }
  }]
});

分组与堆叠柱状图

同一 xAxis 上的多个柱状图 series 默认分组并排显示。要堆叠它们，给每个 series 相同的 stack 名称。堆叠按类别累加值。在所有应堆叠的 series 上使用 stack: 'total'——没有 stack 名称的 series 仍然分组。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value' },
  // GROUPED: multiple series render side by side
  series: [
    { type: 'bar', name: 'A', data: [10, 20, 30, 40] },
    { type: 'bar', name: 'B', data: [15, 25, 35, 45] }
  ]
});

// STACKED: add stack with same name to each series
chart.setOption({
  series: [
    { type: 'bar', name: 'A', stack: 'total', data: [10, 20, 30, 40] },
    { type: 'bar', name: 'B', stack: 'total', data: [15, 25, 35, 45] }
  ]
});

水平柱状图

水平柱状图就是类别轴在 yAxis、值轴在 xAxis 的柱状图。position: 'right' 的标签放在柱子末端。水平柱状图更适合长类别名称或比较多个类别——避免了旋转标签。

echarts

chart.setOption({
  // swap: category axis becomes yAxis
  yAxis: {
    type: 'category',
    data: ['Apple', 'Banana', 'Cherry', 'Date']
  },
  xAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80],
    label: {
      show: true,
      position: 'right'  // label at end of bar
    }
  }]
});

带背景与圆角的柱状图

showBackground 在每个柱子后面绘制轨道（进度条样式）。itemStyle.borderRadius 圆角柱子角——垂直柱子传 [左上, 右上, 右下, 左下]；水平柱子顺序相反。borderRadius 可以是数字（所有角）或数组。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [50, 80, 60, 90],
    showBackground: true,
    backgroundStyle: {
      color: 'rgba(180, 180, 180, 0.2)',
      borderRadius: [4, 4, 0, 0]
    },
    itemStyle: {
      borderRadius: [8, 8, 0, 0]  // round top corners
    }
  }]
});

动态柱状图赛跑

柱状图赛跑通过动画展示重新排序。排序数据数组，然后更新 yAxis 类别和 series 数据。animationDurationUpdate 控制过渡平滑度。yAxis.inverse: true 将最大值放在顶部。这在动画数据故事中很流行。

echarts

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 }
];

chart.setOption({
  xAxis: { type: 'value', max: 100 },
  yAxis: { type: 'category', inverse: true },
  series: [{
    type: 'bar',
    data: data.map(d => ({ value: d.value, name: d.name })),
    label: { show: true, position: 'right' },
    // sort bars by value on each update
    animationDuration: 500,
    animationDurationUpdate: 500
  }]
});

// update data on interval
setInterval(() => {
  data.forEach(d => d.value += Math.random() * 10);
  data.sort((a, b) => b.value - a.value);
  chart.setOption({
    yAxis: { data: data.map(d => d.name) },
    series: [{ data: data.map(d => d.value) }]
  });
}, 1000);

柱宽与间距

barWidth 接受像素或类别带的百分比。barGap 是同一组内柱子之间的间距（只在多 series 时有意义）。barCategoryGap 是组之间的间距。百分比相对于类别带，因此在缩放时保持比例。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [50, 80, 60, 90],
    barWidth: '40%',          // width of each bar
    barGap: '20%',            // gap between bars in same group
    barCategoryGap: '40%',    // gap between category groups
    // fixed pixel width also works:
    // barWidth: 30
  }]
});

折线图

基础折线图

折线图使用 type: 'line'。默认显示 symbol 标记点；设置 symbol: 'none' 隐藏它们。线按数据顺序连接点。对于时间序列，在 xAxis 上使用 type: 'time' 配合 [时间戳, 值] 对。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70],
    symbol: 'circle',      // point marker
    symbolSize: 8
  }]
});

平滑线与面积图

smooth: true 使线条弯曲（Catmull-Rom 插值）。areaStyle 填充线下区域；渐变（线性色标）给出渐隐效果。类别轴上的 boundaryGap: false 使线从 y 轴边缘开始而不是留间隙。

echarts

chart.setOption({
  xAxis: { type: 'category', boundaryGap: false, data: ['Mon','Tue','Wed','Thu','Fri'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70],
    smooth: true,           // curved line
    areaStyle: {            // fill under line
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(84,112,198,0.5)' },
          { offset: 1, color: 'rgba(84,112,198,0.05)' }
        ]
      }
    }
  }]
});

多系列折线图

多个 series 渲染为不同的线，通过颜色区分。图例可切换可见性。lineStyle.type 接受 'solid'、'dashed'、'dotted'。每个 series 可以有自己的样式。图例中的名称必须与 series.name 匹配。

echarts

chart.setOption({
  legend: { data: ['Email', 'Search'] },
  xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri'] },
  yAxis: { type: 'value' },
  series: [
    {
      type: 'line',
      name: 'Email',
      data: [120, 132, 101, 134, 90],
      lineStyle: { width: 3, type: 'solid' }
    },
    {
      type: 'line',
      name: 'Search',
      data: [220, 182, 191, 234, 290],
      lineStyle: { width: 2, type: 'dashed' }
    }
  ]
});

堆叠面积图

堆叠面积图使用 type: 'line' 配合相同的 stack 名称和 areaStyle。每个 series 堆叠在前一个之上。emphasis.focus: 'series' 在悬停时高亮整个 series。适用于展示随时间变化的组成（例如按来源的流量）。

echarts

chart.setOption({
  xAxis: { type: 'category', boundaryGap: false, data: ['Mon','Tue','Wed','Thu','Fri'] },
  yAxis: { type: 'value' },
  series: [
    {
      type: 'line',
      name: 'A',
      stack: 'total',
      areaStyle: {},
      data: [120, 132, 101, 134, 90],
      emphasis: { focus: 'series' }
    },
    {
      type: 'line',
      name: 'B',
      stack: 'total',
      areaStyle: {},
      data: [220, 182, 191, 234, 290]
    }
  ]
});

阶梯线图

step 将线变为阶梯形。'start' 在点之前步进，'middle'（对称）在点处，'end' 在之后。阶梯图适合离散变化的值（库存水平、服务器状态）而非连续变化。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70],
    step: 'middle',          // 'start' | 'middle' | 'end'
    symbol: 'none',
    lineStyle: { width: 2 }
  }]
});

时间轴折线图

使用 type: 'time' 时，轴自动格式化日期并处理不规则间隔。数据点是 [时间戳, 值] 对。ECharts 按实际时间间隔点，因此数据中的间隙正确显示。这是间隔不等的时间序列的正确选择。

echarts

chart.setOption({
  xAxis: { type: 'time' },   // auto-parses timestamps
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [
      [new Date('2024-01-01').getTime(), 100],
      [new Date('2024-01-02').getTime(), 200],
      [new Date('2024-01-05').getTime(), 150],
      [new Date('2024-01-10').getTime(), 300]
    ],
    smooth: true
  }]
});

饼图

基础饼图

饼图不使用坐标轴——series.data 是 {value, name} 数组。radius 以容器较小尺寸的百分比控制饼图大小。emphasis 样式在悬停时应用。图例自动从 data.name 派生标签。

echarts

chart.setOption({
  series: [{
    type: 'pie',
    radius: '60%',          // radius of pie
    data: [
      { value: 1048, name: 'Search' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union' },
      { value: 300, name: 'Video' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0,0,0,0.5)'
      }
    }
  }]
});

环形图（圆环）

将 radius 设置为 [内半径, 外半径] 创建环形。中心标签是常见模式（显示总计或 KPI）。avoidLabelOverlap: false 保持标签在原位。内半径控制环的厚度——[50%, 70%] 是薄环；[0%, 70%] 是完整饼图。

echarts

chart.setOption({
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],   // [inner, outer] = ring
    avoidLabelOverlap: false,
    label: {
      show: true,
      position: 'center',     // center label
      formatter: 'Total\n{c}'
    },
    data: [
      { value: 1048, name: 'A' },
      { value: 735, name: 'B' },
      { value: 580, name: 'C' }
    ]
  }]
});

玫瑰图（南丁格尔图）

roseType 使切片半径与值成比例（南丁格尔玫瑰）。'area' 使用 sqrt(value) 作为半径（面积比例），'radius' 直接使用值。每个切片角度相同但半径不同。适合角度难以判断的量级比较。

echarts

chart.setOption({
  series: [{
    type: 'pie',
    radius: ['10%', '70%'],
    roseType: 'area',         // or 'radius'
    data: [
      { value: 40, name: 'A' },
      { value: 38, name: 'B' },
      { value: 32, name: 'C' },
      { value: 30, name: 'D' },
      { value: 28, name: 'E' }
    ],
    label: { show: true }
  }]
});

自定义标签饼图

label.formatter 支持模板变量：{a}（系列名）、{b}（数据名）、{c}（值）、{d}（百分比）。labelLine 控制连接线。length 是靠近切片的线段，length2 是靠近标签的线段。自定义标签使饼图更易读。

echarts

chart.setOption({
  series: [{
    type: 'pie',
    radius: '60%',
    label: {
      formatter: '{b}: {d}%',   // name: percentage
      color: '#333',
      fontSize: 14
    },
    labelLine: {
      show: true,
      length: 15,              // first segment
      length2: 20,             // second segment
      smooth: true
    },
    data: [
      { value: 1048, name: 'Search' },
      { value: 735, name: 'Direct' }
    ]
  }]
});

半圆饼图

组合 startAngle 和 endAngle 创建部分饼图（半圆、四分之一、仪表盘样式）。center 定位饼图——['50%','70%'] 将其下移，使 180° 饼图位于底部。部分饼图常被用作仪表盘或风格化仪表板。

echarts

chart.setOption({
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    center: ['50%', '70%'],    // move down
    startAngle: 180,           // start at left
    endAngle: 360,             // end at right -> semicircle
    data: [
      { value: 60, name: 'A' },
      { value: 30, name: 'B' },
      { value: 10, name: 'C' }
    ]
  }]
});

散点图

基础散点图

散点图使用两个值轴；每个数据点是 [x, y]。symbolSize 控制点大小（固定或通过函数逐点设置）。散点图揭示两个变量之间的相关性。两个轴都是 type: 'value'（数值），不同于基于类别的柱状图/折线图。

echarts

chart.setOption({
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    symbolSize: 12,
    data: [
      [10, 20], [15, 25], [20, 30], [25, 35],
      [30, 40], [35, 45], [40, 50], [45, 55]
    ],
    itemStyle: { color: '#5470c6' }
  }]
});

气泡图（按值定大小）

气泡图是点大小编码第三维度的散点图。每个点传 [x, y, size]，设置 symbolSize 为返回大小的函数。函数对每个点运行，因此每个气泡独立缩放。适用于无需 3D 图表的三变量数据。

echarts

chart.setOption({
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    // each point: [x, y, size]
    data: [
      [10, 20, 30],
      [15, 25, 60],
      [20, 30, 12],
      [25, 35, 45]
    ],
    symbolSize: function (data) {
      return data[2];           // use 3rd element as size
    }
  }]
});

带 VisualMap 的散点图（按值着色）

visualMap 将数据维度映射到颜色。dimension: 2 按每个点的第三个元素（索引 2）着色。inRange.color 定义渐变。这为散点图添加第四维度（颜色）。visualMap 组件显示带滑块的图例。

echarts

chart.setOption({
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  visualMap: {
    min: 0,
    max: 100,
    dimension: 2,             // map color to 3rd element
    inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] },
    right: 10,
    top: 'center'
  },
  series: [{
    type: 'scatter',
    data: [[10,20,30], [15,25,60], [20,30,12]],
    symbolSize: 15
  }]
});

涟漪散点图（动画）

effectScatter 在每个点周围添加涟漪动画——非常适合突出关键数据点（警报、热门城市）。showEffectOn 控制涟漪何时播放。brushType: 'stroke' 更轻量；'fill' 更醒目。谨慎使用——太多涟漪会分散注意力。

echarts

chart.setOption({
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'effectScatter',    // animated ripple
    symbolSize: function (data) { return data[2]; },
    data: [[10, 20, 30], [15, 25, 60]],
    showEffectOn: 'render',   // 'render' or 'emphasis'
    rippleEffect: {
      brushType: 'stroke',    // 'stroke' or 'fill'
      period: 4,
      scale: 3
    }
  }]
});

大规模散点图

对于数千个点，启用渐进式渲染——ECharts 将数据分块并跨帧渲染以避免卡顿。large: true 使用单一优化的绘制调用。配合小 symbolSize 和 opacity 处理重叠绘制。这使 5 万+ 点保持流畅。

echarts

// for thousands of points, use progressive rendering
chart.setOption({
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: largeDataArray,    // 50k+ points
    symbolSize: 3,
    progressive: 2000,        // chunk size for progressive render
    progressiveThreshold: 5000,  // enable above this count
    large: true,              // optimize for many points
    largeThreshold: 2000,
    itemStyle: { opacity: 0.6 }
  }]
});

雷达图

基础雷达图

雷达图需要 radar.indicator 数组定义每个轴（名称和最大值）。Series 数据是匹配指标的值数组。雷达图适合比较少量项目的多个属性（玩家属性、产品对比）。max 设置每个轴的刻度。

echarts

chart.setOption({
  radar: {
    indicator: [
      { name: 'Speed', max: 100 },
      { name: 'Power', max: 100 },
      { name: 'Range', max: 100 },
      { name: 'Comfort', max: 100 },
      { name: 'Price', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [{ value: [85, 70, 90, 65, 80], name: 'Car A' }]
  }]
});

多系列雷达图

多个数据条目渲染重叠的多边形，非常适合比较。每个条目需要与图例匹配的唯一名称。太多 series（5+）使雷达图难以阅读——多边形重叠成一团。保持 2-4 个项目以保持清晰。

echarts

chart.setOption({
  legend: { data: ['Car A', 'Car B'] },
  radar: {
    indicator: [
      { name: 'Speed', max: 100 },
      { name: 'Power', max: 100 },
      { name: 'Range', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      { value: [85, 70, 90], name: 'Car A' },
      { value: [60, 95, 75], name: 'Car B' }
    ]
  }]
});

带面积的雷达图

areaStyle 用半透明颜色填充雷达多边形，使形状更易读。lineStyle 强调轮廓。保持 areaStyle 透明度较低（0.2-0.4），以便重叠的 series 保持可见。符号标记每个顶点。

echarts

chart.setOption({
  radar: {
    indicator: [
      { name: 'A', max: 100 },
      { name: 'B', max: 100 },
      { name: 'C', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [{ value: [85, 70, 90], name: 'Score' }],
    areaStyle: { opacity: 0.3 },
    lineStyle: { width: 2 },
    symbol: 'circle',
    symbolSize: 6
  }]
});

雷达图形状与坐标轴

shape: 'polygon'（默认）给出角度轴；'circle' 使环更平滑。splitNumber 控制网格密度。splitArea 交替颜色形成斑马效果。axisName 设置轴标签样式。这些选项控制图表的视觉结构而不触及数据。

echarts

chart.setOption({
  radar: {
    shape: 'polygon',          // 'polygon' or 'circle'
    radius: '65%',
    splitNumber: 5,            // grid ring count
    axisName: {
      color: '#333',
      fontSize: 12
    },
    splitLine: { lineStyle: { color: '#ccc' } },
    splitArea: {
      areaStyle: { color: ['#fafafa', '#fff'] }
    },
    indicator: [
      { name: 'Speed', max: 100 },
      { name: 'Power', max: 100 }
    ]
  },
  series: [{ type: 'radar', data: [{ value: [80, 70] }] }]
});

雷达极坐标半径

radius: [内半径, 外半径] 创建环形雷达（像甜甜圈）。center 定位图表。指标上的 min 设置轴的起点——当所有值都很高时有用（避免中心的小多边形）。调整 center 为轴标签留出空间。

echarts

chart.setOption({
  radar: {
    indicator: [
      { name: 'A', max: 100, min: 0 },   // min sets the inner bound
      { name: 'B', max: 100 },
      { name: 'C', max: 100 }
    ],
    radius: ['20%', '70%'],   // [inner, outer] for ring radar
    center: ['50%', '55%']
  },
  series: [{
    type: 'radar',
    data: [{ value: [60, 70, 80] }]
  }]
});

热力图

笛卡尔热力图

笛卡尔热力图需要 visualMap 为单元格着色。数据为 [x, y, 值]。label: { show: true } 在单元格中打印值（只适用于小网格）。calculable: true 添加滑块手柄。热力图揭示密度模式（如每小时活动）。

echarts

const hours = ['12a','1a','2a','3a','4a','5a','6a','7a','8a','9a','10a','11a'];
const days = ['Sat','Sun','Mon','Tue','Wed','Thu','Fri'];

// data: [x, y, value]
const data = [[0,0,5],[0,1,1],[1,0,8] /* ... */];

chart.setOption({
  tooltip: {},
  xAxis: { type: 'category', data: hours },
  yAxis: { type: 'category', data: days },
  visualMap: {
    min: 0, max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center', bottom: '5%'
  },
  series: [{
    type: 'heatmap',
    data: data,
    label: { show: true }
  }]
});

日历热力图

日历热力图显示一年中的每日值（GitHub 风格贡献图）。calendar.range 设置年份或日期范围。数据点是 [日期字符串, 值]。visualMap 渐变定义颜色停止点。cellSize 控制方块大小——'auto' 适应容器。

echarts

const data = [];
// generate one year of data
for (let i = 0; i < 365; i++) {
  const date = new Date(2024, 0, 1);
  date.setDate(date.getDate() + i);
  data.push([date.toISOString().slice(0,10), Math.floor(Math.random() * 100)]);
}

chart.setOption({
  tooltip: {},
  visualMap: {
    min: 0, max: 100,
    inRange: { color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'] }
  },
  calendar: {
    range: '2024',
    cellSize: ['auto', 13],
    yearLabel: { show: true }
  },
  series: [{ type: 'heatmap', data: data }]
});

热力图项样式

itemStyle.borderColor 和 borderWidth 创建网格分隔效果（白色边框使单元格分明）。borderRadius 圆角单元格角。emphasis 样式在悬停时应用。隐藏的 visualMap（show: false）仍然驱动颜色但不显示图例。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['A','B','C','D'] },
  yAxis: { type: 'category', data: ['X','Y','Z'] },
  visualMap: { min: 0, max: 100, show: false },
  series: [{
    type: 'heatmap',
    data: [[0,0,80],[0,1,30],[1,0,50]],
    itemStyle: {
      borderColor: '#fff',       // white grid lines
      borderWidth: 2,
      borderRadius: 4
    },
    emphasis: {
      itemStyle: { shadowBlur: 10 }
    }
  }]
});

打卡热力图

打卡图是 7x24 的热力图，按星期和小时显示活动。每个单元格是一个时间段。圆角 itemStyle 使其看起来像点。打卡图揭示每周模式（如服务器最忙的时候）。数据是完整的 168 格网格。

echarts

const data = [];
for (let day = 0; day < 7; day++) {
  for (let hour = 0; hour < 24; hour++) {
    data.push([hour, day, Math.floor(Math.random() * 50) + 1]);
  }
}

chart.setOption({
  xAxis: { type: 'category', data: Array.from({length:24}, (_,i) => i + 'h') },
  yAxis: { type: 'category', data: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] },
  visualMap: { max: 50, inRange: { color: ['#fff', '#5470c6'] } },
  series: [{
    type: 'heatmap',
    data: data,
    itemStyle: { borderRadius: 10, borderWidth: 2, borderColor: '#fff' }
  }]
});

地理地图上的热力图

将 geo 与 map series 结合，按值为区域着色。visualMap 驱动颜色刻度。必须先通过 echarts.registerMap('china', geoJson) 注册地图。roam: true 启用平移/缩放。这就是区域填色（按区域着色）地图的构建方式。

echarts

// requires a registered geo map (e.g. echarts.registerMap)
chart.setOption({
  geo: { map: 'china', roam: true },
  visualMap: {
    min: 0, max: 1000,
    inRange: { color: ['#e0ecf4', '#005824'] }
  },
  series: [{
    type: 'map',
    map: 'china',
    data: [
      { name: 'Beijing', value: 800 },
      { name: 'Shanghai', value: 950 }
    ]
  }]
});

树图

基础树图（垂直）

树图渲染层次数据。layout: 'orthogonal' 配合 orient: 'LR' 创建从左到右的树。expandAndCollapse 让用户点击折叠/展开子树。leaves 配置叶子节点样式。树图非常适合组织结构图、文件树和分类法。

echarts

const data = {
  name: 'Root',
  children: [
    {
      name: 'Child A',
      children: [{ name: 'A1' }, { name: 'A2' }]
    },
    {
      name: 'Child B',
      children: [{ name: 'B1' }]
    }
  ]
};

chart.setOption({
  series: [{
    type: 'tree',
    data: [data],
    top: '5%', left: '10%', bottom: '5%', right: '20%',
    layout: 'orthogonal',       // 'orthogonal' or 'radial'
    orient: 'LR',               // 'LR','RL','TB','BT'
    symbolSize: 10,
    label: { position: 'left' },
    leaves: { label: { position: 'right' } },
    expandAndCollapse: true,
    animationDuration: 550
  }]
});

水平树图

orient: 'LR' 生成水平树（根在左，叶在右）。内部节点标签位于节点左侧；叶标签在右侧——这防止与分支重叠。lineStyle 上的 curveness 创建弯曲连接器，外观更柔和。

echarts

chart.setOption({
  series: [{
    type: 'tree',
    data: [treeData],
    layout: 'orthogonal',
    orient: 'LR',              // left to right
    symbol: 'emptyCircle',
    symbolSize: 7,
    label: { position: 'left', verticalAlign: 'middle', align: 'right' },
    leaves: { label: { position: 'right', align: 'left' } },
    lineStyle: { color: '#999', width: 1, curveness: 0.5 }
  }]
});

径向树图

layout: 'radial' 将根放在中心，子节点向外辐射成圆形。这在水平布局太宽的大型树中效果很好。emphasis.focus: 'descendant' 在悬停时高亮所有后代，帮助用户追踪分支。

echarts

chart.setOption({
  series: [{
    type: 'tree',
    data: [treeData],
    layout: 'radial',          // circular layout
    symbol: 'circle',
    symbolSize: 8,
    label: {
      position: 'inside',
      rotate: 0
    },
    leaves: { label: { position: 'right' } },
    emphasis: { focus: 'descendant' },
    lineStyle: { curveness: 0.5 }
  }]
});

自定义符号树图

symbol 和 symbolSize 接受函数进行逐节点自定义。这里内部节点（有子节点）是较大的矩形，叶节点是小圆形。这在视觉上区分了层级。配合 orient: 'TB' 实现经典的自上而下组织结构图。

echarts

const treeData = {
  name: 'CEO',
  value: 'Boss',
  children: [
    { name: 'VP Engineering', children: [{ name: 'Eng Lead' }] },
    { name: 'VP Sales', children: [{ name: 'Sales Lead' }] }
  ]
};

chart.setOption({
  series: [{
    type: 'tree',
    data: [treeData],
    symbol: function (params) {
      // custom symbol per node
      return params.data.children ? 'rect' : 'circle';
    },
    symbolSize: function (params) {
      return params.data.children ? 15 : 8;
    },
    orient: 'TB',
    label: { position: 'top', distance: 8 }
  }]
});

树图展开/折叠控制

initialTreeDepth 控制初始打开多少层（null = 全部，0 = 仅根）。点击有子节点的节点切换其子树。click 事件让您对节点选择做出反应——对下钻 UI 有用。animationDurationUpdate 使展开/折叠更平滑。

echarts

chart.setOption({
  series: [{
    type: 'tree',
    data: [treeData],
    expandAndCollapse: true,
    initialTreeDepth: 2,        // expand first 2 levels
    collapse: 'collapseBtn',
    symbol: 'circle',
    animationDurationUpdate: 750
  }]
});

// programmatic control via API
chart.on('click', function (params) {
  if (params.componentType === 'series') {
    console.log('Node clicked:', params.data.name);
    console.log('Collapsed:', params.data.collapsed);
  }
});

旭日图

基础旭日图

旭日图是径向树，每个环代表一个层级。内部 = 父级，外部 = 子级。每个节点的值驱动其角度大小。radius: [0, '90%'] 创建完整圆盘；[内半径, 外半径] 创建环形旭日图。非常适合层次比例可视化。

echarts

const data = [{
  name: 'Root',
  children: [
    {
      name: 'A',
      value: 15,
      children: [{ name: 'A1', value: 5 }, { name: 'A2', value: 10 }]
    },
    {
      name: 'B',
      value: 20,
      children: [{ name: 'B1', value: 20 }]
    }
  ]
}];

chart.setOption({
  series: [{
    type: 'sunburst',
    data: data,
    radius: [0, '90%'],
    label: { rotate: 'radial' }
  }]
});

带层级的旭日图

levels 分别配置每个环——第一个条目是根，后续条目映射到更深层级。r0/r 设置该层级的内/外半径。不同的标签旋转（径向、切向、0）使各深度的文字保持可读。这提供了细粒度的样式控制。

echarts

chart.setOption({
  series: [{
    type: 'sunburst',
    data: sunburstData,
    radius: ['15%', '90%'],
    levels: [
      {},  // root level (default)
      {
        r0: '15%',
        r: '45%',
        label: { rotate: 0, fontSize: 14 },
        itemStyle: { borderWidth: 2 }
      },
      {
        r0: '45%',
        r: '70%',
        label: { rotate: 'tangential', fontSize: 12 }
      },
      {
        r0: '70%',
        r: '90%',
        label: { rotate: 'radial', fontSize: 10 }
      }
    ]
  }]
});

旭日图项样式与高亮

emphasis.focus: 'ancestor' 高亮从悬停节点回到根的路径——用户看到切片在层次结构中的位置。borderWidth 在视觉上分隔切片。旭日图是交互式的：点击通常会下钻。在深层树中使用祖先高亮以保持上下文。

echarts

chart.setOption({
  series: [{
    type: 'sunburst',
    data: data,
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1
    },
    emphasis: {
      focus: 'ancestor'    // highlight ancestors on hover
    },
    highlight: {
      itemStyle: { color: '#ffb' }
    }
  }]
});

带值与排序的旭日图

sort 控制父级内切片的顺序。nodeClick: 'zoomToNode' 使点击缩放到该子树（适合探索）。minAngle 隐藏小于 5 度的切片上的标签，避免杂乱。如果省略，父节点的值会自动从子节点求和。

echarts

chart.setOption({
  series: [{
    type: 'sunburst',
    data: [{
      name: 'Root',
      children: [
        { name: 'A', value: 30, children: [/* ... */] },
        { name: 'B', value: 70, children: [/* ... */] }
      ]
    }],
    nodeClick: 'zoomToNode',   // click to zoom into subtree
    sort: 'desc',              // or 'asc', null
    label: { minAngle: 5 }     // hide labels on tiny slices
  }]
});

旭日图下钻

自定义点击处理程序让您构建自己的下钻 UX。用点击的节点替换数据以放大。如果想要'返回'按钮，保留对父节点的引用。旭日图下钻非常适合探索深层层次结构而不让屏幕过载。

echarts

const data = [/* full tree */];
let currentRoot = data[0];

chart.setOption({
  series: [{
    type: 'sunburst',
    data: data,
    nodeClick: false
  }]
});

chart.on('click', function (params) {
  if (params.componentType === 'series' && params.data.children) {
    // manually drill down
    currentRoot = params.data;
    chart.setOption({
      series: [{ data: [currentRoot] }]
    }, { notMerge: true });
  }
});

桑基图

基础桑基图

桑基图显示节点之间的流。data 是节点（带名称）；links 是流（源、目标、值）。每个链接的宽度与值成比例。emphasis.focus: 'adjacency' 在悬停时高亮连接的节点。适合能源、资金或用户流可视化。

echarts

chart.setOption({
  series: [{
    type: 'sankey',
    data: [
      { name: 'Source A' },
      { name: 'Source B' },
      { name: 'Mid C' },
      { name: 'Sink D' }
    ],
    links: [
      { source: 'Source A', target: 'Mid C', value: 5 },
      { source: 'Source B', target: 'Mid C', value: 3 },
      { source: 'Mid C', target: 'Sink D', value: 8 }
    ],
    emphasis: { focus: 'adjacency' },
    lineStyle: { color: 'gradient', curveness: 0.5 }
  }]
});

桑基图节点层级

levels 按深度（列）设置节点样式。lineStyle.color: 'source' 使链接颜色与源节点匹配；'target' 与目标匹配；'gradient' 混合。nodeAlign 在列内垂直定位节点。显式设置 depth 强制列放置，覆盖自动布局。

echarts

chart.setOption({
  series: [{
    type: 'sankey',
    data: [
      { name: 'A', depth: 0 },
      { name: 'B', depth: 1 },
      { name: 'C', depth: 2 }
    ],
    links: [
      { source: 'A', target: 'B', value: 10 },
      { source: 'B', target: 'C', value: 10 }
    ],
    levels: [
      { depth: 0, itemStyle: { color: '#fbb' }, lineStyle: { color: 'source' } },
      { depth: 1, itemStyle: { color: '#bfb' }, lineStyle: { color: 'target' } },
      { depth: 2, itemStyle: { color: '#bbf' } }
    ],
    nodeAlign: 'justify'      // 'left','right','justify'
  }]
});

桑基图节点样式与间距

nodeWidth 设置每个节点矩形的厚度。nodeGap 控制垂直间距。较小的间距显示更多节点但可能重叠。lineStyle.opacity 使流变淡以突出节点。label.position: 'right' 将标签放在节点旁边——常用于从左到右的流。

echarts

chart.setOption({
  series: [{
    type: 'sankey',
    data: nodes,
    links: links,
    nodeWidth: 20,            // width of each node rectangle
    nodeGap: 10,              // vertical gap between nodes
    nodeAlign: 'justify',
    label: {
      fontSize: 12,
      color: '#333',
      position: 'right'
    },
    lineStyle: { opacity: 0.4 },
    itemStyle: { borderWidth: 0 }
  }]
});

带循环的桑基图（回流）

真正的循环会导致 ECharts 桑基图失败。解决方法是将循环节点拆分为单独的'入'和'出'节点（如 'Recycle'），使流无环。这在视觉上表示反馈循环。始终验证流量守恒：节点的输入总计应等于输出总计。

echarts

// Sankey normally forbids cycles, but you can show feedback loops
// by splitting a node into two (in & out) with the same name suffix
chart.setOption({
  series: [{
    type: 'sankey',
    data: [
      { name: 'Input' },
      { name: 'Process' },
      { name: 'Output' },
      { name: 'Recycle' }
    ],
    links: [
      { source: 'Input', target: 'Process', value: 100 },
      { source: 'Process', target: 'Output', value: 80 },
      { source: 'Process', target: 'Recycle', value: 20 },
      { source: 'Recycle', target: 'Process', value: 20 }
    ],
    emphasis: { focus: 'adjacency' }
  }]
});

桑基图交互

桑基图点击事件通过 dataType 区分节点和边。用此构建显示流细节的详情面板。label.formatter: '{b}: {c}' 显示名称和值。adjacency 焦点高亮通过悬停节点的完整路径，揭示因果关系链。

echarts

chart.setOption({
  series: [{
    type: 'sankey',
    data: nodes,
    links: links,
    emphasis: {
      focus: 'adjacency',
      lineStyle: { opacity: 0.8 }
    },
    label: { formatter: '{b}: {c}' },
    tooltip: { trigger: 'item' }
  }]
});

chart.on('click', function (params) {
  if (params.dataType === 'edge') {
    console.log('Flow from', params.data.source, 'to', params.data.target);
    console.log('Value:', params.data.value);
  } else if (params.dataType === 'node') {
    console.log('Node:', params.data.name);
  }
});

漏斗图

基础漏斗图

漏斗图显示每个阶段项目递减的过程。sort: 'descending'（默认）将最大阶段放在顶部。数据应按流程顺序排列。漏斗图非常适合销售管道、转化分析和引导步骤。

echarts

chart.setOption({
  series: [{
    type: 'funnel',
    data: [
      { value: 100, name: 'Visit' },
      { value: 75, name: 'Sign Up' },
      { value: 50, name: 'Trial' },
      { value: 25, name: 'Purchase' }
    ],
    sort: 'descending'      // 'descending','ascending','none'
  }]
});

漏斗图排序与间距

sort: 'ascending' 反转漏斗（最小在顶部，如增长图）。gap 分隔切片以提高可读性。funnelAlign 水平定位切片。minSize/maxSize 以百分比限制切片宽度，确保小阶段保持可见。

echarts

chart.setOption({
  series: [{
    type: 'funnel',
    data: data,
    sort: 'ascending',          // smallest at top
    gap: 4,                     // pixel gap between slices
    funnelAlign: 'center',      // 'left','center','right'
    width: '60%',
    minSize: '20%',
    maxSize: '100%'
  }]
});

漏斗图标签

position: 'inside' 在切片上叠加标签；'left'/'right' 配合连接线（labelLine）放在外面。formatter: '{b}: {c}' 显示名称和值。当切片太薄无法容纳内部文字时使用外部标签。Emphasis 在悬停时放大标签。

echarts

chart.setOption({
  series: [{
    type: 'funnel',
    data: data,
    label: {
      show: true,
      position: 'inside',      // 'inside','left','right'
      formatter: '{b}: {c}'
    },
    labelLine: {
      show: true,
      length: 20,
      lineStyle: { width: 1, type: 'solid' }
    },
    emphasis: {
      label: { fontSize: 16 }
    }
  }]
});

漏斗图项样式

逐切片 itemStyle 覆盖默认颜色循环。borderColor 在视觉上分隔切片。也可以在单个数据项上设置颜色。为了精致外观，使用顺序调色板（早期阶段较浅，转化阶段较深）以强化漏斗隐喻。

echarts

chart.setOption({
  series: [{
    type: 'funnel',
    data: [
      { value: 100, name: 'A', itemStyle: { color: '#5470c6' } },
      { value: 75, name: 'B', itemStyle: { color: '#91cc75' } },
      { value: 50, name: 'C', itemStyle: { color: '#fac858' } }
    ],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 2,
      borderRadius: 0
    }
  }]
});

对比漏斗图

多个漏斗 series 可以并排放置以进行期间比较。给每个 series 自己的 left/width 来定位。这对于 A/B 测试可视化或年度转化对比非常有用。每个 series 使用对比色以区分它们。

echarts

chart.setOption({
  series: [
    {
      type: 'funnel',
      name: '2023',
      data: [{ value: 100, name: 'A' }, { value: 40, name: 'B' }],
      sort: 'descending',
      left: '5%', width: '40%',
      label: { position: 'inside' }
    },
    {
      type: 'funnel',
      name: '2024',
      data: [{ value: 120, name: 'A' }, { value: 60, name: 'B' }],
      sort: 'descending',
      left: '55%', width: '40%',
      label: { position: 'inside' }
    }
  ]
});

仪表盘

基础仪表盘

仪表盘在弧上显示单个值。min/max 设置刻度。progress 显示到值的彩色弧（axisLine 作为轨道）。detail 在中心渲染值文本。valueAnimation 平滑过渡数字。适合 KPI 和单指标仪表板。

echarts

chart.setOption({
  series: [{
    type: 'gauge',
    min: 0,
    max: 100,
    progress: { show: true, width: 18 },
    axisLine: { lineStyle: { width: 18 } },
    detail: {
      valueAnimation: true,
      formatter: '{value}%'
    },
    data: [{ value: 70, name: 'Score' }]
  }]
});

带指针的仪表盘

指针样式是经典仪表盘外观。anchor 是中心销。负的 distance 值将刻度/标签向内推（朝向中心）。radius 缩放整个仪表盘。将指针与 splitLine 结合模仿物理仪器。当需要模拟感时有用。

echarts

chart.setOption({
  series: [{
    type: 'gauge',
    radius: '60%',
    min: 0, max: 100,
    pointer: { show: true, length: '60%', width: 5 },
    anchor: { show: true, size: 12, itemStyle: { color: '#333' } },
    axisTick: { distance: -15, length: 5 },
    splitLine: { distance: -20, length: 10 },
    axisLabel: { distance: -25 },
    data: [{ value: 42 }]
  }]
});

带色带的仪表盘

axisLine.lineStyle.color 接受 [阈值, 颜色] 对数组来创建彩色区域（如风险级别的红/黄/绿）。阈值是分数（0-1）。这是在仪表盘上显示'安全/警告/危险'范围的标准方式。指针或进度弧指示这些区域内的当前值。

echarts

chart.setOption({
  series: [{
    type: 'gauge',
    min: 0, max: 100,
    axisLine: {
      lineStyle: {
        width: 20,
        color: [
          [0.3, '#fd666d'],    // 0-30% red
          [0.7, '#37a2da'],    // 30-70% blue
          [1, '#91cc75']       // 70-100% green
        ]
      }
    },
    data: [{ value: 85 }]
  }]
});

多指针仪表盘

多个数据条目在同一仪表盘上创建多个指针。适合比较相关指标（CPU vs 内存 vs 磁盘）。每个值独立动画。保持数量少（最多 3-5 个），否则仪表盘会变得杂乱。名称显示为每个指针附近的标签。

echarts

chart.setOption({
  series: [{
    type: 'gauge',
    min: 0, max: 100,
    data: [
      { value: 60, name: 'CPU' },
      { value: 40, name: 'Memory' },
      { value: 80, name: 'Disk' }
    ],
    detail: { formatter: '{value}%' },
    title: { fontSize: 14 }
  }]
});

自定义仪表盘（圆形进度）

将 startAngle/endAngle 设置为跨 360° 创建圆形进度环（如 Apple Watch 环）。隐藏指针/刻度/标签提供简洁的极简外观。roundCap 圆角进度末端。这种风格在现代仪表板中很流行——它是伪装成环的仪表盘。

echarts

chart.setOption({
  series: [{
    type: 'gauge',
    startAngle: 90,
    endAngle: -270,            // full circle
    pointer: { show: false },
    progress: {
      show: true,
      overlap: false,
      roundCap: true,
      clip: false
    },
    axisLine: { lineStyle: { width: 20, color: [[1, 'rgba(0,0,0,0.1)']] } },
    splitLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '0%'],
      fontSize: 30,
      formatter: '{value}%'
    },
    data: [{ value: 65 }]
  }]
});

坐标系

多个 X 轴

xAxis 是数组——每个条目是单独的轴。Series 通过 xAxisIndex（从 0 开始）绑定到轴。这让一个图表显示不同刻度或单位的两个指标。使用 position 将轴放在顶部/底部。常用于股票图表（价格 + 成交量）或天气（温度 + 湿度）。

echarts

chart.setOption({
  xAxis: [
    { type: 'category', data: ['A','B','C'], position: 'bottom' },
    { type: 'category', data: ['A','B','C'], position: 'top', axisLine: { onZero: false } }
  ],
  yAxis: { type: 'value' },
  series: [
    { type: 'line', data: [10, 20, 30], xAxisIndex: 0 },
    { type: 'line', data: [50, 60, 70], xAxisIndex: 1 }
  ]
});

双 Y 轴

两个 y 轴（左右）让您绘制不同单位的 series（如 $ 收入 vs 销售单位）。每个 series 通过 yAxisIndex 绑定到轴。为右轴线着色以匹配其 series，让用户知道哪条线对应哪个轴。避免 3+ 轴——会让人困惑。

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu'] },
  yAxis: [
    { type: 'value', name: 'Sales', position: 'left' },
    { type: 'value', name: 'Orders', position: 'right', axisLine: { lineStyle: { color: '#ee6666' } } }
  ],
  series: [
    { type: 'bar', data: [200, 180, 250, 210], yAxisIndex: 0 },
    { type: 'line', data: [40, 35, 50, 42], yAxisIndex: 1, smooth: true }
  ]
});

极坐标系

极坐标使用 angleAxis（绕圆）和 radiusAxis（从中心向外）。Series 设置 coordinateSystem: 'polar'。startAngle: 90 将 0° 放在顶部（北）。极坐标适合方向数据（风玫瑰）、循环模式或玫瑰/南丁格尔变体。

echarts

chart.setOption({
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['N','NE','E','SE','S','SW','W','NW'],
    startAngle: 90
  },
  radiusAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [1, 2, 3, 4, 5, 6, 7, 8],
    coordinateSystem: 'polar'
  }]
});

日历坐标系

日历坐标系将日期映射到单元格。coordinateSystem: 'calendar' 的 series 绑定到它。cellSize 可以是像素或 'auto'。orient: 'horizontal' 是标准的周行布局。dayLabel/monthLabel 的 nameMap 本地化标签。与热力图结合用于贡献图。

echarts

chart.setOption({
  calendar: {
    range: ['2024-01-01', '2024-12-31'],
    cellSize: ['auto', 15],
    left: 50, right: 30,
    orient: 'horizontal',
    dayLabel: { nameMap: 'en' },
    monthLabel: { nameMap: 'en' },
    yearLabel: { show: false }
  },
  series: [{
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: calendarData
  }]
});

平行坐标系

平行坐标为每个维度绘制一个轴来绘制多维数据。每行数据变成一条穿过所有轴的折线。这揭示高维数据中的相关性和聚类（如跨价格、里程、年份、安全性比较汽车）。适合数据探索。

echarts

chart.setOption({
  parallelAxis: [
    { dim: 0, name: 'Price' },
    { dim: 1, name: 'Mileage' },
    { dim: 2, name: 'Year' },
    { dim: 3, name: 'Safety', type: 'category', data: ['Low','Med','High'] }
  ],
  parallel: {
    parallelAxisDefault: {
      axisLine: { lineStyle: { color: '#999' } },
      nameTextStyle: { color: '#333' }
    }
  },
  series: [{
    type: 'parallel',
    data: [[20000, 30, 2020, 'High'], [25000, 25, 2021, 'Med']]
  }]
});

地理地图设置

registerMap 将 GeoJSON 绑定到名称，供 geo 和 map series 使用。roam 启用鼠标平移/缩放。itemStyle.areaColor 填充区域；borderColor 描边。emphasis 样式在悬停时应用。geo 单独显示地图；与 map series 配对按值为区域着色（区域填色图）。

echarts

// load a map GeoJSON (must be registered before use)
fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
  .then(r => r.json())
  .then(geoJson => {
    echarts.registerMap('china', geoJson);
    chart.setOption({
      geo: {
        map: 'china',
        roam: true,                  // pan & zoom
        zoom: 1.2,
        label: { show: false },
        itemStyle: {
          areaColor: '#eee',
          borderColor: '#fff'
        },
        emphasis: {
          label: { show: true },
          itemStyle: { areaColor: '#f5f5f5' }
        }
      }
    });
  });

数据集

基础数据集

Dataset 将数据与 series 配置分离。source 是二维数组（首行为表头）。seriesLayoutBy: 'column' 使每个 series 取一列。encode 将数据集列映射到 x/y。这将数据与表现层解耦——当数据在多个图表间共享时有用。

echarts

chart.setOption({
  dataset: {
    source: [
      ['product', '2023', '2024'],
      ['Apple', 41, 56],
      ['Banana', 67, 28],
      ['Cherry', 89, 76]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', seriesLayoutBy: 'column', encode: { x: 'product', y: '2023' } },
    { type: 'bar', seriesLayoutBy: 'column', encode: { x: 'product', y: '2024' } }
  ]
});

对象行的数据集

Dataset source 可以是对象数组（键值行）。dimensions 可选地声明列（当行可能缺少键时有用）。encode 使用维度名称而不是索引，更易读。对象行更容易手工编写且更具自文档性。

echarts

chart.setOption({
  dataset: {
    dimensions: ['product', 'count', 'score'],
    source: [
      { product: 'Apple', count: 41, score: 90 },
      { product: 'Banana', count: 67, score: 75 },
      { product: 'Cherry', count: 89, score: 88 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', encode: { x: 'product', y: 'count' } },
    { type: 'bar', encode: { x: 'product', y: 'score' } }
  ]
});

数据集转换（过滤/排序）

Transforms 链式连接数据集：filter 移除行，sort 排序。每个 transform 从 fromDatasetId 读取并暴露新数据集。Series 通过 datasetId 绑定。Transforms 让您从一个源派生视图而无需复制数据。支持的转换：filter、sort，以及通过 registerTransform 的自定义转换。

echarts

chart.setOption({
  dataset: [
    {
      id: 'raw',
      source: [
        { product: 'A', sales: 100 },
        { product: 'B', sales: 50 },
        { product: 'C', sales: 200 }
      ]
    },
    {
      id: 'filtered',
      fromDatasetId: 'raw',
      transform: {
        type: 'filter',
        config: { and: [{ gte: { sales: 80 } }] }
      }
    },
    {
      id: 'sorted',
      fromDatasetId: 'filtered',
      transform: { type: 'sort', config: { order: 'desc', main: 'sales' } }
    }
  ],
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar', datasetId: 'sorted', encode: { x: 'product', y: 'sales' } }]
});

数据集编码与维度

encode 将数据集列（按索引或名称）映射到图表维度。encode.tooltip 列出在工具提示中显示的列。这里我们用列 0/1 定位，列 2 定大小，列 3 定颜色（通过 itemStyle）。编码使同一数据集可在不同图表类型间复用。

echarts

chart.setOption({
  dataset: {
    source: [
      [10, 20, 30, 'red'],
      [15, 25, 35, 'blue'],
      [20, 30, 40, 'green']
    ]
  },
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    encode: {
      x: 0,                  // first column -> x
      y: 1,                  // second column -> y
      tooltip: [0, 1, 2]     // show these in tooltip
    },
    symbolSize: function (d) { return d[2]; }
  }]
});

饼图数据集

饼图需要通过 encode 的 itemName 和 value 映射。同一数据集可以馈送柱状图（encode x:name, y:value）和具有不同编码的饼图。这是 dataset 的优势：一个源，多个视图。切换图表类型只需更改 series 类型和 encode。

echarts

chart.setOption({
  dataset: {
    source: [
      { name: 'Search', value: 1048 },
      { name: 'Direct', value: 735 },
      { name: 'Email', value: 580 }
    ]
  },
  series: [{
    type: 'pie',
    radius: '60%',
    encode: { itemName: 'name', value: 'value' }
  }]
});

视觉映射

连续型 VisualMap

连续型 visualMap 将数值范围映射到颜色（可选大小）。inRange.color 是渐变（插值）。calculable: true 添加可拖动手柄用于过滤。orient 和 left/top 定位它。visualMap 驱动 series 颜色——您无需手动设置 itemStyle.color。

echarts

chart.setOption({
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d'],
      symbolSize: [10, 50]
    },
    calculable: true,           // show slider handles
    orient: 'vertical',
    left: 'left', top: 'bottom'
  },
  series: [{
    type: 'scatter',
    data: [[10,20,30], [50,60,80], [80,90,95]]
  }]
});

分段型 VisualMap

分段型 visualMap 将值分入离散区间，每个有自己的颜色。pieces 定义区间（min/max/label/color）。当您需要分类桶（如低/中/高风险）时，这比渐变更清晰。适用于区域填色图和分类散点图。

echarts

chart.setOption({
  visualMap: {
    type: 'piecewise',
    pieces: [
      { min: 0, max: 30, label: 'Low', color: '#91cc75' },
      { min: 30, max: 70, label: 'Mid', color: '#fac858' },
      { min: 70, max: 100, label: 'High', color: '#ee6666' }
    ],
    orient: 'horizontal',
    left: 'center', bottom: 10
  },
  series: [{
    type: 'scatter',
    data: data
  }]
});

类别型 VisualMap

类别型 visualMap 将字符串类别映射到颜色。categories 列出值；inRange.color 按顺序列出匹配的颜色。dimension 选择哪个数据列驱动映射（默认 0）。当数据有要着色的分类属性（如优先级、状态）时很好用。

echarts

chart.setOption({
  visualMap: {
    type: 'piecewise',
    categories: ['Low', 'Medium', 'High'],
    inRange: { color: ['#91cc75', '#fac858', '#ee6666'] },
    dimension: 2                  // which data column to map
  },
  series: [{
    type: 'scatter',
    data: [
      [10, 20, 'Low'],
      [50, 60, 'Medium'],
      [80, 90, 'High']
    ]
  }]
});

VisualMap 范围内与范围外

outOfRange 设置 visualMap 选定范围外的数据点样式（如过滤时变灰）。controller 设置滑块本身的样式。当用户拖动滑块过滤时，范围外的点淡出到 outOfRange.color。这使 visualMap 成为交互式过滤器，而不仅仅是图例。

echarts

chart.setOption({
  visualMap: {
    min: 0, max: 100,
    inRange: { color: ['#5470c6', '#91cc75'] },
    outOfRange: { color: '#ccc', symbolSize: 5 },  // filtered out style
    controller: {
      inRange: { color: ['#5470c6', '#91cc75'] }
    },
    right: 10, top: 'center'
  },
  series: [{
    type: 'scatter',
    data: data
  }]
});

多 Series 的 VisualMap

默认情况下 visualMap 影响所有 series。使用 seriesIndex（数字或数组）针对特定 series。这让您对一个 series 着色而保持其他不变——在比较高亮数据集与参考时有用。单个图表甚至可以为不同 series 设置多个 visualMap。

echarts

chart.setOption({
  visualMap: {
    min: 0, max: 100,
    inRange: { color: ['#5470c6', '#91cc75', '#fac858'] }
  },
  series: [
    { type: 'scatter', name: 'A', data: dataA },
    { type: 'scatter', name: 'B', data: dataB }
  ]
});

// bind visualMap to specific series only
chart.setOption({
  visualMap: { seriesIndex: 1 }   // only affects second series
});

图例

基础图例

图例列出 series 名称以切换可见性。data 必须匹配 series.name（或自动派生）。icon 设置标记样式。点击图例项切换其 series。通过 setOption 添加/移除 series 时图例自动更新。

echarts

chart.setOption({
  legend: {
    data: ['Email', 'Search', 'Direct'],
    show: true,
    icon: 'roundRect',        // 'circle','rect','roundRect','triangle','diamond','pin','arrow'
    itemWidth: 20,
    itemHeight: 14,
    textStyle: { color: '#333', fontSize: 12 }
  },
  series: [
    { type: 'line', name: 'Email', data: [120, 200, 150] },
    { type: 'line', name: 'Search', data: [220, 180, 90] }
  ]
});

图例位置与布局

orient 和 top/left 定位图例。常见布局：顶部居中（默认）、底部居中、右侧垂直。itemGap 控制图例项之间的间距。微妙的背景/边框在视觉上将图例与图表分开。位置很重要——底部图例释放垂直空间。

echarts

chart.setOption({
  legend: {
    orient: 'horizontal',          // 'horizontal' or 'vertical'
    top: 'top',                    // 'top','bottom','middle' or px
    left: 'center',                // 'left','center','right' or px
    itemGap: 20,                   // gap between items
    padding: 5,
    backgroundColor: '#f5f5f5',
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 4
  },
  series: [/* ... */]
});

图例选择与默认值

selected 控制初始可见性。selectedMode: 'single' 使图例像单选按钮（只有一个 series 可见）。legendselectchanged 事件在用户切换时触发——用于持久化偏好或同步多个图表。默认模式是 'multiple'。

echarts

chart.setOption({
  legend: {
    selected: {
      'Email': true,        // visible by default
      'Search': false,      // hidden by default
      'Direct': true
    },
    selectedMode: 'multiple'   // 'single' or 'multiple'
  },
  series: [
    { type: 'line', name: 'Email', data: [120, 200, 150] },
    { type: 'line', name: 'Search', data: [220, 180, 90] },
    { type: 'line', name: 'Direct', data: [100, 90, 80] }
  ]
});

chart.on('legendselectchanged', function (params) {
  console.log('Selected:', params.selected);
});

可滚动图例

type: 'scroll' 在项目太多时分页图例——出现翻页按钮。这对于有 10+ series 的图表必不可少，否则会溢出。页面图标/文本样式自定义导航。垂直滚动图例适合放在右边距。

echarts

chart.setOption({
  legend: {
    type: 'scroll',           // 'plain' (default) or 'scroll'
    orient: 'vertical',
    right: 10, top: 20, bottom: 20,
    pageButtonItemStyle: { color: '#333' },
    pageIconColor: '#5470c6',
    pageIconInactiveColor: '#ccc',
    pageTextStyle: { color: '#333' },
    data: Array.from({length: 30}, (_, i) => 'Series ' + i)
  },
  series: [/* many series */]
});

图例格式化器与富文本

formatter 自定义图例标签（如大写、添加计数）。富文本让您以不同方式设置标签的各部分样式——在 textStyle.rich 中定义样式，在 formatter 中用 {style|text} 语法引用。这实现了像 'A {count|42}' 这样混合样式的图例。

echarts

chart.setOption({
  legend: {
    data: ['A', 'B'],
    formatter: function (name) {
      return name.toUpperCase();
    },
    textStyle: {
      rich: {
        a: { color: '#5470c6', fontSize: 14, fontWeight: 'bold' },
        b: { color: '#91cc75', fontSize: 12 }
      }
    }
  },
  series: [/* ... */]
});

// legend can also show values via legendselectchanged + setOption
chart.on('legendselectchanged', () => {
  // dynamic label updates
});

工具提示

基础工具提示

trigger: 'item' 按数据点显示工具提示（散点图、饼图）。'axis' 按整个类别显示（柱状图、折线图）。axisPointer 绘制引导线——'shadow' 是半透明带（适合柱状图），'line' 是细线（适合折线图），'cross' 显示 x 和 y 线。

echarts

chart.setOption({
  tooltip: {
    trigger: 'axis',           // 'item','axis','none'
    show: true,
    backgroundColor: 'rgba(50,50,50,0.9)',
    borderColor: '#333',
    borderWidth: 1,
    padding: 10,
    textStyle: { color: '#fff', fontSize: 13 },
    axisPointer: { type: 'shadow' }   // 'line','shadow','cross'
  },
  xAxis: { type: 'category', data: ['A','B','C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
});

工具提示格式化器

formatter 自定义工具提示内容。函数接收 params（含 name、value、seriesName、color 等）并返回 HTML。字符串模板使用 {a}（系列名）、{b}（类别/x）、{c}（值）、{d}（饼图百分比）。对于多系列轴工具提示，params 是数组——遍历它。

echarts

chart.setOption({
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      // params has: name, value, seriesName, color, dataIndex, ...
      return '<b>' + params.name + '</b><br/>' +
             'Value: ' + params.value + '<br/>' +
             'Series: ' + params.seriesName;
    }
  },
  series: [{ type: 'pie', data: [/* ... */] }]
});

// string template form (for axis trigger)
chart.setOption({
  tooltip: {
    trigger: 'axis',
    formatter: '{a}: {b} = {c}'   // a=series, b=category, c=value
  }
});

工具提示十字线与轴指示器

顶层 axisPointer.link 跨多个图表同步指示器（多图表仪表板）——传 xAxisIndex: 'all'。type: 'cross' 显示完整十字线，标签中含 x 和 y 值。crossStyle/lineStyle 自定义引导线。同步指示器对于比较堆叠图表中的数据至关重要。

echarts

chart.setOption({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu'] },
  yAxis: { type: 'value' },
  axisPointer: {
    link: [{ xAxisIndex: 'all' }],   // sync pointers across charts
    label: { backgroundColor: '#333' }
  },
  series: [{ type: 'line', data: [10, 20, 30, 40] }]
});

// per-axis pointer type
chart.setOption({
  tooltip: {
    axisPointer: {
      type: 'cross',
      crossStyle: { color: '#999' },
      lineStyle: { color: '#999', type: 'dashed' }
    }
  }
});

工具提示触发项

trigger: 'item' 在悬停单个数据点（饼图切片、散点图点）时显示工具提示。这是饼图、散点图、雷达图的默认值。extraCssText 添加任意 CSS（阴影、圆角）用于自定义样式。percent 在饼图中可用。项工具提示精确到每个点。

echarts

chart.setOption({
  tooltip: {
    trigger: 'item',               // per-point, not per-axis
    formatter: function (p) {
      return p.name + ': ' + p.value + ' (' + p.percent + '%)';
    },
    backgroundColor: 'rgba(255,255,255,0.95)',
    borderColor: '#eee',
    textStyle: { color: '#333' },
    extraCssText: 'box-shadow: 0 2px 10px rgba(0,0,0,0.1);'
  },
  series: [{
    type: 'pie',
    data: [{ value: 60, name: 'A' }, { value: 40, name: 'B' }]
  }]
});

富内容工具提示

对于多系列轴工具提示，params 是数组。遍历它构建带颜色标记、值和格式的富 HTML 表格。这就是构建专业工具提示的方式，包含对齐、总计或单位。返回 HTML 通过内联 CSS 提供完全的样式控制。

echarts

chart.setOption({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
    formatter: function (params) {
      let html = '<div style="font-weight:bold;margin-bottom:4px;">'
        + params[0].name + '</div>';
      params.forEach(p => {
        html += '<div style="display:flex;align-items:center;">'
          + '<span style="display:inline-block;width:10px;height:10px;background:'
          + p.color + ';margin-right:6px;"></span>'
          + p.seriesName + ': ' + p.value
          + '</div>';
      });
      return html;
    }
  },
  series: [
    { type: 'bar', name: 'A', data: [10, 20, 30] },
    { type: 'bar', name: 'B', data: [15, 25, 35] }
  ]
});

工具栏

工具栏功能

工具栏添加操作图标（默认右上角）。dataZoom 让用户拖选缩放。dataView 显示原始数据（readOnly: false 时可编辑）。magicType 切换图表类型（折线/柱状）。restore 重置。saveAsImage 导出 PNG/SVG。每个功能有自己的配置。

echarts

chart.setOption({
  toolbox: {
    show: true,
    right: 10, top: 10,
    feature: {
      dataZoom: { yAxisIndex: 'none' },
      dataView: { readOnly: false, title: 'Data', lang: ['Data','Close','Refresh'] },
      magicType: { type: ['line','bar','stack','tiled'] },
      restore: {},
      saveAsImage: { pixelRatio: 2, name: 'chart', type: 'png' }
    }
  },
  series: [{ type: 'bar', data: [10, 20, 30] }]
});

通过工具栏数据缩放

工具栏 dataZoom 添加'放大/缩小'按钮用于拖选。与 dataZoom 组件结合：'inside'（鼠标/触摸手势）和 'slider'（可拖动条）。yAxisIndex: 'none' 限制缩放到 x 轴。对于有数千点的时间序列，dataZoom 是导航的必备工具。

echarts

chart.setOption({
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',    // only zoom x axis
        title: { zoom: 'Zoom In', back: 'Zoom Out' }
      }
    }
  },
  dataZoom: [
    { type: 'inside', xAxisIndex: 0 },   // mouse wheel
    { type: 'slider', xAxisIndex: 0 }    // slider below chart
  ],
  xAxis: { type: 'category', data: longData },
  series: [{ type: 'line', data: longData }]
});

数据视图（编辑原始数据）

dataView 显示图表的底层数据。readOnly: false 让用户编辑并重新渲染。optionToContent/contentToOption 让您完全自定义视图（如用 HTML 表格代替 JSON）。用于调试或让高级用户调整数据。编辑触发重新渲染。

echarts

chart.setOption({
  toolbox: {
    feature: {
      dataView: {
        readOnly: false,                  // editable
        title: 'View Data',
        lang: ['Data View', 'Close', 'Refresh'],
        optionToContent: function (opt) {
          // custom HTML rendering instead of JSON
          return '<div>Custom view</div>';
        },
        contentToOption: function (div) {
          // parse edited content back to option
          return opt;
        }
      }
    }
  }
});

魔术类型与还原

magicType 让用户在运行时切换折线/柱状和堆叠/平铺布局——ECharts 处理转换。restore 将所有工具栏更改恢复到原始选项。magicTypeChanged 事件让您对类型切换做出反应（如更新标签）。无需额外代码即可探索。

echarts

chart.setOption({
  toolbox: {
    feature: {
      magicType: {
        type: ['line', 'bar', 'stack', 'tiled'],
        title: { line: 'Line', bar: 'Bar', stack: 'Stack', tiled: 'Tile' }
      },
      restore: { title: 'Restore' }
    }
  },
  series: [
    { type: 'bar', name: 'A', data: [10, 20, 30] },
    { type: 'bar', name: 'B', data: [15, 25, 35] }
  ]
});

chart.on('magicTypeChanged', function (params) {
  console.log('Switched to', params.currentType);
});

保存为图片

saveAsImage 将图表导出为 PNG/JPG。pixelRatio: 2 使 retina 分辨率翻倍。excludeComponents 从导出中移除元素（如工具栏）。getDataURL 返回 base64 字符串用于编程下载或上传。SVG 渲染器在 type 为 'svg' 时导出更清晰的矢量图像。

echarts

chart.setOption({
  toolbox: {
    feature: {
      saveAsImage: {
        type: 'png',                  // 'png' or 'jpg'
        name: 'my-chart',
        pixelRatio: 2,                // higher = sharper
        backgroundColor: '#fff',
        excludeComponents: ['toolbox'],
        title: 'Download'
      }
    }
  }
});

// programmatic export
chart.getDataURL({
  type: 'png',
  pixelRatio: 2,
  backgroundColor: '#fff'
});

标记（MarkPoint / MarkLine / MarkArea）

MarkPoint（高亮点）

markPoint 引起对特定点的注意。内置类型：'max'、'min'、'average'。也可以指定 coord: [x, y] 用于自定义点。symbolSize 缩放标记。MarkPoints 浮在 series 之上——不影响轴缩放。用于标注极值或事件。

echarts

chart.setOption({
  series: [{
    type: 'line',
    data: [10, 50, 30, 80, 20, 90],
    markPoint: {
      symbolSize: 50,
      data: [
        { type: 'max', name: 'Peak' },
        { type: 'min', name: 'Low' },
        { type: 'average', name: 'Avg' }
      ],
      label: { fontSize: 12 }
    }
  }]
});

MarkLine（参考线）

markLine 绘制参考线。type: 'average' 在均值处绘制水平线。{ yAxis: 60 } 绘制自定义水平线（阈值、目标）。{ xAxis: 'Wed' } 绘制垂直线（事件标记）。symbol: 'none' 移除端箭头以获得更简洁的外观。

echarts

chart.setOption({
  series: [{
    type: 'bar',
    data: [10, 50, 30, 80, 20],
    markLine: {
      symbol: 'none',              // no end arrows
      lineStyle: { type: 'dashed', color: '#ee6666' },
      data: [
        { type: 'average', name: 'Avg' },
        { yAxis: 60, name: 'Threshold' },          // horizontal line at y=60
        { xAxis: 'Wed', name: 'Event' }            // vertical line at category
      ],
      label: { formatter: '{b}: {c}' }
    }
  }]
});

MarkArea（高亮区域）

markArea 着色图表的区域。data 是 [起始, 结束] 对数组——每对通过 coord（xAxis/yAxis 值）定义一个矩形。用于高亮工作时间、周末、衰退期或任何感兴趣的跨度。silent: false 使其响应悬停事件。

echarts

chart.setOption({
  series: [{
    type: 'line',
    data: [10, 20, 30, 40, 50, 60, 70],
    markArea: {
      silent: false,
      itemStyle: { color: 'rgba(255, 200, 0, 0.2)' },
      data: [
        [
          { xAxis: 'Tue' },          // start
          { xAxis: 'Thu' }           // end
        ],
        [
          { xAxis: 'Fri' },
          { xAxis: 'Sat' }
        ]
      ],
      label: { show: true, position: 'top' }
    }
  }]
});

组合标记

在一个 series 上组合 markPoint、markLine 和 markArea。典型的分析图表高亮峰值（markPoint）、显示平均值和目标（markLine）、并着色显著时期（markArea）。每个标记有独立样式。不要过度——太多标记会使图表杂乱。

echarts

chart.setOption({
  series: [{
    type: 'line',
    data: [20, 50, 30, 80, 60, 90, 40],
    markPoint: {
      data: [{ type: 'max', name: 'Max' }]
    },
    markLine: {
      data: [
        { type: 'average', name: 'Average' },
        { yAxis: 70, name: 'Target', lineStyle: { color: '#91cc75' } }
      ]
    },
    markArea: {
      data: [[
        { xAxis: 'Wed' },
        { xAxis: 'Fri', itemStyle: { color: 'rgba(145,204,117,0.1)' } }
      ]]
    }
  }]
});

自定义坐标标记

对于自定义位置，使用 coord: [x, y] 代替内置类型。带自定义坐标的 markLine 接受两个 coord 对象的数组（起始和结束）——可以绘制任意线（对角线、回归趋势线）。symbol: 'pin' 更改 markPoint 形状。这实现了对特定数据点的标注。

echarts

chart.setOption({
  series: [{
    type: 'scatter',
    data: [[10,20], [50,60], [80,90]],
    markPoint: {
      data: [
        { coord: [50, 60], name: 'Center', value: 'Origin' }
      ],
      symbol: 'pin',
      symbolSize: 40,
      itemStyle: { color: '#ee6666' }
    },
    markLine: {
      data: [
        [{ coord: [0, 0] }, { coord: [100, 100] }]  // diagonal line
      ]
    }
  }]
});

动画与交互

动画选项

全局控制动画。animationDuration 是入场动画长度。缓动名称包括 'linear'、'cubicOut'、'elasticOut'、'bounceOut'。animationDelay 作为函数交错项目（idx * 100 使每个柱状图在前一个之后 100ms 出现）。对于大数据集，animationThreshold 自动禁用动画以保持性能。

echarts

chart.setOption({
  animation: true,
  animationThreshold: 2000,        // disable above this data count
  animationDuration: 2000,         // entrance duration (ms)
  animationEasing: 'cubicOut',     // easing function
  animationDelay: function (idx) { // stagger by index
    return idx * 100;
  },
  animationDurationUpdate: 500,    // update transition
  animationEasingUpdate: 'cubicInOut',
  animationDelayUpdate: 0,
  series: [{ type: 'bar', data: [10, 20, 30, 40] }]
});

缓动函数

ECharts 支持 30+ 缓动函数。'cubicOut'（默认）是自然减速。'elasticOut' 和 'bounceOut' 添加俏皮的过冲。'sinusoidalInOut' 平滑且中性。对于数据可视化，偏好细微的缓动（cubic、sinusoidal）——弹跳动画分散对数据的注意力。使缓动匹配您的品牌个性。

echarts

chart.setOption({
  animationEasing: 'elasticOut',
  // available easings:
  // linear, quadraticIn, quadraticOut, quadraticInOut,
  // cubicIn, cubicOut, cubicInOut,
  // quarticIn, quarticOut, quarticInOut,
  // quinticIn, quinticOut, quinticInOut,
  // sinusoidalIn, sinusoidalOut, sinusoidalInOut,
  // exponentialIn, exponentialOut, exponentialInOut,
  // circularIn, circularOut, circularInOut,
  // elasticIn, elasticOut, elasticInOut,
  // backIn, backOut, backInOut,
  // bounceIn, bounceOut, bounceInOut
  series: [{ type: 'bar', data: [10, 20, 30] }]
});

加载动画

showLoading 在获取数据时显示加载遮罩。数据就绪后调用 hideLoading。这是标准的异步数据模式——显示加载、获取、隐藏加载、setOption。自定义加载指示器颜色和消息以匹配您的应用。遮罩防止加载期间的用户交互。

echarts

// show loading mask
chart.showLoading({
  text: 'Loading data...',
  color: '#5470c6',
  textColor: '#333',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 0,
  fontSize: 14,
  showSpinner: true,
  spinnerRadius: 10,
  lineWidth: 2
});

// hide after data loads
fetch('/api/data').then(r => r.json()).then(data => {
  chart.hideLoading();
  chart.setOption({ series: [{ type: 'bar', data: data }] });
});

事件 API

chart.on 绑定事件处理程序。常见事件：click、dblclick、mouseover、legendselectchanged、datazoom、pieselectchanged。params 携带组件信息。dispatchAction 触发操作（highlight、showTip、dataZoom）——用于将外部 UI 与图表同步或编程显示工具提示。

echarts

chart.on('click', function (params) {
  console.log('Clicked:', params.componentType, params.seriesType);
  console.log('Series:', params.seriesName, 'Data:', params.name, params.value);
  console.log(' dataIndex:', params.dataIndex);
});

chart.on('legendselectchanged', function (params) {
  console.log('Legend toggled:', params.selected);
});

chart.on('datazoom', function (params) {
  console.log('Zoom:', params.batch?.[0]?.start, params.batch?.[0]?.end);
});

// dispatch an action programmatically
chart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 2
});

chart.dispatchAction({ type: 'showTip', x: 100, y: 100 });

图形元素（自定义形状）

graphic 让您在图表上叠加自定义形状（文本、圆形、矩形、图像）——用于水印、空状态消息或标注。元素支持定位（left/top/right/bottom 为像素或 %）、样式和事件。它们基于 z 在图表上方或下方渲染。当标准选项不够用时，这是逃生舱口。

echarts

chart.setOption({
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center', top: 'middle',
        style: { text: 'No Data', fontSize: 24, fill: '#999' },
        invisible: false
      },
      {
        type: 'circle',
        shape: { cx: 50, cy: 50, r: 20 },
        style: { fill: '#5470c6' },
        onclick: function () { console.log('clicked'); }
      },
      {
        type: 'image',
        style: { image: 'logo.png', width: 100, height: 40 },
        left: 10, top: 10
      }
    ]
  }
});

ECharts 速查表

入门

安装与第一个图表

主题与渲染器初始化

响应式缩放

setOption 合并模式

生命周期：getInstanceByDom 与 dispose

柱状图

基础柱状图

分组与堆叠柱状图

水平柱状图

带背景与圆角的柱状图

动态柱状图赛跑

柱宽与间距

折线图

基础折线图

平滑线与面积图

多系列折线图

堆叠面积图

阶梯线图

时间轴折线图

饼图

基础饼图

环形图（圆环）

玫瑰图（南丁格尔图）

自定义标签饼图

半圆饼图

散点图

基础散点图

气泡图（按值定大小）

带 VisualMap 的散点图（按值着色）

涟漪散点图（动画）

大规模散点图

雷达图

基础雷达图

多系列雷达图

带面积的雷达图

雷达图形状与坐标轴

雷达极坐标半径

热力图

笛卡尔热力图

日历热力图

热力图项样式

打卡热力图

地理地图上的热力图

树图

基础树图（垂直）

水平树图

径向树图

自定义符号树图

树图展开/折叠控制

旭日图

基础旭日图

带层级的旭日图

旭日图项样式与高亮

带值与排序的旭日图

旭日图下钻

桑基图

基础桑基图

桑基图节点层级

桑基图节点样式与间距

带循环的桑基图（回流）

桑基图交互

漏斗图

基础漏斗图

漏斗图排序与间距

漏斗图标签

漏斗图项样式

对比漏斗图

仪表盘

基础仪表盘

带指针的仪表盘

带色带的仪表盘

多指针仪表盘

自定义仪表盘（圆形进度）

坐标系

多个 X 轴

双 Y 轴

极坐标系

日历坐标系