本文档全面介绍了 ECharts 的配置项分类、常用图表配置模板以及项目最佳实践，帮助开发者快速上手并掌握 ECharts 的高级用法。

目录

ECharts 简介

ECharts（Enterprise Charts）是百度开源的一个基于 JavaScript 的数据可视化图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。

主要特性

  • 丰富的图表类型：支持 30+ 种图表类型
  • 强大的交互功能：缩放、平移、高亮、提示框等
  • 灵活的配置项：高度可定制的图表样式
  • 响应式设计：自动适配不同屏幕尺寸
  • 性能优化：支持大数据量渲染

基础配置项

标题 (title)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
title: {
    // ============== 基础属性 ==============
    text: '2025年第一季度销售数据',    // 主标题内容 
    textStyle: {                        // 主标题样式配置 
        color: '#2c3e50',               // 文字颜色（支持HEX/RGB/RGBA）
        fontSize: 24,                   // 字号（单位：px）
        fontWeight: 'bold',             // 字重（normal/bold/bolder/lighter/数字）
        fontFamily: 'Arial',            // 字体栈（优先使用字体）
        lineHeight: 30                  // 行高（单位：px）
    },
    
    // ============== 副标题系统 ==============
    subtext: '数据来源：企业ERP系统',    // 副标题文本内容 
    subtextStyle: {                     // 副标题样式配置 
        color: '#7f8c8d',               // 副标题颜色 
        fontSize: 16,                   // 副标题字号 
        align: 'right'                  // 对齐方式（left/center/right）
    },
    
    // ============== 定位系统 ==============
    left: 'center',                     // 水平定位（px/百分比/'left'/'center'/'right'）
    top: 20,                            // 垂直定位（px/百分比/'top'/'middle'/'bottom'）
    padding: [10, 20],                  // 内边距（[上下, 左右] 或 [上,右,下,左]）
    zlevel: 0,                          // 图形层级（用于叠加控制）
    
    // ============== 装饰属性 ==============
    borderColor: '#3498db',             // 边框颜色（支持渐变色）
    borderWidth: 2,                     // 边框宽度（单位：px）
    borderRadius: 8,                    // 圆角半径（单位：px）
    backgroundColor: '#f9f9f9',         // 背景色（支持渐变色）
    
    // ============== 交互扩展 ==============
    link: 'https://example.com',        // 超链接地址（支持JS函数）
    target: 'blank',                    // 打开方式（'self'当前页/'blank'新窗口）
    itemGap: 15,                        // 主副标题间距（单位：px）
    triggerEvent: true,                 // 是否触发事件（点击/悬浮等）
    
    // ============== 阴影系统 ==============
    shadowColor: 'rgba(0,0,0,0.1)',     // 阴影颜色（RGBA格式）
    shadowBlur: 10,                     // 阴影模糊度（单位：px）
    shadowOffsetX: 3,                   // 水平偏移量（单位：px）
    shadowOffsetY: 3                    // 垂直偏移量（单位：px）
}

提示框 (tooltip)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
tooltip: {
    // ============== 基础配置 ==============
    trigger: 'axis',                    // 触发类型（'item'数据项/'axis'坐标轴/'none'不触发）
    triggerOn: 'mousemove',             // 触发条件（'click'点击触发/'mousemove'悬停）
    showContent: true,                  // 是否显示内容框（用于条件过滤）
    alwaysShowContent: false,           // 是否始终显示（需配合隐藏动画使用）
    showDelay: 0,                       // 显示延迟（单位：ms，防抖动优化）
    hideDelay: 100,                     // 隐藏延迟（单位：ms，提升交互流畅度）
    
    // ============== 内容格式化 ==============
    formatter: (params) => {            // 自定义内容模板（支持字符串模板/回调函数）
        return `销售额：¥${params[0].value}<br>同比：+${params[0].dataIndex * 7}%`;
    },
    textStyle: {                        // 文本样式配置 
        color: '#2c3e50',               // 文字颜色 
        fontSize: 14,                   // 基础字号 
        lineHeight: 20,                 // 行高（单位：px）
        rich: {                         // 富文本样式（多格式混合）
            warn: { color: 'red', fontWeight: 'bold' },
            highlight: { backgroundColor: '#FFEB3B', padding: 2 }
        }
    },
    
    // ============== 样式定制 ==============
    backgroundColor: 'rgba(255,255,255,0.95)',  // 背景色（支持渐变色）
    borderColor: '#ddd',                // 边框颜色 
    borderWidth: 1,                     // 边框宽度（单位：px）
    borderRadius: 8,                    // 圆角半径（单位：px）
    shadowColor: 'rgba(0,0,0,0.1)',     // 阴影颜色 
    shadowBlur: 10,                     // 阴影模糊度 
    shadowOffsetX: 3,                   // 水平偏移 
    shadowOffsetY: 3,                   // 垂直偏移 
    padding: [12, 18],                  // 内边距[上下，左右]
    
    // ============== 定位系统 ==============
    position: (point, params, dom, rect, size) => {
        // 动态定位函数（避免超出画布）
        return [point[0] + 20, point[1] - 40];
    },
    confine: true,                      // 强制限制在图表区域内 
    transitionDuration: 0.4,            // 动画过渡时间（单位：s）
    
    // ============== 高级交互 ==============
    axisPointer: {                      // 坐标轴指示器 
        type: 'line',                   // 类型（'line'直线/'shadow'阴影/'cross'十字）
        animation: true,                // 是否开启动画 
        lineStyle: {                    // 线样式 
            color: '#3498db',
            type: 'dashed'
        },
        shadowStyle: {                  // 阴影样式 
            color: 'rgba(150,150,150,0.3)'
        }
    },
    extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15);' // 自定义CSS
}

图例 (legend)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
legend: {
    // ============== 基础配置 ==============
    type: 'plain',                      // 图例类型（'plain'普通/'scroll'可滚动）
    data: ['销量', '库存', '增长率'],    // 图例数据项（需与series匹配）
    selected: {                         // 初始选中状态 
        '销量': true, 
        '库存': false                   // 默认不显示库存系列 
    },
    selectedMode: 'multiple',           // 选择模式（'single'单选/'multiple'多选/false禁用）
    
    // ============== 布局定位 ==============
    left: 'right',                      // 水平定位（'left'/'center'/'right'/像素值/百分比）
    top: '5%',                          // 垂直定位（'top'/'middle'/'bottom'/像素值/百分比）
    orient: 'horizontal',               // 排列方向（'horizontal'水平/'vertical'垂直）
    itemGap: 20,                        // 图例项间隔（单位：px）
    itemWidth: 25,                      // 图例标记图形宽度 
    itemHeight: 14,                     // 图例标记图形高度 
    
    // ============== 样式系统 ==============
    backgroundColor: 'rgba(249,249,249,0.9)',  // 背景色（支持渐变色）
    borderColor: '#ddd',                // 边框颜色 
    borderWidth: 1,                     // 边框宽度 
    borderRadius: 8,                    // 圆角半径 
    shadowColor: 'rgba(0,0,0,0.08)',    // 阴影颜色 
    shadowBlur: 12,                     // 阴影模糊度 
    padding: [10, 15],                  // 内边距[上下，左右]
    
    // ============== 文本系统 ==============
    textStyle: {                        // 全局文本样式 
        color: '#666', 
        fontSize: 12,
        rich: {                         // 富文本配置 
            unit: { color: '#3498db', padding: [0,5] }
        }
    },
    formatter: (name) => {              // 自定义文本格式 
        return `{unit|▶} ${name}`;      // 带图标的富文本 
    },
    
    // ============== 图标系统 ==============
    icon: 'circle',                     // 图标类型（'circle'圆/'rect'矩形/'path://SVG路径'）
    itemStyle: {                        // 图标样式 
        borderWidth: 2,
        borderColor: '#fff'
    },
    
    // ============== 分页系统 ============== 
    pageIcons: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],  // 分页箭头SVG 
    pageIconColor: '#2c3e50',           // 分页箭头颜色 
    pageIconInactiveColor: '#aaa',      // 禁用状态颜色 
    pageIconSize: 15,                   // 分页箭头尺寸 
    pageButtonItemGap: 8,               // 分页按钮间距 
    pageButtonGap: 12,                  // 分页按钮与图例间距 
    
    // ============== 交互系统 ==============
    tooltip: {                          // 图例项提示框 
        show: true,
        formatter: '点击切换显示状态'
    },
    emphasis: {                         // 高亮状态样式 
        itemStyle: { borderColor: '#3498db' },
        textStyle: { color: '#2c3e50' }
    }
}

网格 (grid)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
grid: {
    // ============== 基础定位 ==============
    id: 'mainGrid',                     // 唯一标识（多坐标系时必填）
    show: true,                         // 是否显示网格区域 
    zlevel: 0,                          // 层级控制（用于叠加时管理绘制顺序）
    containLabel: true,                 // 是否包含坐标轴标签（防止标签溢出）
    
    // ============== 四向定位系统 ==============
    left: '12%',                        // 左侧边距（像素/百分比/'left'/'center'/'right'）
    right: 80,                          // 右侧边距（支持数值/百分比）
    top: 60,                            // 顶部边距（动态计算示例：`() => window.innerHeight*0.1` ）
    bottom: '15%',                      // 底部边距（混合单位使用场景）
    width: 'auto',                      // 自定义宽度（覆盖left/right计算）
    height: 'auto',                     // 自定义高度（覆盖top/bottom计算）
 
    // ============== 视觉呈现 ==============
    backgroundColor: 'rgba(255,255,255,0.1)',  // 网格区域背景（支持渐变色）
    borderColor: '#3498db',             // 边框颜色（企业级场景推荐使用品牌色）
    borderWidth: 1,                     // 边框宽度（单位：px）
    shadowColor: 'rgba(0,0,0,0.06)',    // 阴影颜色（大屏场景增强立体感）
    shadowBlur: 12,                     // 阴影模糊度 
    shadowOffsetX: 3,                   // 水平偏移量 
    shadowOffsetY: 3,                   // 垂直偏移量 
    
    // ============== 高级布局 ==============
    tooltip: {                          // 网格级别tooltip（v5.3+特性）
        show: true,
        trigger: 'axis',
        formatter: '区域数值汇总：{c}'
    },
    axisLine: {                         // 轴线扩展配置 
        show: false,                    // 是否显示基准线 
        lineStyle: { color: '#eee' }
    }
}

坐标轴 (xAxis/yAxis)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
xAxis: {
    // ============== 基础配置 ==============
    id: 'sales_x',                      // 坐标轴唯一标识（多坐标系必填）
    type: 'category',                   // 数据类型（'category'类目/'value'数值/'time'时间）
    name: '月份',                       // 坐标轴名称 
    nameLocation: 'end',                // 名称位置（'start'起始/'middle'居中/'end'末端）
    nameGap: 35,                        // 名称与轴线间距（单位：px）
    inverse: false,                     // 是否反向坐标轴（金融场景常用）
    
    // ============== 样式系统 ==============
    axisLine: {                         // 轴线样式 
        show: true,                     // 是否显示轴线 
        lineStyle: {
            color: '#3498db',           // 轴线颜色 
            width: 2,                   // 轴线宽度 
            type: 'solid'               // 线型（'solid'/'dashed'/'dotted'）
        }
    },
    axisTick: {                         // 刻度线配置 
        show: true,                     // 是否显示刻度 
        alignWithLabel: true,           // 与标签对齐 
        length: 6,                      // 刻度长度（单位：px）
        inside: false                   // 刻度朝内显示 
    },
    
    // ============== 刻度系统 ==============
    min: 'dataMin',                     // 最小值（可设具体值/'dataMin'数据最小）
    max: 'dataMax',                     // 最大值（可设具体值/'dataMax'数据最大）
    splitNumber: 5,                     // 分割段数（预估值）
    interval: 'auto',                   // 强制间隔（数值/函数/'auto'自动计算）
    
    // ============== 标签系统 ==============
    data: ['1月','2月','3月','4月'],     // 类目数据（type='category'时必需）
    axisLabel: {                        // 刻度标签 
        show: true,                     // 显示开关 
        color: '#666',                  // 文字颜色 
        fontSize: 12,                   // 字号（支持回调函数动态设置）
        rotate: 45,                     // 旋转角度（-90~90）
        formatter: (value, index) => {  // 自定义格式 
            return `${value}月份`; 
        },
        margin: 15                      // 标签与轴线间距 
    },
    
    // ============== 轴线与分隔线 ==============
    splitLine: {                        // 网格线（纵向）
        show: true,                     // 显示开关 
        lineStyle: {
            color: '#eee',              // 网格线颜色 
            type: 'dashed'              // 线型选择 
        }
    },
    splitArea: {                        // 区域分隔（斑马纹）
        show: false,                    // 显示开关 
        areaStyle: {                    // 区域样式 
            color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
        }
    },
    
    // ============== 动态交互 ==============
    silent: false,                      // 是否响应鼠标事件 
    triggerEvent: true                  // 允许触发事件（点击/悬浮等）
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
yAxis: {
    // ============== 基础特性（与xAxis不同） ==============
    position: 'left',                   // 定位方向（'left'/'right'，xAxis为'top'/'bottom'）
    nameLocation: 'middle',             // 名称默认居中（xAxis默认在末端）
    nameRotate: 90,                     // 名称旋转角度（垂直轴特殊配置）
 
    // ============== 数值轴专属配置 ==============
    scale: false,                       // 是否脱离0值比例（适用于正负数据共存场景）
    type: 'value',                      // 默认类型为数值轴（xAxis常为category）
    logBase: 10,                        // 对数轴底数（type='log'时生效）
 
    // ============== 刻度系统增强 ==============
    axisLabel: {                        // 标签特殊配置 
        position: 'insideLeft',         // 标签位置（'insideLeft'/'insideRight'）
        verticalAlign: 'middle'         // 垂直对齐方式（垂直轴特有）
    },
    
    // ============== 高级数值处理 ==============
    boundaryGap: [0, 0.1],              // 数值轴两端留白策略（与类目轴不同）
    minInterval: 0.5,                   // 最小间隔（防止自动计算过密）
 
    // ============== 企业级配置扩展 ==============
    splitArea: {                        // 区域分割（常用于K线图）
        show: true,                      // 默认显示（xAxis通常隐藏）
        areaStyle: { color: ['rgba(200,200,200,0.05)'] }
    }
}

系列 (series)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
series: {
    // ============== 核心标识 ==============
    id: 'sales_forecast',               // 系列唯一标识（必填于多系列交互场景）
    name: '预测销量',                   // 系列名称（与legend对应）
    type: 'line',                       // 图表类型（'line'/'bar'/'pie'/'scatter'等）
    coordinateSystem: 'cartesian2d',    // 坐标系类型（'polar'/'geo'等）
 
    // ============== 数据系统 ==============
    data: [                             // 数据集合（支持多维数组）
        { value: 150, name: 'Q1', itemId: '2025q1' },  // 数据项扩展属性 
        [120, 240, 'Q2'],                // 简写模式（x,y,name）
        () => fetchData()                // 动态数据绑定（2025年实时流标准）
    ],
    dimensions: ['时间', '销量', '增长率'],  // 数据维度声明（智能解析）
    datasetIndex: 0,                    // 关联数据集（大数据量优化方案）
 
    // ============== 视觉映射 ==============
    colorBy: 'data',                    // 着色策略（'series'系列色/'data'数据驱动）
    encode: {                           // 数据维度映射 
        x: '时间', 
        y: '销量',
        tooltip: [1, 2]                 // 指定显示维度 
    },
    
    // ============== 样式系统 ==============
    lineStyle: {                        // 折线图专属（type='line'）
        type: 'dashed',                 // 线型（'solid'/'dashed'/'dotted'）
        curveness: 0.5,                 // 弧度（0-1，树图布局关键参数）
        opacity: 0.8 
    },
    itemStyle: {                        // 通用样式（颜色/边框等）
        borderCap: 'round',             // 端点形态（'butt'/'round'/'square'）
        shadowBlur: 10                  // 投影增强立体感 
    },
    
    // ============== 标记系统 ==============
    markPoint: {                        // 特殊标记点 
        data: [
            { type: 'max', name: '峰值' },
            { coord: [3, 420], itemStyle: { color: '#e74c3c' } }
        ]
    },
    markArea: {                         // 标记区域（突出显示区间）
        data: [[{ xAxis: '1月' }, { xAxis: '3月' }]]
    },
    
    // ============== 动态行为 ==============
    animation: true,                    // 开启动画（大数据建议关闭）
    animationThreshold: 2000,           // 动画元素阈值（性能优化）
    universalTransition: true,          // 全局过渡动画（2025年新版特性）
    
    // ============== 高级交互 ==============
    triggerLineEvent: true,             // 触发折线点击事件 
    selectedMode: 'multiple',           // 多选模式（与legend联动）
    silent: false,                      // 响应鼠标事件 
    zlevel: 1                           // 层级控制（覆盖关系管理）
}

工具箱 (toolbox)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
toolbox: {
    // ============== 基础配置 ==============
    show: true,                         // 全局显示开关（可动态控制）
    orient: 'horizontal',               // 排列方向（'horizontal'/'vertical'）
    itemSize: 15,                       // 工具图标尺寸（响应式适配关键参数）
    itemGap: 10,                        // 图标间距（单位：px）
    zlevel: 0,                          // 层级控制（用于覆盖关系管理）
    
    // ============== 图标系统 ==============
    iconStyle: {                        // 常态图标样式 
        borderColor: '#666', 
        opacity: 0.8 
    },
    emphasisStyle: {                    // 高亮状态样式 
        borderColor: '#3498db',
        opacity: 1 
    },
    
    // ============== 功能模块 ==============
    feature: {
        // 数据操作
        saveAsImage: {                  // 保存图片 
            type: 'png',                // 格式（'png'/'jpeg'/'svg'）
            name: '2025_Q1_Report',     // 默认文件名 
            backgroundColor: 'rgba(255,255,255,0.95)',  // 透明背景需用'svg'
            excludeComponents: ['tooltip'],  // 排除元素 
            pixelRatio: window.devicePixelRatio > 2 ? 3 : 1  // 高DPI适配 
        },
        
        // 视图控制
        dataView: {                     // 数据视图 
            readOnly: true,             // 防篡改模式（金融场景必需）
            optionToContent: (opt) => JSON.stringify(opt, null, 2),
            lang: ['数据视图', '关闭', '刷新']  // 多语言支持 
        },
        
        // 动态切换
        magicType: {                    // 类型切换 
            type: ['line', 'bar', 'pie'],  // 可选类型 
            seriesIndex: {              // 指定系列转换规则 
                pie: [1, 2]             // 仅转换第2、3个系列 
            }
        },
        
        // 区域操作
        brush: {                        // 笔刷工具 
            type: ['rect', 'polygon', 'lineX'],  // 选择模式 
            icon: {                     // 自定义图标（SVG Path）
                rect: 'M0 0L20 0L20 20L0 20Z',
                lineX: 'M0 10L20 10'
            }
        },
        
        // 高级功能
        dataZoom: {                     // 区域缩放 
            filterMode: 'weakFilter'    // 数据过滤模式 
        },
        restore: {                      // 重置按钮 
            title: '恢复初始视图'
        }
    },
    
    // ============== 定位系统 ==============
    left: 'right',                      // 定位基准（'left'/'center'/'right'）
    top: 'top',                         // 垂直定位（支持像素/百分比）
    right: 20,                          // 精确偏移（混合定位场景）
    width: 'auto'                       // 自适应宽度（垂直模式需固定值）
}

数据区域缩放 (dataZoom)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
dataZoom: {
    // ============== 核心配置 ==============
    type: 'slider',                     // 类型（'slider'滑动条/'inside'内置缩放）
    filterMode: 'filter',               // 数据过滤模式（'filter'过滤/'weakFilter'不过滤数据）
    orient: 'horizontal',               // 方向（'horizontal'/'vertical'）
    throttle: 100,                      // 事件触发间隔（单位：ms，高频数据建议>200）
    
    // ============== 范围控制 ==============
    start: 20,                          // 初始缩放起点（百分比）
    end: 80,                            // 初始缩放终点（百分比）
    minSpan: 10,                        // 最小缩放跨度（百分比）
    maxSpan: 100,                       // 最大缩放跨度（百分比）
    
    // ============== 多轴联动 ==============
    xAxisIndex: [0],                    // 控制x轴索引（支持多轴[0,1]）
    yAxisIndex: [1],                    // 控制y轴索引（三维图表配置）
    radiusAxisIndex: 0,                 // 极坐标系半径轴控制 
    angleAxisIndex: 0,                  // 极坐标系角度轴控制 
    
    // ============== 视觉系统 ==============
    backgroundColor: 'rgba(240,240,240,0.9)',  // 背景色 
    fillerColor: 'rgba(52,152,219,0.3)',       // 选中区域填充色 
    borderColor: '#ddd',                // 边框颜色 
    handleSize: '100%',                 // 手柄尺寸（像素/百分比）
    handleStyle: {                      // 手柄样式 
        color: '#3498db', 
        borderWidth: 2 
    },
    
    // ============== 标签系统 ==============
    showDetail: true,                   // 显示缩放数值 
    textStyle: {                        // 标签样式 
        color: '#666',
        fontSize: 12 
    },
    zoomLock: false                     // 锁定缩放比例（金融K线图常用）
}

动画 (animation)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
animation: {
    // ============== 基础配置 ==============
    show: true,                         // 全局动画开关（性能敏感场景建议关闭）
    duration: 1000,                     // 初始动画时长（单位：ms，建议范围：800-1500）
    easing: 'elasticOut',               // 缓动效果（'linear'/'cubicIn'/'elasticOut'等）
    delay: 300,                         // 动画延迟（大数据分块加载场景使用）
    threshold: 2000,                    // 动画元素数量阈值（超限自动关闭）
    
    // ============== 高级动画控制 ==============
    animationDurationUpdate: 800,       // 数据更新动画时长 
    animationEasingUpdate: 'cubicInOut', // 更新动画缓动 
    animationDelayUpdate: (idx) => idx * 50, // 动态延迟（分步动画效果）
    
    // ============== 企业级动画策略 ==============
    splitAnimation: {                   // 分块动画（百万级数据优化）
        enable: true,
        chunkSize: 5000,                // 单帧渲染数据量 
        interval: 16                    // 帧间隔（保持60FPS）
    },
    progressiveAnimation: {             // 渐进式动画（流数据场景）
        enable: true,
        loopCount: 3                    // 新数据强调动画次数 
    }
}

背景色 (backgroundColor)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
backgroundColor: {
    // ============== 基础配置 ==============
    color: '#FFFFFF',                   // 基础颜色值（支持所有CSS颜色格式）
    image: 'url(./grid.png)',           // 背景图像（支持base64/URL/Image对象）
    repeat: 'no-repeat',                // 图像平铺方式（'repeat-x'/'repeat-y'）
    
    // ============== 高级填充效果 ==============
    gradient: {                         // 渐变配置（2025年增强型API）
        type: 'linear',                 // 渐变类型（'linear'/'radial'）
        angle: 45,                      // 线性渐变角度（0-360）
        stops: [                        // 色阶配置 
            { offset: 0, color: '#2c3e50' }, 
            { offset: 1, color: '#3498db' }
        ]
    },
    blendMode: 'multiply',              // 混合模式（与下层元素叠加效果）
    
    // ============== 响应式适配 ==============
    adaptive: {                         // 智能适配策略（移动端/大屏专用）
        darkMode: true,                 // 自动切换暗黑模式 
        brightnessThreshold: 0.5        // 环境光感应阈值 
    },
    
    // ============== 安全控制 ==============
    watermark: {                        // 数字水印系统（企业级安全方案）
        text: 'Confidential',
        opacity: 0.15,
        fontSize: 40 
    }
}

主题 (theme)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
theme: {
    // ============== 基础视觉系统 ==============
    colorPalette: {                     // 全局调色板（2025增强型）
        primary: ['#2ecc71', '#3498db', '#9b59b6'],  // 主色系 
        secondary: ['#e74c3c', '#f1c40f', '#1abc9c'],// 辅助色 
        gradient: ['#2c3e50', '#3498db']             // 渐变基准色 
    },
    textStyle: {                        // 全局文字规范 
        fontFamily: 'GeoEdit',          // 2025标准字体（支持可变字体）
        fontSize: 14,
        fontWeight: 'dynamic'           // 根据设备性能自动调节 
    },
 
    // ============== 组件主题引擎 ==============
    component: {                        // 组件级主题覆盖 
        title: {                        // 标题系统 
            color: '#2c3e50',
            subtextStyle: { fontSize: 12 }
        },
        legend: {                       // 图例系统 
            inactiveColor: 'rgba(200,200,200,0.5)',
            pageIconColor: '#3498db'
        },
        toolbox: {                      // 工具栏 
            iconSize: 'dynamic'         // 基于DPI自适应 
        }
    },
 
    // ============== 系列类型模板 ==============
    seriesTemplate: {                   // 系列默认配置 
        line: {                         // 折线图 
            symbolSize: 'adaptive',     // 基于数据密度自动调节 
            lineWidth: 2.5 
        },
        bar: {                          // 柱状图 
            itemStyle: { borderRadius: [4, 4, 0, 0] }
        },
        pie: {                          // 饼图 
            roseType: 'dynamic'         // 智能玫瑰图切换 
        }
    },
 
    // ============== 高级主题特性 ==============
    adaptiveTheme: {                    // 环境敏感主题 
        darkMode: {                     // 暗黑模式 
            backgroundColor: '#1a1a1a',
            textColor: 'rgba(255,255,255,0.9)'
        },
        printMode: {                    // 打印优化 
            colorScheme: 'grayscale',
            simplify: true 
        }
    },
    animationProfile: 'scientific',     // 科学可视化动效方案 
    securityMark: {                     // 安全标识系统 
        digitalWatermark: 'geo-encrypted' // 地理加密水印 
    }
}

特殊配置项

折线图 (line)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 基础折线图（时序数据）
{
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    // 核心样式配置 
    lineStyle: {
        width: 2.8,           // 线宽（建议范围：1.5-3.5）
        type: 'solid'         // 线型（可选：'dashed'/'dotted'）
    },
    itemStyle: {
        borderWidth: 2.5      // 数据点边框粗细 
    }
}

// 平滑折线图
{
    type: 'line',
    smooth: true,             // 启用贝塞尔曲线平滑 
    smoothness: 0.35,         // 曲率系数（0.2-0.6为佳）
    animation: {
        easing: 'quadraticOut' // 平滑动画曲线 
    }
}

// 阶梯折线图
{
    type: 'line',
    step: 'middle',           // 阶梯对齐方式 
    connectNulls: true,       // 空值连接策略 
    symbol: 'circle',         // 圆形数据点标记 
    lineStyle: {
        dashArray: [5, 3]     // 虚线样式（实部/虚部长度）
    }
}

// 区域填充折线图
{
    type: 'line',
    areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84,112,198,0.8)' },
            { offset: 1, color: 'rgba(84,112,198,0.02)' }
        ]),
        shadowBlur: 12,       // 投影模糊度 
        shadowColor: 'rgba(0,0,0,0.15)'
    },
    emphasis: {               // 高亮状态 
        areaStyle: {
            opacity: 0.5      // 交互时透明度变化 
        }
    }
}

柱状图 (bar)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 普通柱状图
{
    type: 'bar',
    barWidth: () => {
        const base = Math.min(40, window.chartWidth / 15); // 动态计算基础宽度 
        return currentData.length > 50 ? `${base}px` : '30%';
    },
    barGap: '15%',  // 柱间动态留白 
    barCategoryGap: '15%' // 类目间动态留白
}

// 堆叠柱状图
{
    type: 'bar',
    stack: 'material',
    barDepth: 0.8,  // 立体纵深比例 
    itemStyle: {
        borderType: 'embossed',  // 浮雕效果 
        lightSettings: {         // 光影系统 
            mainLight: { intensity: 1.2 },
            ambientCubemap: 'factoryEnv'
        }
    }
}

// 瀑布图
{
    type: 'bar',
    waterfall: true,
    stack: 'cashflow',
    data: [
        {value: 1200, tag: '初始资金'},
        {value: +560, itemStyle: {color: '#2ecc71'}},
        {value: -300, itemStyle: {color: '#e74c3c'}},
        {value: +800, emphasis: {shadowBlur: 20}}
    ],
    stepwiseAnimation: {  // 分步动画 
        phases: ['base', 'increase', 'decrease']
    }
}

饼图 (pie)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 普通饼图
{
    type: 'pie',
    radius: () => window.innerWidth < 768 ? '45%' : '60%', // 移动端适配 
    center: ['48%', '52%'],  // 精密光学中心校准 
    quantumGradient: {       // 量子计算优化渐变 
        colorStops: 1024,
        hueShift: 0.3 
    }
}

// 南丁格尔玫瑰图
{
    type: 'pie',
    roseType: 'radius',
    radius: [20, '75%'],     // 内圈留空 
    itemStyle: {
        shadowColor: 'rgba(0,0,0,0.6)', // 战术级投影 
        shadowBlur: 12,
        borderType: 'camouflage'  // 动态伪装边框 
    },
    hologramEffect: {        // 全息投影增强 
        photonDensity: 0.8 
    }
}

// 环形图
{
    type: 'pie',
    radius: ['45%', '65%'],  // 精确环形比例 
    center: ['50%', '50%'],
    label: {
        formatter: ({name, percent}) => `${name}\n${percent}%`,
        fontSize: () => window.devicePixelRatio > 2 ? 14 : 12 
    },
    neuralRendering: {       // 神经渲染引擎 
        detailEnhance: 3.0   // 病理切片增强 
    }
}

散点图 (scatter)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 气泡图
{
    type: 'scatter',
    symbolSize: function (value) { 
        return Math.sqrt(value[2]) * 2; 
    },
    itemStyle: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.2)'
    }
}

// 大规模散点图
{
    type: 'scatter',
    large: true,
    largeThreshold: 2000,
    symbolSize: 3,
    itemStyle: {
        opacity: 0.5
    }
}

地图 (map)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 普通地图
{
    type: 'map',
    map: 'china',
    roam: {
        zoom: {
            max: 8,          // 最大缩放级别（省级→街道级）
            min: 1,
            sensitivity: 0.8 // 触控灵敏度调节 
        },
        gesture: 'compound'   // 支持多点触控复合操作 
    },
    label: {
        show: true,
        color: '#2c3e50',
        fontSize: 'adaptive', // 根据缩放级别自动调整 
        formatter: (params) => `${params.name}\nGDP: ${economyData[params.name]}亿`
    }
}

// 热力地图
{
    type: 'heatmap',
    coordinateSystem: 'geo',
    blurSize: 25,            // 热力模糊半径 
    gradientColors: ['#80F2AA20', '#FFE45880', '#FF6B3BFF'], // 量子渐变 
    data: {
        dynamicUpdate: true,  // 实时数据流接入 
        sampling: 'smart'     // 智能降噪算法 
    },
    pointMap: {              // 热力点增强 
        particleDensity: 0.8  // 粒子密度参数 
    }
}

仪表盘 (gauge)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 多段仪表盘
{
    type: 'gauge',
    radius: '80%',
    center: ['50%', '60%'],
    startAngle: 225,
    endAngle: -45,
    axisLine: {
        lineStyle: {
            color: [
                [0.2, '#91CC75'],
                [0.8, '#5470C6'],
                [1, '#EE6666']
            ],
            width: 30
        }
    },
    splitLine: {
        length: 30,
        lineStyle: {
            width: 2,
            color: '#999'
        }
    },
    detail: {
        valueAnimation: true,
        formatter: '{value}%',
        offsetCenter: [0, '50%']
    }
}

漏斗图 (funnel)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    type: 'funnel',
    size: ['40%', '80%'],
    sort: 'descending',  // 'ascending'/'descending'/'none'
    gap: 10,
    label: {
        show: true,
        position: 'inside',
        formatter: '{b}: {c} ({d}%)',
        color: '#fff'
    },
    labelLine: {
        show: true,
        length: 10,
        lineStyle: {
            width: 1,
            type: 'solid'
        }
    }
}

旭日图 (sunburst)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    type: 'sunburst',
    radius: ['10%', '70%'],
    center: ['50%', '55%'],
    sort: null,  // null/'null'/'asc'/'desc'
    label: {
        rotate: 'radial',
        color: '#333'
    },
    itemStyle: {
        borderWidth: 1,
        borderColor: '#fff'
    },
    levels: [
        {}, // 第一层
        { r0: '15%', r: '35%', itemStyle: { color: '#888' } },
        { r0: '35%', r: '55%', itemStyle: { color: '#aaa' } },
        { r0: '55%', r: '70%', itemStyle: { color: '#ccc' } }
    ]
}

树图 (tree)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
    type: 'tree',
    layout: 'orthogonal',  // 'orthogonal'/'radial'
    orientation: 'horizontal',  // 'horizontal'/'vertical'/'orthogonal'/'radial'
    nodePadding: 30,
    symbol: 'circle',
    symbolSize: 10,
    expandAndCollapse: true,
    initialTreeDepth: 2,
    label: {
        position: 'top',
        rotate: 0,
        verticalAlign: 'middle',
        align: 'center'
    },
    leaves: {
        label: {
            position: 'bottom',
            rotate: 0,
            verticalAlign: 'middle',
            align: 'center'
        }
    },
    animationDuration: 500,
    animationDurationUpdate: 500
}

矩形树图 (treemap)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
    type: 'treemap',
    leafDepth: 2,
    drillDownButton: {
        show: true,
        position: 'top',
        textStyle: { fontSize: 14 }
    },
    breadcrumb: {
        show: true,
        height: 26,
        left: 'center',
        textStyle: { fontSize: 14 }
    },
    label: {
        show: true,
        formatter: '{b}',
        padding: 5,
        textStyle: { fontSize: 12 }
    },
    itemStyle: {
        color: ['#d9534f', '#f0ad4e', '#5bc0de', '#5cb85c'],
        borderColor: '#fff',
        borderWidth: 1,
        gapWidth: 1
    }
}

平行坐标系 (parallel)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    type: 'parallel',
    parallelAxisDefault: {
        name: '',
        nameLocation: 'end',
        nameGap: 30,
        nameRotate: 0,
        inverse: false,
        min: 'dataMin',
        max: 'dataMax',
        axisLine: { show: true },
        axisTick: { show: true },
        axisLabel: { show: true },
        splitLine: { show: true },
        splitArea: { show: false }
    },
    parallel: {
        left: '5%',
        right: '15%',
        top: '5%',
        bottom: '15%'
    }
}

桑基图 (sankey)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: 'sankey',
    layout: null,  // 'none'/'standard'/'drainage'
    nodeWidth: 20,
    nodeGap: 8,
    layoutIterations: 32,
    label: {
        show: true,
        position: 'inside',
        formatter: '{b}'
    },
    lineStyle: {
        color: 'source',
        curveness: 0.5
    },
    nodeAlign: 'justify'
}

热力图 (heatmap)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    type: 'heatmap',
    coordinateSystem: 'cartesian2d',
    data: [
        [0, 0, 1],  // x, y, value
        [1, 0, 2],
        [2, 0, 3]
    ],
    blurSize: 20,
    minOpacity: 0.1,
    maxOpacity: 1,
    gradientColors: [
        '#313695', '#4575b4', '#74add1', '#abd9e9',
        '#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
        '#f46d43', '#d73027', '#a50026'
    ]
}

关系图 (graph)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
    type: 'graph',
    layout: 'force',  // 'none'/'circular'/'force'/'grid'
    force: {
        repulsion: 1000,
        gravity: 0.1,
        edgeLength: [10, 50],
        layoutAnimation: true
    },
    roam: true,
    label: {
        show: true,
        position: 'right',
        formatter: '{b}'
    },
    labelLine: {
        show: true,
        length: 10,
        lineStyle: {
            width: 1,
            type: 'solid'
        }
    },
    lineStyle: {
        color: '#aaa',
        width: 1,
        curveness: 0,
        type: 'solid'
    },
    emphasis: {
        scale: true,
        label: { show: true }
    }
}

K线图 (candlestick)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    type: 'candlestick',
    data: [
        [20, 30, 10, 35],  // 开盘, 收盘, 最低, 最高
        [30, 35, 20, 40]
    ],
    itemStyle: {
        color: '#ec0000',      // 阳线颜色（收盘 < 开盘）
        color0: '#00da3c',     // 阴线颜色（收盘 >= 开盘）
        borderColor: '#ec0000',
        borderColor0: '#00da3c'
    },
    markPoint: {
        data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
        ]
    },
    markLine: {
        data: [
            { type: 'average', name: '平均值' }
        ]
    }
}

箱线图 (boxplot)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    type: 'boxplot',
    data: [
        [850, 880, 900, 920, 950],  // 最小值, 下四分位数, 中位数, 上四分位数, 最大值
        [800, 830, 850, 880, 920]
    ],
    itemStyle: {
        color: '#5470C6',
        borderColor: '#000',
        borderWidth: 1
    },
    boxWidth: [5, 30],
    tooltip: {
        formatter: function(params) {
            return `最小值: ${params.data[0]}<br>下四分位数: ${params.data[1]}<br>中位数: ${params.data[2]}<br>上四分位数: ${params.data[3]}<br>最大值: ${params.data[4]}`;
        }
    }
}

日历图 (calendar)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
    type: 'heatmap',
    coordinateSystem: 'calendar',
    calendarIndex: 0,
    data: [
        [[2017, 1, 10], 123],
        [[2017, 1, 20], 234],
        [[2017, 1, 30], 345]
    ],
    visualMap: {
        show: false,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        bottom: '10%',
        pieces: [
            { lte: 100, color: '#eee' },
            { gte: 100, lte: 200, color: '#d88' },
            { gte: 200, color: '#822' }
        ]
    },
    calendar: {
        left: 'center',
        top: 'center',
        cellSize: ['auto', 'auto'],
        yearLabel: { show: true },
        monthLabel: { show: true },
        dayLabel: { show: true, firstDay: 1 },
        dayColor: '#fff',
        monthColor: '#eee',
        yearColor: '#ddd'
    }
}

自定义系列 (custom)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
    type: 'custom',
    renderItem: function(params, api) {
        const categoryIndex = api.value(0);
        const start = api.coord([api.value(1), categoryIndex]);
        const end = api.coord([api.value(2), categoryIndex]);
        const height = api.size([0, 1])[1] * 0.6;
        
        return {
            type: 'rect',
            shape: {
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            },
            style: api.style({
                fill: api.visual('color')
            })
        };
    },
    data: [
        [0, 12, 23],
        [1, 23, 34],
        [2, 34, 45]
    ]
}

项目配置示例

ECharts 项目初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 1. 安装 ECharts
npm install echarts --save

// 2. 基础初始化
import * as echarts from 'echarts';

// 3. 初始化图表
const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);

// 4. 配置项
const option = {
    title: {
        text: '销售数据',
        left: 'center',
        textStyle: {
            fontSize: 18,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['销量', '利润'],
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        },
        {
            name: '利润',
            type: 'bar',
            data: [80, 120, 100, 60, 50]
        }
    ]
};

// 5. 使用配置项
myChart.setOption(option);

// 6. 响应式处理
window.addEventListener('resize', () => {
    myChart.resize();
});

响应式图表配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 响应式配置
const responsiveOption = {
    title: {
        text: '销售数据',
        textStyle: {
            fontSize: () => window.innerWidth < 768 ? 14 : 18
        }
    },
    legend: {
        orient: () => window.innerWidth < 768 ? 'horizontal' : 'vertical',
        itemGap: () => window.innerWidth < 768 ? 10 : 20
    },
    xAxis: {
        axisLabel: {
            fontSize: () => window.innerWidth < 768 ? 10 : 12
        }
    },
    yAxis: {
        axisLabel: {
            fontSize: () => window.innerWidth < 768 ? 10 : 12
        }
    },
    grid: {
        left: () => window.innerWidth < 768 ? '10%' : '15%',
        right: () => window.innerWidth < 768 ? '10%' : '15%',
        bottom: () => window.innerWidth < 768 ? '15%' : '20%'
    }
};

// 动态调整图表大小
function resizeChart() {
    const width = chartDom.clientWidth;
    const height = chartDom.clientHeight;
    
    // 设置图表尺寸
    chartDom.style.width = `${width}px`;
    chartDom.style.height = `${height}px`;
    
    // 调整图表
    myChart.resize({
        width: width,
        height: height
    });
}

// 监听窗口大小变化
window.addEventListener('resize', resizeChart);

// 初始化时调整
resizeChart();

主题定制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 1. 注册主题
echarts.registerTheme('myTheme', {
    color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
    backgroundColor: 'rgba(255,255,255,0.9)',
    textStyle: {
        fontFamily: 'Arial',
        fontSize: 14
    },
    title: {
        textStyle: {
            fontSize: 18,
            fontWeight: 'bold'
        },
        subtextStyle: {
            fontSize: 12
        }
    },
    legend: {
        textStyle: {
            fontSize: 12
        }
    },
    tooltip: {
        backgroundColor: 'rgba(255,255,255,0.9)',
        borderColor: '#ccc',
        borderWidth: 1,
        textStyle: {
            fontSize: 14
        }
    }
});

// 2. 使用主题
const myChart = echarts.init(chartDom, 'myTheme');

// 3. 动态主题切换
function switchTheme(themeName) {
    echarts.dispose(myChart);
    myChart = echarts.init(chartDom, themeName);
    myChart.setOption(option);
}

性能优化配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 大数据量优化配置
const performanceOption = {
    // 关闭动画
    animation: false,
    
    // 启用大数据优化
    series: [{
        type: 'scatter',
        large: true,
        largeThreshold: 2000,
        symbolSize: 2,
        data: largeDataArray
    }],
    
    // 使用 WebGL 渲染
    progressive: 1000,
    progressiveThreshold: 2000,
    
    // 节流处理
    throttle: 100
};

// 按需加载图表类型
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';

最佳实践

性能优化

1. 大数据量渲染优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 使用大数据优化配置
const largeDataOption = {
    animation: false,  // 关闭动画
    series: [{
        type: 'scatter',
        large: true,              // 启用大数据优化
        largeThreshold: 2000,     // 大数据阈值
        symbolSize: 2,            // 减小符号大小
        data: largeDataArray      // 大量数据
    }]
};

// 使用 WebGL 渲染
const webGLConfig = {
    series: [{
        type: 'scatter',
        progressive: 500,         // 渐进式渲染
        progressiveThreshold: 1000
    }]
};

2. 按需加载

1
2
3
4
5
6
7
// 只加载需要的模块
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';

3. 防抖处理

1
2
3
4
5
6
7
8
// 防抖 resize 事件
let resizeTimer;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        myChart.resize();
    }, 300);
});

交互优化

1. 自定义提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
tooltip: {
    trigger: 'axis',
    formatter: (params) => {
        let result = `${params[0].name}<br/>`;
        params.forEach(item => {
            result += `${item.marker} ${item.seriesName}: ${item.value}<br/>`;
        });
        return result;
    },
    backgroundColor: 'rgba(255,255,255,0.95)',
    padding: [10, 15],
    textStyle: {
        fontSize: 14,
        color: '#333'
    }
}

2. 高亮交互

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 鼠标悬停高亮
myChart.on('mouseover', (params) => {
    // 高亮当前系列
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
    });
});

// 鼠标离开恢复
myChart.on('mouseout', () => {
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
    });
});

3. 数据更新动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 平滑数据更新
function updateData(newData) {
    myChart.setOption({
        series: [{
            data: newData
        }]
    }, {
        notMerge: true,
        lazyUpdate: true,
        animation: {
            duration: 500,
            easing: 'quadraticOut'
        }
    });
}

响应式设计

1. 自适应容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 初始化时设置容器尺寸
function initChart() {
    const container = document.getElementById('chart-container');
    const width = container.clientWidth;
    const height = container.clientHeight;
    
    chartDom.style.width = `${width}px`;
    chartDom.style.height = `${height}px`;
    
    myChart = echarts.init(chartDom);
    myChart.setOption(option);
}

// 监听容器尺寸变化
const resizeObserver = new ResizeObserver(() => {
    myChart.resize();
});
resizeObserver.observe(document.getElementById('chart-container'));

2. 移动端优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 移动端配置
const mobileOption = {
    title: {
        textStyle: {
            fontSize: 14
        }
    },
    legend: {
        orient: 'horizontal',
        itemGap: 10,
        itemWidth: 15,
        itemHeight: 10
    },
    xAxis: {
        axisLabel: {
            fontSize: 10,
            rotate: 45
        }
    },
    yAxis: {
        axisLabel: {
            fontSize: 10
        }
    },
    grid: {
        left: '10%',
        right: '10%',
        top: '15%',
        bottom: '15%'
    }
};

数据处理

1. 数据格式转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 将数组转换为 ECharts 需要的格式
function formatData(rawData) {
    return rawData.map(item => ({
        name: item.label,
        value: item.value,
        itemId: item.id  // 自定义属性
    }));
}

// 将对象数组转换为 ECharts 需要的格式
function formatObjectData(rawData) {
    return rawData.map(item => ({
        name: item.name,
        value: [item.x, item.y, item.size]  // 散点图需要的格式
    }));
}

2. 动态数据加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 动态加载数据
function loadData() {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            const formattedData = formatData(data);
            myChart.setOption({
                series: [{
                    data: formattedData
                }]
            });
        })
        .catch(error => {
            console.error('数据加载失败:', error);
        });
}

// 定时更新数据
setInterval(loadData, 30000);  // 每30秒更新一次

3. 数据聚合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 数据聚合函数
function aggregateData(data, groupBy) {
    const aggregated = {};
    
    data.forEach(item => {
        const key = item[groupBy];
        if (!aggregated[key]) {
            aggregated[key] = 0;
        }
        aggregated[key] += item.value;
    });
    
    return Object.entries(aggregated).map(([name, value]) => ({
        name,
        value
    }));
}

总结

ECharts 是一个功能强大且灵活的数据可视化库，通过本文档的介绍，你应该已经掌握了以下内容：

1. 基础配置项

  • 标题 (title)：配置图表标题和副标题
  • 提示框 (tooltip)：设置数据提示框
  • 图例 (legend)：配置图例显示和交互
  • 网格 (grid)：调整图表布局和边距
  • 坐标轴 (xAxis/yAxis)：配置坐标轴样式和标签
  • 系列 (series)：定义图表类型和数据
  • 工具箱 (toolbox)：添加图表操作功能
  • 数据区域缩放 (dataZoom)：实现数据缩放
  • 动画 (animation)：配置动画效果
  • 背景色 (backgroundColor)：设置图表背景
  • 主题 (theme)：定制图表主题样式

2. 图表类型

  • 折线图：展示数据趋势
  • 柱状图：比较不同类别的数据
  • 饼图：展示数据占比
  • 散点图：展示二维数据分布
  • 雷达图：展示多维数据对比
  • 地图：展示地理数据
  • 仪表盘：展示进度或百分比
  • 漏斗图：展示数据阶段性变化
  • 旭日图：展示层级数据占比
  • 树图：展示层级结构
  • 矩形树图：展示层级数据面积占比
  • 平行坐标系：展示多维数据对比
  • 桑基图：展示数据流动关系
  • 热力图：展示二维数据密度
  • 关系图：展示节点和边的关系
  • K线图：展示金融数据
  • 箱线图：展示数据分布情况
  • 日历图：展示时间序列数据
  • 自定义系列：实现自定义图表类型

3. 项目配置

  • 初始化配置：正确初始化 ECharts 实例
  • 响应式配置：适配不同屏幕尺寸
  • 主题定制：创建自定义主题
  • 性能优化：处理大数据量渲染

4. 最佳实践

  • 性能优化：大数据量渲染、按需加载、防抖处理
  • 交互优化：自定义提示框、高亮交互、数据更新动画
  • 响应式设计：自适应容器、移动端优化
  • 数据处理：数据格式转换、动态数据加载、数据聚合

通过掌握这些配置项和最佳实践，你可以创建出功能强大、性能优秀、交互丰富的数据可视化图表。