ECharts 前端图表开发全攻略：参数配置、项目实战与高级可视化资源整理

Apache ECharts 图表参数详解与前端实战完整指南

适合对象：前端开发工程师、Vue/React 开发者、后台管理系统开发者、数据大屏开发者、BI 报表页面开发者。

目标：系统理解 ECharts 的核心配置 option，掌握常见图表参数、项目封装方式、性能优化、图表设计原则、学习资源与高级资源。

[一、ECharts 是什么](#一、ECharts 是什么)
[二、前端如何安装和使用 ECharts](#二、前端如何安装和使用 ECharts)
[三、ECharts 核心运行流程](#三、ECharts 核心运行流程)
[四、option 配置整体结构详解](#四、option 配置整体结构详解)
五、全局参数详解
[六、标题 title 参数详解](#六、标题 title 参数详解)
[七、图例 legend 参数详解](#七、图例 legend 参数详解)
[八、提示框 tooltip 参数详解](#八、提示框 tooltip 参数详解)
[九、网格 grid 参数详解](#九、网格 grid 参数详解)
[十、坐标轴 xAxis / yAxis 参数详解](#十、坐标轴 xAxis / yAxis 参数详解)
[十一、系列 series 参数详解](#十一、系列 series 参数详解)
[十二、dataset 数据集参数详解](#十二、dataset 数据集参数详解)
[十三、dataZoom 数据缩放参数详解](#十三、dataZoom 数据缩放参数详解)
[十四、visualMap 视觉映射参数详解](#十四、visualMap 视觉映射参数详解)
[十五、toolbox 工具箱参数详解](#十五、toolbox 工具箱参数详解)
[十六、graphic 自定义图形参数详解](#十六、graphic 自定义图形参数详解)
十七、常用图表完整配置示例
[十八、Vue3 中封装 ECharts](#十八、Vue3 中封装 ECharts)
[十九、React 中封装 ECharts](#十九、React 中封装 ECharts)
二十、后台管理系统图表实战思路
[二十一、数据大屏 ECharts 实战思路](#二十一、数据大屏 ECharts 实战思路)
[二十二、ECharts 性能优化](#二十二、ECharts 性能优化)
二十三、常见问题排查
二十四、学习资源、文档、社区与高级资源
[二十五、ECharts 学习路线](#二十五、ECharts 学习路线)

一、ECharts 是什么

Apache ECharts 是一个基于 JavaScript 的开源数据可视化图表库，常用于前端项目中制作：

折线图
柱状图
饼图
散点图
雷达图
仪表盘
热力图
地图
漏斗图
桑基图
关系图
树图
K 线图
数据大屏
BI 报表
监控面板

ECharts 的核心思想是：

js 复制代码

DOM 容器 + echarts.init() + option 配置 + setOption()

简单理解：

txt 复制代码

你准备一个 div 容器。
ECharts 负责把数据画成图表。
你通过 option 控制图表长什么样、显示什么数据、如何交互。

二、前端如何安装和使用 ECharts

2.1 原生 HTML 使用

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>ECharts 入门</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>

  <script>
    const chartDom = document.getElementById('main')
    const myChart = echarts.init(chartDom)

    const option = {
      title: {
        text: '销售数据'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [120, 200, 150]
        }
      ]
    }

    myChart.setOption(option)
  </script>
</body>
</html>

2.2 npm 安装

bash 复制代码

npm install echarts --save

或：

bash 复制代码

pnpm add echarts

或：

bash 复制代码

yarn add echarts

2.3 Vue / React 项目中完整引入

js 复制代码

import * as echarts from 'echarts'

这种方式简单，适合学习、后台系统、中小项目。

2.4 按需引入

按需引入可以减少打包体积，适合中大型项目、移动端项目、数据大屏项目。

js 复制代码

import * as echarts from 'echarts/core'

import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts'

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  DataZoomComponent,
  ToolboxComponent
} from 'echarts/components'

import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  BarChart,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  DataZoomComponent,
  ToolboxComponent,
  CanvasRenderer
])

三、ECharts 核心运行流程

一个完整图表通常有 6 步：

js 复制代码

// 1. 获取 DOM
const chartDom = document.getElementById('chart')

// 2. 初始化图表实例
const chart = echarts.init(chartDom)

// 3. 准备 option
const option = {
  title: {
    text: '访问量统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [120, 200, 150]
    }
  ]
}

// 4. 设置配置
chart.setOption(option)

// 5. 监听尺寸变化
window.addEventListener('resize', () => {
  chart.resize()
})

// 6. 页面销毁时释放实例
chart.dispose()

项目中最重要的是：

操作	作用
`echarts.init(dom)`	初始化图表
`chart.setOption(option)`	设置或更新图表
`chart.resize()`	重新计算图表尺寸
`chart.dispose()`	销毁图表，释放内存
`chart.on(event, callback)`	监听图表事件
`chart.off(event)`	解绑事件
`chart.clear()`	清空图表内容，但不销毁实例

四、option 配置整体结构详解

ECharts 的核心是 option。大多数图表都是通过配置 option 完成的。

4.1 完整 option 骨架

js 复制代码

const option = {
  // 全局颜色
  color: ['#5470C6', '#91CC75', '#FAC858'],

  // 背景色
  backgroundColor: '#ffffff',

  // 全局文字样式
  textStyle: {
    fontFamily: 'Microsoft YaHei',
    fontSize: 12,
    color: '#333'
  },

  // 标题
  title: {
    text: '图表标题',
    subtext: '图表副标题',
    left: 'center'
  },

  // 图例
  legend: {
    top: 10,
    data: ['销售额', '利润']
  },

  // 提示框
  tooltip: {
    trigger: 'axis'
  },

  // 网格，控制坐标系区域
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  // x 轴
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月']
  },

  // y 轴
  yAxis: {
    type: 'value'
  },

  // 数据系列
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150]
    }
  ],

  // 数据集
  dataset: {},

  // 区域缩放
  dataZoom: [],

  // 视觉映射
  visualMap: {},

  // 工具箱
  toolbox: {},

  // 动画
  animation: true
}

4.2 option 一级配置项分类

分类	常见配置	说明
基础展示	`title`、`legend`、`tooltip`、`toolbox`	标题、图例、提示框、工具箱
坐标系	`grid`、`xAxis`、`yAxis`、`polar`、`radar`、`geo`	决定图表绘制在哪种坐标系里
数据	`series`、`dataset`	决定图表类型和数据来源
交互	`dataZoom`、`brush`、`axisPointer`	缩放、框选、指示器
视觉	`color`、`visualMap`、`textStyle`、`backgroundColor`	颜色、文字、视觉映射
动画	`animation`、`animationDuration`、`universalTransition`	控制图表动效
高级扩展	`graphic`、`calendar`、`timeline`、`aria`	自定义图形、日历、时间轴、无障碍

五、全局参数详解

5.1 `color`：全局色盘

js 复制代码

color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666']

作用：

控制多个系列的默认颜色。
第一个系列用第一个颜色，第二个系列用第二个颜色。
可以统一系统视觉风格。

适合后台系统：

js 复制代码

color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']

适合数据大屏：

js 复制代码

color: ['#00D8FF', '#1DE9B6', '#FFD166', '#FF6B6B', '#A78BFA']

5.2 `backgroundColor`：背景色

js 复制代码

backgroundColor: '#ffffff'

大屏常用：

js 复制代码

backgroundColor: 'transparent'

或者：

js 复制代码

backgroundColor: '#071E3D'

5.3 `textStyle`：全局文字样式

js 复制代码

textStyle: {
  fontFamily: 'Microsoft YaHei, Arial',
  fontSize: 12,
  color: '#333'
}

常用参数：

参数	说明
`fontStyle`	字体风格，如 `normal`、`italic`
`fontWeight`	字重，如 `normal`、`bold`
`fontFamily`	字体
`fontSize`	字号
`color`	文字颜色

5.4 `animation`：是否开启动画

js 复制代码

animation: true

常用动画参数：

js 复制代码

animationDuration: 1000,
animationEasing: 'cubicOut',
animationDelay: 0,
animationDurationUpdate: 500,
animationEasingUpdate: 'cubicInOut'

建议：

场景	建议
普通后台图表	开启动画
数据大屏	适当开启动画
高频实时刷新	减少动画或关闭动画
大数据量图表	关闭动画或减少动画时长

js 复制代码

animation: false

六、标题 title 参数详解

6.1 基础用法

js 复制代码

title: {
  text: '销售额趋势',
  subtext: '2026 年第一季度',
  left: 'center',
  top: 10
}

6.2 常用参数表

参数	类型	说明	示例
`show`	boolean	是否显示标题	`true`
`text`	string	主标题文本	`'销售统计'`
`subtext`	string	副标题文本	`'数据来源：业务系统'`
`left`	string/number	水平位置	`'left'`、`'center'`、`20`
`top`	string/number	垂直位置	`'top'`、`20`
`right`	string/number	右侧距离	`20`
`bottom`	string/number	底部距离	`10`
`textStyle`	object	主标题样式	`{ fontSize: 18 }`
`subtextStyle`	object	副标题样式	`{ color: '#999' }`
`textAlign`	string	对齐方式	`'center'`
`link`	string	主标题跳转链接	`'https://echarts.apache.org'`
`target`	string	链接打开方式	`'blank'`

6.3 标题样式示例

js 复制代码

title: {
  text: '用户增长趋势',
  subtext: '近 30 天',
  left: 'center',
  top: 10,
  textStyle: {
    color: '#333',
    fontSize: 18,
    fontWeight: 'bold'
  },
  subtextStyle: {
    color: '#999',
    fontSize: 12
  }
}

6.4 数据大屏标题样式

js 复制代码

title: {
  text: '智慧城市运行监控中心',
  left: 'center',
  top: 20,
  textStyle: {
    color: '#00D8FF',
    fontSize: 28,
    fontWeight: 'bold',
    textShadowColor: '#00D8FF',
    textShadowBlur: 10
  }
}

七、图例 legend 参数详解

图例用于展示多个数据系列，也可以点击控制系列显示和隐藏。

7.1 基础用法

js 复制代码

legend: {
  data: ['销售额', '利润'],
  top: 10
}

7.2 常用参数表

参数	说明	示例
`show`	是否显示图例	`true`
`type`	图例类型	`'plain'`、`'scroll'`
`data`	图例数据	`['销售额', '利润']`
`left` / `top` / `right` / `bottom`	位置	`'center'`、`10`
`orient`	布局方向	`'horizontal'`、`'vertical'`
`selectedMode`	是否允许点击切换	`true`、`false`、`'single'`、`'multiple'`
`selected`	默认选中状态	`{ 销售额: true, 利润: false }`
`itemWidth`	图例图标宽度	`14`
`itemHeight`	图例图标高度	`10`
`itemGap`	图例间距	`20`
`textStyle`	图例文字样式	`{ color: '#333' }`
`icon`	图例图标	`'circle'`、`'rect'`、`'roundRect'`、`'triangle'`、`'diamond'`

7.3 多图例滚动

当图例很多时，使用 type: 'scroll'。

js 复制代码

legend: {
  type: 'scroll',
  orient: 'horizontal',
  top: 10,
  data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京']
}

7.4 单选图例

js 复制代码

legend: {
  selectedMode: 'single',
  data: ['销售额', '利润', '订单量']
}

适合一次只查看一个维度的数据。

7.5 默认隐藏某个图例

js 复制代码

legend: {
  data: ['销售额', '利润'],
  selected: {
    销售额: true,
    利润: false
  }
}

tooltip 是用户鼠标悬停图表时显示的信息框，是 ECharts 最常用配置之一。

8.1 基础用法

js 复制代码

tooltip: {
  trigger: 'axis'
}

8.2 trigger 触发方式

值	说明	适合场景
`item`	数据项触发	饼图、散点图、地图
`axis`	坐标轴触发	折线图、柱状图
`none`	不触发	不需要提示框

示例：

js 复制代码

tooltip: {
  trigger: 'item'
}

饼图常用 item：

js 复制代码

tooltip: {
  trigger: 'item',
  formatter: '{a} <br/>{b}: {c} ({d}%)'
}

折线图、柱状图常用 axis：

js 复制代码

tooltip: {
  trigger: 'axis'
}

8.3 axisPointer 指示器

js 复制代码

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  }
}

type	说明	适合场景
`line`	直线指示器	折线图
`shadow`	阴影指示器	柱状图
`cross`	十字准星	散点图、金融图表
`none`	不显示指示器	极简图表

8.4 formatter 字符串模板

js 复制代码

tooltip: {
  formatter: '{b}: {c}'
}

常用模板变量：

变量	含义
`{a}`	系列名
`{b}`	数据名
`{c}`	数据值
`{d}`	百分比，主要用于饼图
`{@xxx}`	dataset 中某个维度的值

饼图示例：

js 复制代码

tooltip: {
  trigger: 'item',
  formatter: '{a}<br/>{b}: {c} ({d}%)'
}

8.5 formatter 函数写法

js 复制代码

tooltip: {
  trigger: 'axis',
  formatter(params) {
    let result = `${params[0].axisValue}<br/>`

    params.forEach(item => {
      result += `
        ${item.marker}
        ${item.seriesName}：
        ${item.value}
        <br/>
      `
    })

    return result
  }
}

js 复制代码

tooltip: {
  trigger: 'axis',
  backgroundColor: 'rgba(0, 0, 0, 0.75)',
  borderColor: 'transparent',
  textStyle: {
    color: '#fff'
  },
  axisPointer: {
    type: 'shadow'
  },
  formatter(params) {
    return params
      .map(item => `${item.marker}${item.seriesName}：${item.value}`)
      .join('<br/>')
  }
}

tooltip 显示 `[object Object]`

原因：value 是对象，没有手动取字段。

js 复制代码

formatter(params) {
  return params.data.name + '：' + params.data.value
}

可以做换行和单位格式化：

js 复制代码

formatter(params) {
  return params
    .map(item => {
      return `${item.marker}${item.seriesName}：${item.value} 万元`
    })
    .join('<br/>')
}

可以用 confine：

js 复制代码

tooltip: {
  confine: true
}

九、网格 grid 参数详解

grid 控制直角坐标系图表的绘图区位置和大小。折线图、柱状图、散点图通常都依赖 grid。

9.1 基础用法

js 复制代码

grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true
}

9.2 常用参数表

参数	说明	示例
`show`	是否显示网格背景	`false`
`left`	左边距	`'3%'`、`40`
`right`	右边距	`'4%'`、20
`top`	上边距	`60`
`bottom`	下边距	`40`
`width`	宽度	`'80%'`
`height`	高度	`'70%'`
`containLabel`	是否包含坐标轴标签	`true`
`backgroundColor`	网格背景色	`'#fff'`
`borderColor`	网格边框色	`'#ccc'`

9.3 containLabel 的作用

推荐大多数情况下设置：

js 复制代码

grid: {
  containLabel: true
}

作用是防止坐标轴文字被截断。

9.4 标签较长时的 grid

js 复制代码

grid: {
  left: 20,
  right: 20,
  bottom: 80,
  containLabel: true
},
xAxis: {
  axisLabel: {
    rotate: 45
  }
}

适合 x 轴文字很长的场景。

十、坐标轴 xAxis / yAxis 参数详解

折线图、柱状图、散点图常用 xAxis 和 yAxis。

10.1 坐标轴 type

type	说明	常见场景
`category`	类目轴	月份、城市、产品名
`value`	数值轴	销售额、人数、金额
`time`	时间轴	时间序列数据
`log`	对数轴	数据跨度特别大

10.2 类目轴示例

js 复制代码

xAxis: {
  type: 'category',
  data: ['一月', '二月', '三月']
},
yAxis: {
  type: 'value'
}

10.3 时间轴示例

js 复制代码

xAxis: {
  type: 'time'
},
yAxis: {
  type: 'value'
},
series: [
  {
    type: 'line',
    data: [
      ['2026-01-01', 120],
      ['2026-01-02', 200],
      ['2026-01-03', 150]
    ]
  }
]

10.4 坐标轴常用参数表

参数	说明	示例
`show`	是否显示坐标轴	`true`
`type`	坐标轴类型	`'category'`、`'value'`
`name`	坐标轴名称	`'销售额'`
`nameLocation`	名称位置	`'start'`、`'middle'`、`'end'`
`nameGap`	名称与轴线距离	`20`
`min`	最小值	`0`、`'dataMin'`
`max`	最大值	`100`、`'dataMax'`
`interval`	强制分割间隔	`10`
`boundaryGap`	两边留白	`true`、`false`
`axisLine`	坐标轴线	`{ show: true }`
`axisTick`	刻度线	`{ show: false }`
`axisLabel`	坐标轴标签	`{ rotate: 45 }`
`splitLine`	分割线	`{ show: true }`
`splitArea`	分隔区域	`{ show: false }`

10.5 axisLine 轴线

js 复制代码

xAxis: {
  axisLine: {
    show: true,
    lineStyle: {
      color: '#999',
      width: 1,
      type: 'solid'
    }
  }
}

10.6 axisTick 刻度线

js 复制代码

xAxis: {
  axisTick: {
    show: false
  }
}

10.7 axisLabel 标签

js 复制代码

xAxis: {
  axisLabel: {
    color: '#666',
    fontSize: 12,
    rotate: 45,
    formatter(value) {
      return value.length > 6 ? value.slice(0, 6) + '...' : value
    }
  }
}

常用场景：

场景	处理方式
x 轴文字太长	`rotate: 45`
标签太密	`interval: 0` 或自动间隔
金额展示	formatter 加单位
百分比展示	formatter 加 `%`
大数字展示	转成万、亿

示例：

js 复制代码

yAxis: {
  axisLabel: {
    formatter(value) {
      if (value >= 10000) {
        return value / 10000 + '万'
      }
      return value
    }
  }
}

10.8 splitLine 分割线

js 复制代码

yAxis: {
  splitLine: {
    show: true,
    lineStyle: {
      color: '#eee',
      type: 'dashed'
    }
  }
}

10.9 多 y 轴

适合销售额和增长率一起展示。

js 复制代码

yAxis: [
  {
    type: 'value',
    name: '销售额',
    axisLabel: {
      formatter: '{value} 万'
    }
  },
  {
    type: 'value',
    name: '增长率',
    axisLabel: {
      formatter: '{value}%'
    }
  }
],
series: [
  {
    name: '销售额',
    type: 'bar',
    yAxisIndex: 0,
    data: [120, 200, 150]
  },
  {
    name: '增长率',
    type: 'line',
    yAxisIndex: 1,
    data: [10, 20, 15]
  }
]

十一、系列 series 参数详解

series 是 ECharts 最重要的配置。它决定图表类型、数据、样式、标签、动画、交互。

11.1 series 基础结构

js 复制代码

series: [
  {
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150]
  }
]

11.2 series 通用参数表

参数	说明	示例
`name`	系列名称，对应 legend 和 tooltip	`'销售额'`
`type`	图表类型	`'line'`、`'bar'`、`'pie'`
`data`	数据	`[120, 200, 150]`
`colorBy`	按系列或数据项分配颜色	`'series'`、`'data'`
`itemStyle`	图形样式	`{ color: '#409EFF' }`
`label`	标签	`{ show: true }`
`emphasis`	高亮状态	`{ focus: 'series' }`
`blur`	淡出状态	`{}`
`select`	选中状态	`{}`
`animation`	单系列动画	`true`
`z`	图层层级	`2`
`zlevel`	Canvas 分层	`0`

11.3 折线图 line 参数详解

基础折线图

js 复制代码

series: [
  {
    name: '访问量',
    type: 'line',
    data: [120, 200, 150, 300, 280]
  }
]

line 常用参数

参数	说明	示例
`smooth`	是否平滑曲线	`true`
`symbol`	拐点形状	`'circle'`、`'none'`
`symbolSize`	拐点大小	`8`
`showSymbol`	是否显示拐点	`false`
`lineStyle`	线条样式	`{ width: 3 }`
`areaStyle`	面积区域样式	`{}`
`step`	阶梯线图	`'start'`、`'middle'`、`'end'`
`connectNulls`	是否连接空数据	`true`
`sampling`	降采样	`'lttb'`、`'average'`
`markPoint`	标记点	最大值、最小值
`markLine`	标记线	平均线、警戒线
`markArea`	标记区域	区间高亮

平滑折线 + 面积图

js 复制代码

series: [
  {
    name: '访问量',
    type: 'line',
    smooth: true,
    showSymbol: false,
    data: [120, 200, 150, 300, 280],
    lineStyle: {
      width: 3
    },
    areaStyle: {
      opacity: 0.2
    }
  }
]

带最大值、最小值、平均线

js 复制代码

series: [
  {
    name: '销售额',
    type: 'line',
    data: [120, 200, 150, 300, 280],
    markPoint: {
      data: [
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
      ]
    },
    markLine: {
      data: [
        { type: 'average', name: '平均值' }
      ]
    }
  }
]

11.4 柱状图 bar 参数详解

基础柱状图

js 复制代码

series: [
  {
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150]
  }
]

bar 常用参数

参数	说明	示例
`barWidth`	柱子宽度	`30`、`'40%'`
`barMaxWidth`	最大柱宽	`40`
`barMinWidth`	最小柱宽	`5`
`barGap`	同类目柱间距	`'30%'`
`barCategoryGap`	类目间柱间距	`'20%'`
`stack`	堆叠分组	`'total'`
`realtimeSort`	动态排序柱状图	`true`
`itemStyle`	柱子样式	圆角、颜色
`label`	柱子标签	显示数值

圆角柱状图

js 复制代码

series: [
  {
    type: 'bar',
    data: [120, 200, 150],
    barWidth: 30,
    itemStyle: {
      borderRadius: [6, 6, 0, 0]
    },
    label: {
      show: true,
      position: 'top'
    }
  }
]

堆叠柱状图

js 复制代码

series: [
  {
    name: '线上',
    type: 'bar',
    stack: 'total',
    data: [120, 132, 101]
  },
  {
    name: '线下',
    type: 'bar',
    stack: 'total',
    data: [220, 182, 191]
  }
]

横向柱状图

js 复制代码

xAxis: {
  type: 'value'
},
yAxis: {
  type: 'category',
  data: ['北京', '上海', '广州']
},
series: [
  {
    type: 'bar',
    data: [120, 200, 150]
  }
]

适合排名类图表。

11.5 饼图 pie 参数详解

基础饼图

js 复制代码

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

pie 常用参数

参数	说明	示例
`radius`	半径	`'60%'`、`['40%', '70%']`
`center`	圆心位置	`['50%', '50%']`
`roseType`	南丁格尔玫瑰图	`'radius'`、`'area'`
`avoidLabelOverlap`	防止标签重叠	`true`
`label`	标签	`{ formatter: '{b}: {d}%' }`
`labelLine`	标签引导线	`{ show: true }`
`selectedMode`	是否可选中	`'single'`、`'multiple'`
`selectedOffset`	选中偏移	`10`
`minAngle`	最小扇区角度	`5`
`stillShowZeroSum`	数据全 0 时是否显示	`false`

环形图

js 复制代码

series: [
  {
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 40, name: '移动端' },
      { value: 30, name: 'PC端' },
      { value: 30, name: '小程序' }
    ],
    label: {
      formatter: '{b}\n{d}%'
    }
  }
]

玫瑰图

js 复制代码

series: [
  {
    type: 'pie',
    roseType: 'radius',
    radius: [20, 120],
    data: [
      { value: 40, name: 'A' },
      { value: 38, name: 'B' },
      { value: 32, name: 'C' }
    ]
  }
]

11.6 散点图 scatter 参数详解

适合分析两个变量之间的关系。

js 复制代码

series: [
  {
    name: '用户分布',
    type: 'scatter',
    data: [
      [10, 20],
      [15, 35],
      [20, 40],
      [25, 60]
    ],
    symbolSize: 12
  }
]

常用参数：

参数	说明
`symbolSize`	散点大小
`symbol`	散点形状
`large`	大数据量优化
`largeThreshold`	开启大数据优化阈值
`itemStyle`	散点样式
`emphasis`	高亮效果

动态大小：

js 复制代码

series: [
  {
    type: 'scatter',
    data: [
      [10, 20, 5],
      [15, 35, 10],
      [20, 40, 20]
    ],
    symbolSize(data) {
      return data[2] * 2
    }
  }
]

11.7 雷达图 radar 参数详解

雷达图需要 radar 坐标系和 series 配合。

js 复制代码

radar: {
  indicator: [
    { name: '技术', max: 100 },
    { name: '沟通', max: 100 },
    { name: '执行', max: 100 },
    { name: '学习', max: 100 }
  ]
},
series: [
  {
    type: 'radar',
    data: [
      {
        value: [90, 70, 85, 95],
        name: '张三'
      }
    ]
  }
]

常用场景：

能力模型
产品性能对比
游戏角色属性
多维度评分

11.8 仪表盘 gauge 参数详解

js 复制代码

series: [
  {
    type: 'gauge',
    progress: {
      show: true
    },
    detail: {
      formatter: '{value}%'
    },
    data: [
      {
        value: 78,
        name: '完成率'
      }
    ]
  }
]

常用参数：

参数	说明
`min` / `max`	最小值、最大值
`splitNumber`	分割段数
`axisLine`	仪表盘轴线
`progress`	进度条
`pointer`	指针
`anchor`	指针固定点
`detail`	中间详情
`data`	数据

11.9 热力图 heatmap 参数详解

js 复制代码

xAxis: {
  type: 'category',
  data: ['周一', '周二', '周三']
},
yAxis: {
  type: 'category',
  data: ['上午', '下午', '晚上']
},
visualMap: {
  min: 0,
  max: 100,
  calculable: true
},
series: [
  {
    type: 'heatmap',
    data: [
      [0, 0, 10],
      [0, 1, 50],
      [1, 0, 80]
    ]
  }
]

数据格式：

txt 复制代码

[xIndex, yIndex, value]

适合：

用户活跃时段
设备运行热度
区域热力分析
日历热力图

11.10 关系图 graph 参数详解

js 复制代码

series: [
  {
    type: 'graph',
    layout: 'force',
    roam: true,
    label: {
      show: true
    },
    data: [
      { name: '用户A', value: 10 },
      { name: '用户B', value: 20 }
    ],
    links: [
      { source: '用户A', target: '用户B' }
    ],
    force: {
      repulsion: 100
    }
  }
]

适合：

社交关系
知识图谱
系统调用链
组织关系

11.11 桑基图 sankey 参数详解

js 复制代码

series: [
  {
    type: 'sankey',
    data: [
      { name: '访问' },
      { name: '注册' },
      { name: '下单' }
    ],
    links: [
      { source: '访问', target: '注册', value: 100 },
      { source: '注册', target: '下单', value: 40 }
    ]
  }
]

适合：

用户转化路径
能源流向
资金流向
订单流程

十二、dataset 数据集参数详解

dataset 用于管理数据，可以让数据与图表配置分离。

12.1 不使用 dataset

js 复制代码

xAxis: {
  type: 'category',
  data: ['一月', '二月', '三月']
},
series: [
  {
    type: 'bar',
    data: [120, 200, 150]
  }
]

12.2 使用 dataset

js 复制代码

dataset: {
  source: [
    ['月份', '销售额', '利润'],
    ['一月', 120, 40],
    ['二月', 200, 80],
    ['三月', 150, 60]
  ]
},
xAxis: {
  type: 'category'
},
yAxis: {},
series: [
  {
    type: 'bar'
  },
  {
    type: 'bar'
  }
]

12.3 dataset 的好处

优点	说明
数据和配置分离	option 更清晰
多图表复用	多个 series 可以共用一份数据
适合接口数据	后端经常返回表格型数据
方便转换	可以结合 transform 做排序、过滤
更接近 BI 思维	维度和指标更清楚

12.4 dimensions 指定维度

js 复制代码

dataset: {
  dimensions: ['product', 'sales', 'profit'],
  source: [
    { product: 'A', sales: 120, profit: 40 },
    { product: 'B', sales: 200, profit: 80 }
  ]
}

12.5 encode 指定映射关系

js 复制代码

series: [
  {
    type: 'bar',
    encode: {
      x: 'product',
      y: 'sales'
    }
  }
]

12.6 dataset transform 排序

js 复制代码

dataset: [
  {
    source: [
      ['产品', '销量'],
      ['A', 120],
      ['B', 200],
      ['C', 80]
    ]
  },
  {
    transform: {
      type: 'sort',
      config: {
        dimension: '销量',
        order: 'desc'
      }
    }
  }
],
xAxis: {
  type: 'category'
},
yAxis: {},
series: [
  {
    type: 'bar',
    datasetIndex: 1
  }
]

十三、dataZoom 数据缩放参数详解

dataZoom 用于区域缩放，适合数据量较多的折线图、柱状图、K 线图。

13.1 基础用法

js 复制代码

dataZoom: [
  {
    type: 'slider',
    start: 0,
    end: 50
  },
  {
    type: 'inside'
  }
]

13.2 type 类型

类型	说明	交互方式
`slider`	显示滑动条	拖拽滑块
`inside`	内置缩放	鼠标滚轮、触控板、手势

13.3 常用参数

参数	说明	示例
`start`	起始百分比	`0`
`end`	结束百分比	`50`
`startValue`	起始数据值	`'2026-01-01'`
`endValue`	结束数据值	`'2026-01-31'`
`xAxisIndex`	控制哪个 x 轴	`0`、`[0, 1]`
`yAxisIndex`	控制哪个 y 轴	`0`
`filterMode`	过滤模式	`'filter'`、`'weakFilter'`、`'empty'`、`'none'`
`zoomLock`	是否锁定缩放比例	`true`
`showDetail`	是否显示详细数值	`true`
`height`	滑动条高度	`20`
`bottom`	底部位置	`10`

13.4 时间序列缩放

js 复制代码

xAxis: {
  type: 'time'
},
dataZoom: [
  {
    type: 'slider',
    startValue: '2026-01-01',
    endValue: '2026-01-31'
  },
  {
    type: 'inside'
  }
]

13.5 多图联动缩放

js 复制代码

dataZoom: [
  {
    type: 'slider',
    xAxisIndex: [0, 1],
    start: 0,
    end: 80
  }
]

十四、visualMap 视觉映射参数详解

visualMap 用于把数据值映射成颜色、大小、透明度等视觉效果。

常见场景：

地图颜色深浅
热力图颜色
散点图大小
风险等级颜色
数据分段展示

14.1 连续型 visualMap

js 复制代码

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  calculable: true,
  inRange: {
    color: ['#e0ffff', '#006edd']
  }
}

14.2 分段型 visualMap

js 复制代码

visualMap: {
  type: 'piecewise',
  pieces: [
    { min: 0, max: 20, label: '低', color: '#67C23A' },
    { min: 20, max: 60, label: '中', color: '#E6A23C' },
    { min: 60, max: 100, label: '高', color: '#F56C6C' }
  ]
}

14.3 常用参数

参数	说明	示例
`type`	类型	`'continuous'`、`'piecewise'`
`min` / `max`	最小值、最大值	`0`、`100`
`calculable`	是否可拖拽	`true`
`dimension`	映射维度	`2`
`seriesIndex`	作用于哪个系列	`0`
`inRange`	范围内视觉样式	`{ color: [] }`
`outOfRange`	范围外视觉样式	`{ color: '#ccc' }`
`pieces`	分段配置	`[{ min, max, color }]`
`left` / `top`	位置	`'left'`、`'bottom'`

14.4 散点图根据值改变大小

js 复制代码

visualMap: {
  min: 0,
  max: 100,
  dimension: 2,
  inRange: {
    symbolSize: [10, 60],
    color: ['#91CC75', '#EE6666']
  }
},
series: [
  {
    type: 'scatter',
    data: [
      [10, 20, 30],
      [20, 30, 80],
      [30, 40, 50]
    ]
  }
]

十五、toolbox 工具箱参数详解

toolbox 是图表右上角常见的操作工具箱。

15.1 基础用法

js 复制代码

toolbox: {
  feature: {
    saveAsImage: {},
    restore: {},
    dataView: {},
    dataZoom: {},
    magicType: {
      type: ['line', 'bar']
    }
  }
}

15.2 常用 feature

feature	说明
`saveAsImage`	保存为图片
`restore`	还原图表
`dataView`	数据视图
`dataZoom`	区域缩放
`magicType`	动态切换图表类型
`brush`	框选

15.3 完整示例

js 复制代码

toolbox: {
  show: true,
  right: 20,
  top: 10,
  feature: {
    saveAsImage: {
      title: '保存图片'
    },
    restore: {
      title: '还原'
    },
    dataView: {
      title: '数据视图',
      readOnly: false
    },
    magicType: {
      title: {
        line: '切换为折线图',
        bar: '切换为柱状图'
      },
      type: ['line', 'bar']
    }
  }
}

十六、graphic 自定义图形参数详解

graphic 可以在图表上添加自定义文字、图片、矩形、圆形等。

16.1 添加水印

js 复制代码

graphic: {
  type: 'text',
  left: 'center',
  top: 'middle',
  style: {
    text: '内部数据',
    fontSize: 40,
    fill: 'rgba(0, 0, 0, 0.08)'
  }
}

16.2 添加空状态提示

js 复制代码

graphic: {
  type: 'text',
  left: 'center',
  top: 'middle',
  silent: true,
  style: {
    text: '暂无数据',
    fontSize: 16,
    fill: '#999'
  }
},
series: []

16.3 动态空状态

js 复制代码

const hasData = list.length > 0

const option = {
  graphic: hasData
    ? []
    : {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          text: '暂无数据',
          fill: '#999',
          fontSize: 16
        }
      },
  series: hasData
    ? [
        {
          type: 'bar',
          data: list
        }
      ]
    : []
}

十七、常用图表完整配置示例

17.1 后台首页销售趋势图

js 复制代码

const option = {
  title: {
    text: '销售趋势',
    left: 20,
    top: 10
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  legend: {
    top: 12,
    right: 20,
    data: ['销售额', '利润']
  },
  grid: {
    top: 70,
    left: 20,
    right: 30,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#666'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 万'
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#eee'
      }
    }
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      showSymbol: false,
      data: [120, 200, 150, 300, 280, 360, 400],
      areaStyle: {
        opacity: 0.15
      }
    },
    {
      name: '利润',
      type: 'line',
      smooth: true,
      showSymbol: false,
      data: [50, 80, 60, 120, 110, 160, 180]
    }
  ]
}

17.2 排名横向柱状图

js 复制代码

const option = {
  title: {
    text: '城市销售额排行'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 20,
    right: 30,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 万'
    }
  },
  yAxis: {
    type: 'category',
    data: ['深圳', '广州', '杭州', '上海', '北京'],
    axisTick: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      data: [120, 160, 200, 260, 320],
      barWidth: 18,
      label: {
        show: true,
        position: 'right',
        formatter: '{c} 万'
      },
      itemStyle: {
        borderRadius: [0, 8, 8, 0]
      }
    }
  ]
}

17.3 环形占比图

js 复制代码

const option = {
  title: {
    text: '访问来源',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    bottom: 0
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['45%', '70%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: true,
      label: {
        formatter: '{b}\n{d}%'
      },
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '社交媒体' },
        { value: 484, name: '广告投放' }
      ]
    }
  ]
}

17.4 柱线混合图

js 复制代码

const option = {
  title: {
    text: '销售额与增长率'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额', '增长率'],
    top: 10
  },
  grid: {
    top: 70,
    left: 20,
    right: 50,
    bottom: 20,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月']
  },
  yAxis: [
    {
      type: 'value',
      name: '销售额',
      axisLabel: {
        formatter: '{value} 万'
      }
    },
    {
      type: 'value',
      name: '增长率',
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 300],
      barWidth: 28
    },
    {
      name: '增长率',
      type: 'line',
      yAxisIndex: 1,
      data: [10, 20, -5, 30],
      smooth: true
    }
  ]
}

十八、Vue3 中封装 ECharts

18.1 基础组件封装

vue 复制代码

<template>
  <div ref="chartRef" class="base-chart"></div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  option: {
    type: Object,
    required: true
  },
  theme: {
    type: String,
    default: ''
  },
  renderer: {
    type: String,
    default: 'canvas'
  }
})

const chartRef = ref(null)
let chartInstance = null
let resizeObserver = null

const initChart = async () => {
  await nextTick()

  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value, props.theme, {
    renderer: props.renderer
  })

  chartInstance.setOption(props.option)
}

const resizeChart = () => {
  chartInstance && chartInstance.resize()
}

watch(
  () => props.option,
  newOption => {
    if (!chartInstance || !newOption) return
    chartInstance.setOption(newOption, true)
  },
  {
    deep: true
  }
)

onMounted(() => {
  initChart()

  resizeObserver = new ResizeObserver(() => {
    resizeChart()
  })

  if (chartRef.value) {
    resizeObserver.observe(chartRef.value)
  }
})

onBeforeUnmount(() => {
  if (resizeObserver && chartRef.value) {
    resizeObserver.unobserve(chartRef.value)
  }

  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style scoped>
.base-chart {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style>

18.2 页面中使用

vue 复制代码

<template>
  <div class="page">
    <BaseChart :option="option" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import BaseChart from '@/components/BaseChart.vue'

const option = computed(() => ({
  title: {
    text: '销售趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [120, 200, 150]
    }
  ]
}))
</script>

<style scoped>
.page {
  width: 100%;
  height: 400px;
}
</style>

十九、React 中封装 ECharts

19.1 React 基础封装

jsx 复制代码

import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

export default function BaseChart({ option, theme = '', renderer = 'canvas' }) {
  const chartRef = useRef(null)
  const chartInstanceRef = useRef(null)

  useEffect(() => {
    if (!chartRef.current) return

    chartInstanceRef.current = echarts.init(chartRef.current, theme, {
      renderer
    })

    return () => {
      chartInstanceRef.current?.dispose()
      chartInstanceRef.current = null
    }
  }, [theme, renderer])

  useEffect(() => {
    if (!chartInstanceRef.current || !option) return
    chartInstanceRef.current.setOption(option, true)
  }, [option])

  useEffect(() => {
    const resize = () => {
      chartInstanceRef.current?.resize()
    }

    window.addEventListener('resize', resize)

    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [])

  return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
}

19.2 React 页面中使用

jsx 复制代码

import { useMemo } from 'react'
import BaseChart from './BaseChart'

export default function Dashboard() {
  const option = useMemo(() => {
    return {
      title: {
        text: '订单趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: [120, 200, 150]
        }
      ]
    }
  }, [])

  return (
    <div style={{ height: 400 }}>
      <BaseChart option={option} />
    </div>
  )
}

二十、后台管理系统图表实战思路

后台系统常见页面：

页面	图表类型
首页 Dashboard	指标卡、折线图、柱状图、饼图
用户分析	折线图、地图、漏斗图
订单分析	折线图、柱状图、排行图
商品分析	饼图、柱状图、矩形树图
财务分析	折线图、柱线混合图
运营活动	漏斗图、转化路径图
日志监控	折线图、热力图、表格联动

20.1 常见接口数据转换

接口返回：

js 复制代码

const res = [
  { date: '2026-01-01', count: 120 },
  { date: '2026-01-02', count: 200 },
  { date: '2026-01-03', count: 150 }
]

转换：

js 复制代码

const xData = res.map(item => item.date)
const yData = res.map(item => item.count)

const option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: yData
    }
  ]
}

20.2 图表和筛选条件联动

js 复制代码

const query = reactive({
  startDate: '',
  endDate: '',
  type: ''
})

const getChartData = async () => {
  const res = await api.getSalesData(query)

  option.value = {
    ...option.value,
    xAxis: {
      ...option.value.xAxis,
      data: res.map(item => item.date)
    },
    series: [
      {
        ...option.value.series[0],
        data: res.map(item => item.value)
      }
    ]
  }
}

20.3 点击图表进入详情

js 复制代码

chart.on('click', params => {
  router.push({
    path: '/sales/detail',
    query: {
      name: params.name
    }
  })
})

二十一、数据大屏 ECharts 实战思路

数据大屏重点不是单个图表，而是整体视觉、布局、数据节奏、性能和适配。

21.1 大屏常见模块

区域	内容
顶部	标题、当前时间、系统状态
左侧	排名、趋势、分类占比
中间	地图、核心指标、业务主视觉
右侧	告警、实时数据、转化
底部	滚动表格、趋势明细

21.2 大屏 option 风格建议

js 复制代码

const screenTheme = {
  backgroundColor: 'transparent',
  textStyle: {
    color: '#D6E8FF'
  },
  color: ['#00D8FF', '#1DE9B6', '#FFD166', '#FF6B6B']
}

21.3 大屏图表常见配置

js 复制代码

grid: {
  top: 40,
  left: 10,
  right: 10,
  bottom: 10,
  containLabel: true
},
xAxis: {
  axisLine: {
    lineStyle: {
      color: 'rgba(255,255,255,0.3)'
    }
  },
  axisLabel: {
    color: '#B8D8FF'
  }
},
yAxis: {
  splitLine: {
    lineStyle: {
      color: 'rgba(255,255,255,0.1)'
    }
  },
  axisLabel: {
    color: '#B8D8FF'
  }
}

21.4 大屏适配思路

常见方案：

scale 等比缩放。
rem / vw / vh 响应式。
图表容器统一 ResizeObserver。
图表初始化后延迟 resize()。
切换全屏后统一触发所有图表 resize()。

二十二、ECharts 性能优化

22.1 不要重复 init

错误：

js 复制代码

function updateChart(data) {
  const chart = echarts.init(document.getElementById('chart'))
  chart.setOption({
    series: [{ data }]
  })
}

正确：

js 复制代码

let chart = null

function initChart() {
  chart = echarts.init(document.getElementById('chart'))
}

function updateChart(data) {
  chart.setOption({
    series: [{ data }]
  })
}

22.2 页面销毁时 dispose

js 复制代码

onBeforeUnmount(() => {
  chart.dispose()
})

22.3 数据量大时关闭 symbol

js 复制代码

series: [
  {
    type: 'line',
    data: largeData,
    showSymbol: false
  }
]

22.4 使用采样

js 复制代码

series: [
  {
    type: 'line',
    data: largeData,
    sampling: 'lttb'
  }
]

22.5 使用 progressive 渐进渲染

js 复制代码

series: [
  {
    type: 'scatter',
    data: largeData,
    progressive: 5000,
    progressiveThreshold: 10000
  }
]

不建议在 formatter 中做大量计算：

js 复制代码

formatter(params) {
  // 不建议在这里做复杂排序、过滤、请求接口
}

推荐提前处理数据。

22.7 Canvas 与 SVG 选择

场景	推荐
普通后台图表	Canvas
数据量很大	Canvas
大屏复杂动效	Canvas
简单图表、需要清晰缩放	SVG
SSR 导出 SVG	SVG
移动端少量图表	SVG / Canvas 都可

22.8 高频实时刷新

js 复制代码

setInterval(() => {
  chart.setOption({
    series: [
      {
        data: newData
      }
    ]
  }, false)
}, 3000)

建议：

不要 100ms 级别频繁全量刷新。
只更新变化的 series.data。
关闭或缩短动画。
控制数据窗口长度。
旧数据及时裁剪。

二十三、常见问题排查

23.1 图表不显示

检查：

容器是否有宽高。
DOM 是否已经渲染。
是否调用 echarts.init()。
是否调用 setOption()。
series.type 是否正确。
数据格式是否正确。
是否在隐藏容器中初始化。

23.2 图表宽高为 0

错误：

html 复制代码

<div id="chart"></div>

正确：

css 复制代码

#chart {
  width: 100%;
  height: 400px;
}

23.3 弹窗里图表显示异常

原因：弹窗未打开时容器宽高为 0。

解决：

js 复制代码

nextTick(() => {
  chart.resize()
})

或：

js 复制代码

setTimeout(() => {
  chart.resize()
}, 300)

23.4 Tab 切换后图表变形

js 复制代码

watch(activeTab, () => {
  nextTick(() => {
    chart.resize()
  })
})

23.5 数据更新后图表没变

检查：

js 复制代码

chart.setOption(newOption)

如果结构变化很大：

js 复制代码

chart.setOption(newOption, true)

或者：

js 复制代码

chart.clear()
chart.setOption(newOption)

23.6 页面切换后报错

一般是没有销毁实例或事件监听。

js 复制代码

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chart.dispose()
})

二十四、学习资源、文档、社区与高级资源

24.1 官方资源

资源	链接	用途
Apache ECharts 官网	https://echarts.apache.org/	了解 ECharts 特性和入口
中文官网	https://echarts.apache.org/zh/index.html	中文学习入口
官方配置项文档	https://echarts.apache.org/zh/option.html	查询 `option` 所有参数
官方 API 文档	https://echarts.apache.org/zh/api.html	查询实例方法、事件、API
官方示例库	https://echarts.apache.org/examples/zh/index.html	找图表示例并修改
官方 Handbook	https://echarts.apache.org/handbook/zh/get-started/	系统学习 ECharts
安装与引入	https://echarts.apache.org/handbook/zh/basics/import/	学习 npm、CDN、按需引入
Cheat Sheet	https://echarts.apache.org/zh/cheat-sheet.html	快速查看常用组件和系列
主题下载	https://echarts.apache.org/zh/download-theme.html	下载官方主题
Theme Builder	https://echarts.apache.org/zh/theme-builder.html	在线制作自定义主题
更新日志	https://echarts.apache.org/zh/changelog.html	查看版本变化

24.2 官方 Handbook 专题

专题	链接	用途
Dataset	https://echarts.apache.org/handbook/zh/concepts/dataset/	学习数据集
Visual Map	https://echarts.apache.org/handbook/zh/concepts/visual-map/	学习视觉映射
Style	https://echarts.apache.org/handbook/zh/concepts/style/	学习样式定制
Event and Action	https://echarts.apache.org/handbook/zh/concepts/event/	学习事件和交互
Dynamic Data	https://echarts.apache.org/handbook/zh/how-to/data/dynamic-data/	学习动态数据更新
Canvas vs SVG	https://echarts.apache.org/handbook/zh/best-practices/canvas-vs-svg/	学习渲染器选择
Server-Side Rendering	https://echarts.apache.org/handbook/zh/how-to/cross-platform/server/	服务端渲染图表

24.3 GitHub 与源码资源

资源	链接	用途
Apache ECharts GitHub	https://github.com/apache/echarts	源码、Issue、版本管理
ECharts Handbook GitHub	https://github.com/apache/echarts-handbook	Handbook 文档源码
ECharts Theme Builder	https://github.com/apache/echarts-theme-builder	自定义主题构建工具
awesome-echarts	https://github.com/ecomfe/awesome-echarts	社区资源合集
ECharts GL	https://github.com/ecomfe/echarts-gl	3D 图表、地球、WebGL
Vue ECharts GitHub	https://github.com/ecomfe/vue-echarts	Vue 组件封装
echarts-for-react	https://github.com/hustcc/echarts-for-react	React 组件封装

24.4 Vue / React 相关资源

资源	链接	用途
Vue ECharts 官网	https://vue-echarts.dev/	Vue 项目快速接入 ECharts
Vue ECharts GitHub	https://github.com/ecomfe/vue-echarts	Vue ECharts 源码与文档
echarts-for-react	https://github.com/hustcc/echarts-for-react	React ECharts 封装
React 官方文档	https://react.dev/	React 基础
Vue 官方文档	https://cn.vuejs.org/	Vue3 基础

24.5 高级可视化资源

资源	链接	用途
ECharts GL	https://github.com/ecomfe/echarts-gl	3D 柱图、3D 散点、地球、WebGL
Mapbox GL JS	https://docs.mapbox.com/mapbox-gl-js/	地图底图和 GIS 可视化
Leaflet	https://leafletjs.com/	轻量地图开发
GeoJSON	https://geojson.org/	地图边界数据格式
DataV	https://datav.aliyun.com/	数据大屏设计参考
AntV	https://antv.antgroup.com/	阿里可视化方案
D3.js	https://d3js.org/	高自由度可视化
Observable	https://observablehq.com/	可视化案例和 Notebook

24.6 社区与问题搜索

资源	链接	用途
Stack Overflow ECharts	https://stackoverflow.com/questions/tagged/apache-echarts	查英文问题
GitHub Issues	https://github.com/apache/echarts/issues	查 Bug、提问题
掘金	https://juejin.cn/	中文实战文章
CSDN	https://www.csdn.net/	中文问题搜索
SegmentFault	https://segmentfault.com/	中文技术问答

二十五、ECharts 学习路线

第一阶段：入门基础

重点掌握：

安装 ECharts。
初始化图表。
理解 option。
使用 title、tooltip、legend。
使用 xAxis、yAxis。
使用 series。
制作折线图、柱状图、饼图。
学会 resize() 和 dispose()。

练习：

销售柱状图
访问量折线图
用户来源饼图

第二阶段：项目实战

重点掌握：

Vue / React 封装图表组件。
接口数据转换。
多图表页面管理。
图表点击事件。
tooltip 自定义。
dataZoom 数据缩放。
dataset 数据管理。
图表主题配置。
弹窗和 Tab 中图表 resize。
大屏布局适配。

练习：

后台 Dashboard
订单分析页面
用户分析页面
销售报表页面

第三阶段：进阶可视化

重点掌握：

visualMap 视觉映射。
地图 geo / map。
热力图。
关系图。
桑基图。
漏斗图。
自定义图形 graphic。
Canvas / SVG 选择。
性能优化。
ECharts GL。

练习：

城市销售地图
用户行为热力图
转化漏斗分析
物流流向桑基图
数据大屏项目

第四阶段：高级能力

重点掌握：

自定义主题。
大数据量渲染。
服务端渲染。
多图联动。
图表组件库封装。
企业级可视化规范。
BI 报表配置化。
图表低代码配置。
地图与 ECharts 结合。
可视化设计原则。

二十六、前端项目中推荐的 ECharts 工程结构

txt 复制代码

src/
├─ components/
│  └─ BaseChart/
│     ├─ index.vue
│     └─ types.ts
├─ hooks/
│  └─ useECharts.ts
├─ utils/
│  ├─ chartTheme.ts
│  ├─ chartResize.ts
│  └─ chartFormatter.ts
├─ views/
│  └─ dashboard/
│     ├─ index.vue
│     ├─ options.ts
│     └─ api.ts
└─ types/
   └─ chart.ts

文件	作用
`BaseChart.vue`	通用图表组件
`useECharts.ts`	图表初始化、更新、销毁 Hook
`chartTheme.ts`	图表主题
`chartFormatter.ts`	tooltip、单位格式化
`options.ts`	页面图表配置
`api.ts`	获取接口数据

二十七、常用 formatter 工具函数

27.1 金额格式化

js 复制代码

export function formatMoney(value) {
  if (value == null) return '-'

  if (value >= 100000000) {
    return (value / 100000000).toFixed(2) + '亿'
  }

  if (value >= 10000) {
    return (value / 10000).toFixed(2) + '万'
  }

  return value.toString()
}

27.2 百分比格式化

js 复制代码

export function formatPercent(value) {
  if (value == null) return '-'
  return value + '%'
}

js 复制代码

export function createAxisTooltip(unit = '') {
  return function(params) {
    const title = params[0]?.axisValue || ''
    const list = params
      .map(item => {
        return `${item.marker}${item.seriesName}：${item.value}${unit}`
      })
      .join('<br/>')

    return `${title}<br/>${list}`
  }
}

使用：

js 复制代码

tooltip: {
  trigger: 'axis',
  formatter: createAxisTooltip('万元')
}

二十八、ECharts 面试常见问题

1. ECharts 图表不显示一般是什么原因？

常见原因：

容器没有宽高。
DOM 还没有渲染完成。
没有调用 setOption()。
数据格式错误。
在隐藏容器中初始化。
图表实例被销毁后又继续调用方法。

2. Vue 中使用 ECharts 要注意什么？

重点：

onMounted 后初始化。
容器必须有宽高。
数据变化用 setOption。
页面销毁时 dispose。
弹窗、Tab、折叠面板中要调用 resize。
不要重复 init。

3. setOption 第二个参数有什么用？

js 复制代码

chart.setOption(option, true)

第二个参数为 true 时，表示不合并旧配置，适合图表结构发生明显变化的场景。

4. Canvas 和 SVG 如何选择？

大数据量、复杂动画、大屏推荐 Canvas。
简单图表、需要 SVG 导出、高清缩放推荐 SVG。
大多数普通后台系统使用默认 Canvas 即可。

5. 如何优化大数据量折线图？

showSymbol: false
sampling: 'lttb'
使用 dataZoom
减少 tooltip 复杂度
关闭动画
分页或裁剪数据
使用 Canvas 渲染

二十九、总结

ECharts 学习重点可以概括为：

txt 复制代码

1. 会初始化：echarts.init()
2. 会配置：option
3. 会更新：setOption()
4. 会适配：resize()
5. 会销毁：dispose()
6. 会封装：Vue / React 通用组件
7. 会处理数据：接口数据 -> 图表数据
8. 会做交互：click、tooltip、legend、dataZoom
9. 会做优化：大数据量、动画、Canvas/SVG
10. 会查文档：option、API、examples、handbook

最重要的参数优先级：

txt 复制代码

series > xAxis/yAxis > tooltip > legend > grid > dataset > dataZoom > visualMap > toolbox > graphic

建议学习顺序：

txt 复制代码

折线图 -> 柱状图 -> 饼图 -> tooltip/legend/grid -> dataset -> dataZoom -> visualMap -> 地图/热力图/关系图 -> Vue/React 封装 -> 性能优化 -> 数据大屏

只要把 option 的结构理解清楚，ECharts 就不是记忆配置，而是根据业务需求组合配置。

ECharts 前端图表开发全攻略：参数配置、项目实战与高级可视化资源整理

Apache ECharts 图表参数详解与前端实战完整指南

目录

一、ECharts 是什么

二、前端如何安装和使用 ECharts

2.1 原生 HTML 使用

2.2 npm 安装

2.3 Vue / React 项目中完整引入

2.4 按需引入

三、ECharts 核心运行流程

四、option 配置整体结构详解

4.1 完整 option 骨架

4.2 option 一级配置项分类

五、全局参数详解

5.1 color：全局色盘

5.2 backgroundColor：背景色

5.3 textStyle：全局文字样式

5.4 animation：是否开启动画

六、标题 title 参数详解

6.1 基础用法

6.2 常用参数表

6.3 标题样式示例

6.4 数据大屏标题样式

七、图例 legend 参数详解

7.1 基础用法

7.2 常用参数表

7.3 多图例滚动

7.4 单选图例

7.5 默认隐藏某个图例

八、提示框 tooltip 参数详解

8.1 基础用法

8.2 trigger 触发方式

8.3 axisPointer 指示器

8.4 formatter 字符串模板

8.5 formatter 函数写法

8.6 后台项目常用 tooltip

8.7 tooltip 常见问题

tooltip 显示 [object Object]

tooltip 内容太多

tooltip 遮挡图表

九、网格 grid 参数详解

9.1 基础用法

9.2 常用参数表

9.3 containLabel 的作用

9.4 标签较长时的 grid

十、坐标轴 xAxis / yAxis 参数详解

10.1 坐标轴 type

10.2 类目轴示例

10.3 时间轴示例

10.4 坐标轴常用参数表

10.5 axisLine 轴线

10.6 axisTick 刻度线

10.7 axisLabel 标签

10.8 splitLine 分割线

10.9 多 y 轴

十一、系列 series 参数详解

11.1 series 基础结构

11.2 series 通用参数表

11.3 折线图 line 参数详解

基础折线图

line 常用参数

平滑折线 + 面积图

带最大值、最小值、平均线

11.4 柱状图 bar 参数详解

基础柱状图

bar 常用参数

圆角柱状图

堆叠柱状图

横向柱状图

11.5 饼图 pie 参数详解

基础饼图

pie 常用参数

环形图

玫瑰图

11.6 散点图 scatter 参数详解

11.7 雷达图 radar 参数详解

11.8 仪表盘 gauge 参数详解

11.9 热力图 heatmap 参数详解

11.10 关系图 graph 参数详解

11.11 桑基图 sankey 参数详解

5.1 `color`：全局色盘

5.2 `backgroundColor`：背景色

5.3 `textStyle`：全局文字样式

5.4 `animation`：是否开启动画

tooltip 显示 `[object Object]`