ECharts 属性详解

基础配置属性

1.1 初始化配置

var myChart = echarts.init(
    dom,                      // DOM元素或ID
    theme,                    // 主题名称或对象
    {                         // 初始化参数
        devicePixelRatio: 2,  // 设备像素比，默认为1
        renderer: 'canvas',   // 渲染器：'canvas' 或 'svg'
        width: 'auto',        // 宽度，'auto'或具体数值
        height: 'auto',       // 高度，'auto'或具体数值
        locale: 'ZH'          // 语言，'ZH'或'EN'
    }
);

1.2 全局配置

option = {
    backgroundColor: '#fff',  // 背景色，支持rgba/hex/rgb等格式
    color: ['#c23531','#2f4554','#61a0a8'], // 调色盘颜色列表
    textStyle: {              // 全局文本样式
        color: '#333',        // 文字颜色
        fontStyle: 'normal',  // 字体风格：'normal','italic','oblique'
        fontWeight: 'normal', // 字体粗细：'normal','bold','bolder','lighter'|100~900
        fontFamily: 'sans-serif', // 字体
        fontSize: 12          // 字体大小
    },
    animation: true,          // 是否开启动画
    animationDuration: 1000,  // 初始动画时长(毫秒)
    animationEasing: 'cubicInOut' // 动画缓动效果
};

组件属性详解

2.1 标题(title)

title: {
    text: '主标题',           // 主标题文本
    link: 'https://example.com', // 主标题链接
    target: 'blank',         // 链接打开方式：'self'|'blank'
    subtext: '副标题',        // 副标题文本
    sublink: '',             // 副标题链接
    subtarget: '',          // 副标题链接打开方式
    left: 'center',         // 水平位置：'left'|'center'|'right'|百分比|像素值
    top: 'top',             // 垂直位置：'top'|'middle'|'bottom'|百分比|像素值
    textAlign: 'auto',      // 文本水平对齐：'auto'|'left'|'right'|'center'
    textVerticalAlign: 'auto', // 文本垂直对齐
    padding: 5,             // 标题内边距
    itemGap: 10,            // 主副标题间距
    textStyle: {},          // 主标题文本样式(同全局textStyle)
    subtextStyle: {}        // 副标题文本样式
}

2.2 图例(legend)

legend: {
    type: 'plain',          // 类型：'plain'普通|'scroll'可滚动
    show: true,             // 是否显示
    zlevel: 0,             // 所有图形的zlevel值
    z: 2,                  // 组件的所有图形的z值
    left: 'auto',          // 位置
    top: 'auto',
    right: 'auto',
    bottom: 'auto',
    width: 'auto',         // 宽度
    height: 'auto',        // 高度
    orient: 'horizontal',  // 布局方向：'horizontal'|'vertical'
    align: 'auto',         // 图例标记和文本对齐：'auto'|'left'|'right'
    padding: 5,            // 图例内边距
    itemGap: 10,           // 图例每项间隔
    itemWidth: 25,         // 图例标记图形宽度
    itemHeight: 14,        // 图例标记图形高度
    symbolKeepAspect: true, // 保持图形长宽比
    formatter: function(name) { // 格式化文本
        return '图例 ' + name;
    },
    selectedMode: true,    // 选择模式：true|false|'single'|'multiple'
    inactiveColor: '#ccc', // 未激活图例颜色
    selected: {            // 默认选中状态
        '系列1': true,
        '系列2': false
    },
    textStyle: {},         // 文本样式
    tooltip: {             // 图例提示框
        show: false
    },
    data: ['类别1','类别2'], // 图例数据
    backgroundColor: 'transparent', // 背景色
    borderColor: '#ccc',   // 边框颜色
    borderWidth: 0,        // 边框宽度
    borderRadius: 0,       // 边框圆角
    shadowBlur: 0,         // 阴影模糊大小
    shadowColor: '#000',   // 阴影颜色
    shadowOffsetX: 0,      // 阴影水平偏移
    shadowOffsetY: 0       // 阴影垂直偏移
}

2.3 提示框(tooltip)

tooltip: {
    trigger: 'item',       // 触发类型：'item'|'axis'|'none'
    triggerOn: 'mousemove|click', // 触发条件：'mousemove'|'click'|'none'
    showContent: true,     // 是否显示提示框浮层
    alwaysShowContent: false, // 是否永远显示内容
    showDelay: 0,          // 显示延迟(毫秒)
    hideDelay: 100,        // 隐藏延迟(毫秒)
    enterable: false,      // 鼠标是否可进入提示框
    confine: false,        // 是否将提示框限制在图表区域内
    transitionDuration: 0.4, // 动画过渡时间(秒)
    position: ['50%', '50%'], // 位置
    formatter: function(params) { // 格式化函数
        return params.name + ' : ' + params.value;
    },
    backgroundColor: 'rgba(50,50,50,0.7)', // 背景色
    borderColor: '#333',   // 边框颜色
    borderWidth: 0,        // 边框宽度
    padding: 5,            // 内边距
    textStyle: {           // 文本样式
        color: '#fff'
    },
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 额外CSS样式
}

2.4 坐标轴(axis)

2.4.1 直角坐标系(xAxis/yAxis)

xAxis: {
    type: 'category',      // 类型：'value'数值|'category'类目|'time'时间|'log'对数
    name: 'X轴',           // 坐标轴名称
    nameLocation: 'end',   // 名称位置：'start'|'middle'|'end'
    nameTextStyle: {},     // 名称文本样式
    nameGap: 15,           // 名称与轴线距离
    nameRotate: 0,         // 名称旋转角度
    inverse: false,        // 是否反向坐标轴
    boundaryGap: true,     // 类目轴中边界空白
    min: null,             // 最小值
    max: null,             // 最大值
    scale: false,          // 只在数值轴有效，是否脱离0值比例
    splitNumber: 5,        // 分割段数
    minInterval: 0,        // 最小间隔大小
    maxInterval: null,     // 最大间隔大小
    axisLine: {            // 坐标轴线
        show: true,        // 是否显示
        onZero: true,      // X轴是否在0刻度上
        lineStyle: {       // 线样式
            color: '#333',
            width: 1,
            type: 'solid'
        }
    },
    axisTick: {            // 坐标轴刻度
        show: true,        // 是否显示
        alignWithLabel: false, // 类目轴中与标签对齐
        inside: false,     // 是否朝内
        length: 5,         // 长度
        lineStyle: {}      // 线样式
    },
    axisLabel: {           // 坐标轴标签
        show: true,        // 是否显示
        interval: 'auto',  // 标签显示间隔
        inside: false,     // 是否朝内
        rotate: 0,         // 旋转角度
        margin: 8,         // 与轴线距离
        formatter: function(value, index) { // 格式化函数
            return value + 'kg';
        },
        showMinLabel: true, // 显示最小标签
        showMaxLabel: true, // 显示最大标签
        color: '#666'      // 文本颜色
    },
    splitLine: {           // 分割线
        show: true,        // 是否显示
        interval: 'auto',  // 显示间隔
        lineStyle: {       // 线样式
            color: ['#eee'],
            width: 1,
            type: 'solid'
        }
    },
    splitArea: {           // 分割区域
        show: false,       // 是否显示
        interval: 'auto',  // 显示间隔
        areaStyle: {       // 区域样式
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
        }
    },
    data: ['周一','周二','周三'] // 类目数据
}

2.4.2 极坐标轴(radiusAxis/angleAxis)

radiusAxis: {
    type: 'value',
    polarIndex: 0,         // 极坐标索引
    angleAxis: {           // 角度轴配置(同直角坐标系)
        // 类似xAxis/yAxis配置
    }
}

2.5 网格(grid)

grid: {
    show: false,           // 是否显示直角坐标系网格
    zlevel: 0,            // 所有图形的zlevel值
    z: 0,                 // 组件的所有图形的z值
    left: '10%',          // 位置
    top: 60,
    right: '10%',
    bottom: 60,
    width: 'auto',        // 宽度
    height: 'auto',       // 高度
    containLabel: false,  // 是否包含坐标轴标签
    backgroundColor: 'transparent', // 背景色
    borderColor: '#ccc',  // 边框颜色
    borderWidth: 1,       // 边框宽度
    shadowBlur: 0,        // 阴影模糊大小
    shadowColor: 'rgba(0,0,0,0.5)', // 阴影颜色
    shadowOffsetX: 0,     // 阴影水平偏移
    shadowOffsetY: 0      // 阴影垂直偏移
}

系列(series)属性详解

3.1 折线图(line)

series: [{
    type: 'line',
    name: '系列名称',
    coordinateSystem: 'cartesian2d', // 坐标系：'cartesian2d'|'polar'|...
    xAxisIndex: 0,        // 使用的x轴索引
    yAxisIndex: 0,        // 使用的y轴索引
    symbol: 'circle',     // 标记图形：'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
    symbolSize: 4,        // 标记大小
    symbolRotate: 0,      // 标记旋转角度
    symbolKeepAspect: true, // 保持标记长宽比
    symbolOffset: [0, 0], // 标记偏移
    showSymbol: true,     // 是否显示标记
    showAllSymbol: false, // 是否显示所有标记
    hoverAnimation: true, // 是否开启鼠标hover动画
    legendHoverLink: true, // 是否启用图例hover联动
    stack: null,          // 数据堆叠名称
    cursor: 'pointer',    // 鼠标悬浮样式
    connectNulls: false,  // 是否连接空数据
    clip: true,           // 是否裁剪超出坐标系部分
    step: false,          // 是否显示为阶梯线：'start'|'middle'|'end'|false
    label: {              // 图形上的文本标签
        show: false,
        position: 'top',  // 位置：'top'|'left'|'right'|'bottom'|'inside'|...
        distance: 5,      // 距离图形元素的距离
        rotate: 0,        // 旋转角度
        offset: [0, 0],   // 偏移
        formatter: '{c}', // 格式化文本
        color: '#666',    // 文本颜色
        fontSize: 12,
        backgroundColor: 'transparent', // 背景色
        borderColor: 'transparent', // 边框颜色
        borderWidth: 0,   // 边框宽度
        borderRadius: 0, // 边框圆角
        padding: [3, 5], // 内边距
        shadowColor: 'transparent', // 阴影颜色
        shadowBlur: 0,   // 阴影模糊大小
        shadowOffsetX: 0, // 阴影水平偏移
        shadowOffsetY: 0 // 阴影垂直偏移
    },
    endLabel: {           // 折线终点标签
        show: false,
        // 类似label配置
    },
    lineStyle: {          // 线条样式
        color: '#c23531', // 颜色
        width: 2,         // 线宽
        type: 'solid',   // 线型：'solid'|'dashed'|'dotted'
        opacity: 1,      // 透明度
        shadowBlur: 0,   // 阴影模糊大小
        shadowColor: '#000', // 阴影颜色
        shadowOffsetX: 0, // 阴影水平偏移
        shadowOffsetY: 0, // 阴影垂直偏移
        curveness: 0     // 曲率
    },
    areaStyle: {          // 区域填充样式
        color: null,      // 颜色
        origin: 'auto',  // 填充起点：'auto'|'start'|'end'
        opacity: 0.7,    // 透明度
        shadowBlur: 10,  // 阴影模糊大小
        shadowColor: '#000', // 阴影颜色
        shadowOffsetX: 0, // 阴影水平偏移
        shadowOffsetY: 0 // 阴影垂直偏移
    },
    emphasis: {           // 高亮状态下的样式
        label: {},        // 高亮标签样式
        itemStyle: {      // 高亮图形样式
            color: '#c23531',
            borderColor: '#000',
            borderWidth: 2
        }
    },
    markPoint: {          // 标注点
        symbol: 'pin',    // 标记图形
        symbolSize: 50,   // 标记大小
        silent: false,   // 是否不响应和触发鼠标事件
        label: {},       // 标签样式
        itemStyle: {},   // 图形样式
        data: [          // 标注数据
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
        ]
    },
    markLine: {           // 标线
        silent: false,   // 是否不响应和触发鼠标事件
        symbol: ['none', 'none'], // 标线两端的标记类型
        label: {},       // 标签样式
        lineStyle: {},   // 线样式
        data: [          // 标线数据
            {type: 'average', name: '平均值'}
        ]
    },
    markArea: {           // 标记区域
        silent: false,   // 是否不响应和触发鼠标事件
        label: {},       // 标签样式
        itemStyle: {},   // 图形样式
        data: [          // 标记区域数据
            [
                {name: '早高峰', xAxis: '07:30'},
                {xAxis: '09:30'}
            ]
        ]
    },
    smooth: false,        // 是否平滑曲线
    smoothMonotone: null, // 平滑曲线时是否保持单调性
    sampling: 'none',     // 采样方式：'average'|'max'|'min'|'sum'|'none'
    dimensions: null,     // 维度信息
    encode: {            // 数据到图形的映射
        x: 'date',       // x轴数据字段
        y: 'value',      // y轴数据字段
        tooltip: ['date', 'value'] // 提示框显示字段
    },
    data: [              // 数据
        ['2017-10-10', 20],
        ['2017-10-11', 32]
    ],
    animation: true,      // 是否开启动画
    animationThreshold: 2000, // 动画阈值
    animationDuration: 1000, // 初始动画时长
    animationEasing: 'cubicOut', // 动画缓动效果
    animationDelay: 0,    // 动画延迟
    animationDurationUpdate: 300, // 数据更新动画时长
    animationEasingUpdate: 'cubicInOut', // 数据更新动画缓动效果
    animationDelayUpdate: 0 // 数据更新动画延迟
}]

3.2 柱状图(bar)

series: [{
    type: 'bar',
    barWidth: '30%',      // 柱条宽度
    barMinHeight: 0,      // 柱条最小高度
    barMaxWidth: null,    // 柱条最大宽度
    barMinAngle: 0,       // 最小角度(用于极坐标)
    barGap: '30%',        // 柱间距离
    barCategoryGap: '20%', // 类目间柱形距离
    large: false,         // 是否开启大数据量优化
    largeThreshold: 400,  // 大数据量优化阈值
    seriesLayoutBy: 'column', // 数据集dataset的行列映射：'column'|'row'
    cursor: 'pointer',    // 鼠标悬浮样式
    itemStyle: {          // 图形样式
        color: null,      // 颜色
        borderColor: '#000', // 边框颜色
        borderWidth: 0,   // 边框宽度
        borderType: 'solid', // 边框类型
        borderRadius: 0,  // 柱条圆角
        shadowBlur: 0,    // 阴影模糊大小
        shadowColor: '#000', // 阴影颜色
        shadowOffsetX: 0, // 阴影水平偏移
        shadowOffsetY: 0,  // 阴影垂直偏移
        opacity: 1        // 透明度
    },
    // 其他配置与折线图类似
}]

3.3 饼图(pie)

series: [{
    type: 'pie',
    center: ['50%', '50%'], // 饼图中心位置
    radius: ['0%', '75%'], // 饼图半径，第一个为内半径，第二个为外半径
    startAngle: 90,        // 起始角度
    minAngle: 0,           // 最小扇区角度
    clockWise: true,       // 顺时针布局
    roseType: false,       // 玫瑰图模式：'radius'|'area'|false
    avoidLabelOverlap: true, // 是否启用防止标签重叠策略
    stillShowZeroSum: true, // 是否显示总和为0的扇区
    percentPrecision: 2,   // 百分比精度
    selectedMode: 'single', // 选中模式：'single'|'multiple'|false
    selectedOffset: 10,    // 选中扇区偏移量
    hoverOffset: 10,       // 高亮扇区偏移量
    itemStyle: {           // 图形样式
        borderColor: '#fff', // 边框颜色
        borderWidth: 1,    // 边框宽度
        borderType: 'solid', // 边框类型
        borderRadius: 0,   // 圆角
        shadowBlur: 0,     // 阴影模糊大小
        shadowColor: '#000', // 阴影颜色
        shadowOffsetX: 0,   // 阴影水平偏移
        shadowOffsetY: 0    // 阴影垂直偏移
    },
    label: {              // 标签
        show: true,
        position: 'outside', // 位置：'outside'|'inside'|'center'
        formatter: '{b}: {c} ({d}%)', // 格式化文本
        color: '#666',    // 文本颜色
        fontSize: 12,
        lineHeight: 18,
        rich: {           // 富文本样式
            a: {color: 'red'}
        }
    },
    labelLine: {          // 标签视觉引导线
        show: true,       // 是否显示
        length: 15,       // 第一段长度
        length2: 10,      // 第二段长度
        smooth: false,    // 是否平滑
        lineStyle: {      // 线样式
            color: '#ccc',
            width: 1,
            type: 'solid'
        }
    },
    emphasis: {           // 高亮状态下的样式
        scale: true,      // 是否放大扇区
        scaleSize: 10,    // 放大尺寸
        itemStyle: {},    // 高亮图形样式
        label: {},        // 高亮标签样式
        labelLine: {}     // 高亮引导线样式
    },
    data: [              // 数据
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'}
    ]
}]

3.4 散点图(scatter)

series: [{
    type: 'scatter',
    coordinateSystem: 'cartesian2d', // 坐标系
    symbol: 'circle',     // 标记图形
    symbolSize: 10,       // 标记大小
    symbolRotate: 0,      // 标记旋转角度
    symbolKeepAspect: true, // 保持标记长宽比
    symbolOffset: [0, 0], // 标记偏移
    large: false,         // 是否开启大数据量优化
    largeThreshold: 2000, // 大数据量优化阈值
    cursor: 'pointer',    // 鼠标悬浮样式
    itemStyle: {          // 图形样式
        color: '#c23531', // 颜色
        opacity: 0.8      // 透明度
    },
    emphasis: {           // 高亮状态下的样式
        itemStyle: {},    // 高亮图形样式
        label: {}         // 高亮标签样式
    },
    // 其他配置与折线图类似
}]

3.5 雷达图(radar)

series: [{
    type: 'radar',
    radarIndex: 0,        // 雷达图索引
    symbol: 'circle',     // 标记图形
    symbolSize: 4,        // 标记大小
    symbolRotate: 0,      // 标记旋转角度
    symbolKeepAspect: true, // 保持标记长宽比
    symbolOffset: [0, 0], // 标记偏移
    itemStyle: {          // 图形样式
        color: '#c23531', // 颜色
        borderWidth: 1    // 边框宽度
    },
    lineStyle: {          // 线条样式
        width: 2,        // 线宽
        type: 'solid'    // 线型
    },
    areaStyle: {          // 区域填充样式
        color: 'rgba(194, 53, 49, 0.4)', // 颜色
        opacity: 0.7     // 透明度
    },
    emphasis: {           // 高亮状态下的样式
        itemStyle: {},    // 高亮图形样式
        lineStyle: {},    // 高亮线条样式
        areaStyle: {}     // 高亮区域样式
    },
    data: [              // 数据
        {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '预算分配'
        }
    ]
}]

高级特性

4.1 数据集(dataset)

dataset: {
    source: [            // 数据源
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1]
    ],
    dimensions: null,     // 维度定义
    sourceHeader: false,  // 第一行是否为表头
    transform: {          // 数据转换配置
        type: 'filter',  // 转换类型：'filter'|'sort'|'ecStat:regression'
        config: {field: 'product', value: 'Matcha Latte'}
    }
}

4.2 视觉映射(visualMap)

visualMap: {
    type: 'continuous',   // 类型：'continuous'连续型|'piecewise'分段型
    min: 0,               // 最小值
    max: 100,             // 最大值
    range: [0, 100],      // 当前选中的范围
    calculable: true,     // 是否显示拖拽手柄
    realtime: true,       // 拖拽时是否实时更新
    inverse: false,       // 是否反转
    precision: 0,         // 小数精度
    itemWidth: 20,        // 图形宽度
    itemHeight: 140,      // 图形高度
    align: 'auto',        // 组件对齐方式
    text: ['高', '低'],   // 两端的文本
    textGap: 10,          // 文本与图形间距
    inRange: {            // 定义在选中范围内的视觉元素
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
        symbolSize: [10, 70]
    },
    outOfRange: {         // 定义在选中范围外的视觉元素
        color: '#999',
        symbolSize: 10
    },
    controller: {         // 控制器配置
        inRange: {},     // 控制器内的视觉元素
        outOfRange: {}   // 控制器外的视觉元素
    },
    zlevel: 0,           // 所有图形的zlevel值
    z: 2,                // 组件的所有图形的z值
    left: 'right',       // 位置
    top: '10%',
    right: '5%',
    bottom: '20%',
    orient: 'vertical',  // 布局方向：'vertical'|'horizontal'
    padding: 5,          // 内边距
    backgroundColor: 'rgba(0,0,0,0)', // 背景色
    borderColor: '#ccc', // 边框颜色
    borderWidth: 0,      // 边框宽度
    textStyle: {},       // 文本样式
    formatter: function(value) { // 标签格式化
        return value.toFixed(2);
    }
}

4.3 数据区域缩放(dataZoom)

dataZoom: [
    {
        type: 'slider',  // 类型：'slider'|'inside'
        xAxisIndex: 0,    // 控制的x轴索引
        yAxisIndex: null, // 控制的y轴索引
        radiusAxisIndex: null, // 控制的极坐标半径轴索引
        angleAxisIndex: null, // 控制的极坐标角度轴索引
        filterMode: 'filter', // 过滤模式：'filter'|'weakFilter'|'empty'|'none'
        start: 0,        // 数据窗口范围的起始百分比
        end: 100,        // 数据窗口范围的结束百分比
        startValue: null, // 数据窗口范围的起始数值
        endValue: null,  // 数据窗口范围的结束数值
        throttle: 100,   // 防抖延迟(毫秒)
        zoomLock: false, // 是否锁定选择区域大小
        minSpan: 10,     // 最小显示范围(百分比)
        maxSpan: 100,    // 最大显示范围(百分比)
        minValueSpan: null, // 最小显示范围(数值)
        maxValueSpan: null, // 最大显示范围(数值)
        orient: 'horizontal', // 布局方向：'horizontal'|'vertical'
        zoomOnMouseWheel: true, // 是否支持鼠标滚轮缩放
        moveOnMouseMove: true, // 是否支持鼠标拖拽平移
        preventDefaultMouseMove: true, // 是否阻止默认的鼠标移动事件
        fillerColor: 'rgba(167,183,204,0.4)', // 选中区域填充颜色
        borderColor: '#ddd', // 边框颜色
        backgroundColor: '#eee', // 背景色
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', // 手柄图标
        handleSize: '80%', // 手柄大小
        handleStyle: {   // 手柄样式
            color: '#fff',
            borderColor: '#999',
            borderWidth: 1,
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        },
        labelPrecision: null, // 显示label的小数精度
        labelFormatter: null, // 标签格式化函数
        showDetail: true, // 是否显示detail
        showDataShadow: 'auto', // 是否显示数据阴影
        realtime: true,  // 拖动时是否实时更新
        textStyle: {},   // 文本样式
        zlevel: 0,      // 所有图形的zlevel值
        z: 4,           // 组件的所有图形的z值
        left: 'center', // 位置
        top: 'top',
        right: 'auto',
        bottom: 'auto'
    }
]

4.4 时间轴(timeline)

timeline: {
    show: true,          // 是否显示
    type: 'slider',      // 类型：'slider'|'number'
    axisType: 'time',    // 轴类型：'time'|'value'|'category'
    currentIndex: 0,     // 当前选中索引
    autoPlay: false,     // 是否自动播放
    rewind: false,       // 是否反向播放
    loop: true,          // 是否循环播放
    playInterval: 2000,  // 播放间隔(毫秒)
    realtime: true,      // 拖动时是否实时更新
    controlPosition: 'left', // 控制按钮位置：'left'|'right'
    zlevel: 0,           // 所有图形的zlevel值
    z: 2,                // 组件的所有图形的z值
    left: '20%',         // 位置
    top: 'auto',
    right: '20%',
    bottom: 0,
    width: 'auto',       // 宽度
    height: 50,          // 高度
    padding: 5,          // 内边距
    orient: 'horizontal', // 布局方向：'horizontal'|'vertical'
    inverse: false,      // 是否反向
    symbol: 'circle',    // 标记图形
    symbolSize: 10,      // 标记大小
    symbolRotate: 0,     // 标记旋转角度
    symbolOffset: [0, 0], // 标记偏移
    lineStyle: {         // 轴线样式
        color: '#304654',
        width: 2,
        type: 'solid'
    },
    label: {             // 标签
        position: 'auto', // 位置：'auto'|'left'|'right'|'top'|'bottom'
        interval: 'auto', // 显示间隔
        rotate: 0,       // 旋转角度
        formatter: null, // 格式化函数
        show: true,      // 是否显示
        color: '#666'    // 文本颜色
    },
    itemStyle: {         // 图形样式
        color: '#304654', // 颜色
        borderWidth: 1   // 边框宽度
    },
    checkpointStyle: {    // 当前点样式
        symbol: 'circle',
        symbolSize: 13,
        color: '#c23531',
        borderWidth: 2,
        borderColor: 'rgba(194,53,49,0.5)',
        animation: true,
        animationDuration: 300,
        animationEasing: 'quinticInOut'
    },
    controlStyle: {       // 控制按钮样式
        show: true,      // 是否显示
        showPlayBtn: true, // 是否显示播放按钮
        showPrevBtn: true, // 是否显示上一个按钮
        showNextBtn: true, // 是否显示下一个按钮
        itemSize: 22,    // 按钮大小
        itemGap: 12,     // 按钮间隔
        position: 'left', // 位置：'left'|'right'
        playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3c0.2-0.2,0.5-0.3,0.7-0.3c0.3,0,0.5,0.1,0.7,0.3l10.4,6.1c0.2,0.2,0.3,0.4,0.3,0.7

ECharts 属性详解（续）

高级图表类型配置

5.1 地图(map)

series: [{
    type: 'map',
    map: 'china',        // 地图类型，内置'china'/'world'等，或自定义地图名称
    roam: true,          // 是否开启鼠标缩放和平移漫游
    center: [108.38, 37.8], // 当前视角中心点
    zoom: 1.2,           // 当前视角缩放比例
    scaleLimit: {        // 缩放限制
        min: 1,
        max: 10
    },
    nameMap: {           // 自定义名称映射
        'China': '中国'
    },
    selectedMode: 'multiple', // 选中模式
    label: {             // 地图区域名称
        show: true,
        color: '#333',
        fontSize: 10
    },
    itemStyle: {         // 地图区域样式
        areaColor: '#eee',
        borderColor: '#aaa',
        borderWidth: 0.5,
        borderType: 'solid'
    },
    emphasis: {          // 高亮状态
        label: {
            color: '#fff'
        },
        itemStyle: {
            areaColor: '#c23531'
        }
    },
    select: {            // 选中状态
        label: {
            color: '#fff'
        },
        itemStyle: {
            areaColor: '#c23531'
        }
    },
    data: [             // 数据
        {name: '北京', value: 100},
        {name: '上海', value: 200}
    ]
}]

5.2 热力图(heatmap)

series: [{
    type: 'heatmap',
    coordinateSystem: 'cartesian2d', // 坐标系
    pointSize: 10,       // 点大小
    blurSize: 15,        // 模糊大小
    minOpacity: 0,       // 最小透明度
    maxOpacity: 1,       // 最大透明度
    gradientColors: [    // 颜色渐变
        'blue', 'green', 'yellow', 'red'
    ],
    data: [              // 数据格式
        [12, 33, 0.3],   // [x, y, value]
        [24, 15, 0.7]
    ]
}]

5.3 树图(tree)

series: [{
    type: 'tree',
    data: [{             // 树结构数据
        name: '根节点',
        children: [
            {name: '子节点1'},
            {name: '子节点2'}
        ]
    }],
    layout: 'orthogonal', // 布局：'orthogonal'正交|'radial'径向
    orient: 'vertical',  // 方向：'vertical'垂直|'horizontal'水平
    symbol: 'circle',    // 节点标记
    symbolSize: 7,       // 节点大小
    expandAndCollapse: true, // 是否可折叠
    initialTreeDepth: 3, // 初始展开层级
    label: {             // 标签
        position: 'left', // 位置
        verticalAlign: 'middle',
        align: 'right',
        fontSize: 12
    },
    leaves: {            // 叶子节点配置
        label: {
            position: 'right'
        }
    },
    emphasis: {          // 高亮状态
        focus: 'ancestor' // 聚焦模式：'self'|'ancestor'|'descendant'|'relative'
    },
    lineStyle: {         // 连接线样式
        color: '#ccc',
        width: 1.5,
        curveness: 0.5   // 曲率
    }
}]

5.4 桑基图(sankey)

series: [{
    type: 'sankey',
    layout: 'none',      // 布局方式
    nodeWidth: 10,       // 节点宽度
    nodeGap: 8,          // 节点间隔
    nodeAlign: 'justify', // 节点对齐方式
    draggable: true,     // 是否可拖拽
    levels: [{           // 层级配置
        depth: 0,
        itemStyle: {
            color: '#fbb4ae'
        }
    }],
    data: [              // 节点数据
        {name: '节点1'},
        {name: '节点2'}
    ],
    links: [             // 边数据
        {source: '节点1', target: '节点2', value: 10}
    ],
    label: {             // 标签
        color: '#666',
        fontSize: 12
    },
    itemStyle: {         // 节点样式
        borderWidth: 1,
        borderColor: '#aaa'
    },
    lineStyle: {         // 边样式
        color: 'source', // 颜色跟随源节点
        curveness: 0.5,  // 曲率
        opacity: 0.3     // 透明度
    },
    emphasis: {          // 高亮状态
        focus: 'adjacency', // 聚焦模式：'self'|'adjacency'|'links'
        lineStyle: {
            opacity: 0.8
        }
    }
}]

5.5 旭日图(sunburst)

series: [{
    type: 'sunburst',
    center: ['50%', '50%'], // 中心位置
    radius: [0, '90%'],   // 半径范围
    nodeClick: 'rootToNode', // 节点点击行为
    sort: 'desc',        // 排序方式：'desc'|'asc'|null
    levels: [{           // 层级配置
        r0: '0%',
        r: '40%',
        itemStyle: {
            color: 'red'
        }
    }],
    data: [{             // 数据格式
        name: '父节点',
        children: [
            {name: '子节点1', value: 10},
            {name: '子节点2', value: 20}
        ]
    }],
    label: {             // 标签
        rotate: 'radial', // 旋转方式
        fontSize: 12
    },
    itemStyle: {         // 图形样式
        borderWidth: 1,
        borderColor: '#fff'
    },
    emphasis: {          // 高亮状态
        focus: 'ancestor' // 聚焦模式
    }
}]

交互组件

6.1 工具栏(toolbox)

toolbox: {
    show: true,          // 是否显示
    orient: 'horizontal', // 布局方向
    itemSize: 15,        // 图标大小
    itemGap: 10,         // 图标间隔
    showTitle: true,     // 是否显示标题
    feature: {           // 各工具配置
        saveAsImage: {   // 保存图片
            type: 'png', // 图片格式：'png'|'jpeg'
            name: '图表', // 文件名
            title: '保存为图片',
            pixelRatio: 1 // 图片分辨率
        },
        restore: {       // 还原
            show: true,
            title: '还原'
        },
        dataView: {      // 数据视图
            show: true,
            title: '数据视图',
            readOnly: false, // 是否只读
            lang: ['数据视图', '关闭', '刷新'] // 按钮文本
        },
        dataZoom: {      // 区域缩放
            show: true,
            title: {
                zoom: '区域缩放',
                back: '区域缩放还原'
            }
        },
        magicType: {     // 动态类型切换
            show: true,
            type: ['line', 'bar', 'stack'],
            title: {
                line: '切换为折线图',
                bar: '切换为柱状图',
                stack: '切换为堆叠模式'
            }
        },
        brush: {         // 选框组件
            type: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            title: {
                rect: '矩形选择',
                polygon: '圈选',
                lineX: '横向选择',
                lineY: '纵向选择',
                keep: '保持选择',
                clear: '清除选择'
            }
        }
    },
    zlevel: 0,          // 所有图形的zlevel值
    z: 6,               // 组件的所有图形的z值
    left: 'right',      // 位置
    top: 'top',
    right: null,
    bottom: null,
    width: 'auto',      // 宽度
    height: 'auto',     // 高度
    backgroundColor: 'transparent', // 背景色
    borderColor: '#ccc', // 边框颜色
    borderWidth: 0,      // 边框宽度
    padding: 5,         // 内边距
    textStyle: {}       // 文本样式
}

6.2 刷选框(brush)

brush: {
    id: 'brush',        // 组件ID
    toolbox: ['rect', 'polygon', 'keep', 'clear'], // 工具按钮
    brushLink: null,    // 联动系列
    seriesIndex: 'all', // 控制的系列
    geoIndex: null,     // 控制的地理坐标系
    xAxisIndex: null,   // 控制的x轴
    yAxisIndex: null,   // 控制的y轴
    brushType: 'rect',  // 默认刷子类型
    brushMode: 'single', // 刷选模式：'single'|'multiple'
    transformable: true, // 是否可变形
    brushStyle: {       // 刷子样式
        borderWidth: 1,
        color: 'rgba(120,140,180,0.3)',
        borderColor: 'rgba(120,140,180,0.8)'
    },
    throttleType: 'fixRate', // 防抖类型
    throttleDelay: 0,    // 防抖延迟
    removeOnClick: true, // 点击空白处是否删除选框
    inBrush: {          // 刷选中的图形样式
        symbolSize: 30
    },
    outOfBrush: {       // 未被刷选的图形样式
        symbolSize: 10,
        color: '#ccc'
    },
    z: 10000           // 层级
}

高级功能配置

7.1 主题与样式

// 自定义主题
var theme = {
    color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'],
    textStyle: {
        fontFamily: 'Microsoft YaHei, sans-serif'
    },
    title: {
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder'
        }
    },
    line: {
        itemStyle: {
            borderWidth: 2
        },
        lineStyle: {
            width: 3
        }
    }
};

// 注册主题
echarts.registerTheme('myTheme', theme);

// 使用主题
var chart = echarts.init(dom, 'myTheme');

7.2 响应式配置

// 响应式配置函数
function resizeChart() {
    var option = {
        // 基础配置
        grid: {
            left: window.innerWidth < 768 ? '3%' : '8%',
            right: window.innerWidth < 768 ? '3%' : '8%',
            bottom: window.innerWidth < 768 ? '15%' : '10%'
        },
        legend: {
            orient: window.innerWidth < 768 ? 'horizontal' : 'vertical',
            top: window.innerWidth < 768 ? 'bottom' : 'middle'
        },
        series: [{
            // 系列配置
        }]
    };
    myChart.setOption(option);
}

// 监听窗口变化
window.addEventListener('resize', function() {
    myChart.resize();
    resizeChart();
});

7.3 事件处理

// 绑定事件
myChart.on('click', function(params) {
    console.log('点击事件:', params);
    // params包含以下属性：
    // componentType: 组件类型，如'series'
    // seriesType: 系列类型，如'line'
    // seriesIndex: 系列索引
    // seriesName: 系列名称
    // name: 数据名称
    // dataIndex: 数据索引
    // data: 原始数据项
    // value: 当前值
    // event: 原始事件对象
});

// 常用事件类型
myChart.on('mouseover', function(params) {});   // 鼠标悬停
myChart.on('mouseout', function(params) {});    // 鼠标移出
myChart.on('legendselectchanged', function(params) {}); // 图例选择变化
myChart.on('datazoom', function(params) {});    // 数据区域缩放
myChart.on('restore', function(params) {});     // 还原
myChart.on('finished', function(params) {});    // 渲染完成

// 解绑事件
myChart.off('click');  // 解绑特定事件
myChart.off();         // 解绑所有事件

7.4 动画控制

// 动画配置
option = {
    animation: true,      // 是否开启动画
    animationDuration: 1000, // 初始动画时长(毫秒)
    animationEasing: 'cubicOut', // 动画缓动效果
    animationDelay: 0,    // 动画延迟
    animationDurationUpdate: 300, // 数据更新动画时长
    animationEasingUpdate: 'cubicInOut', // 数据更新动画缓动效果
    animationDelayUpdate: 0, // 数据更新动画延迟
    stateAnimation: {     // 状态动画
        duration: 300,
        easing: 'cubicOut'
    }
};

// 动画控制API
myChart.dispatchAction({
    type: 'highlight',    // 高亮
    seriesIndex: 0,
    dataIndex: 1
});

myChart.dispatchAction({
    type: 'showTip',      // 显示提示框
    seriesIndex: 0,
    dataIndex: 1
});

myChart.dispatchAction({
    type: 'dataZoom',     // 数据缩放
    start: 20,
    end: 80
});

// 常用action类型
// 'highlight' - 高亮
// 'downplay' - 取消高亮
// 'showTip' - 显示提示框
// 'hideTip' - 隐藏提示框
// 'dataZoom' - 数据区域缩放
// 'restore' - 还原
// 'takeGlobalCursor' - 全局光标控制

性能优化

8.1 大数据量优化

series: [{
    type: 'line',
    large: true,          // 开启大数据优化
    largeThreshold: 2000, // 启用优化的阈值
    progressive: 400,     // 渐进式渲染时每一帧绘制数量
    progressiveThreshold: 3000, // 启用渐进式渲染的阈值
    data: bigData         // 大数据数组
}]

8.2 渲染器选择

// 初始化时选择渲染器
var chart = echarts.init(dom, null, {
    renderer: 'canvas'   // 可选'canvas'或'svg'
});

// 渲染器特点比较：
// Canvas:
// - 适合数据量大的场景
// - 内存占用较低
// - 不支持CSS动画
// - 不支持事件穿透

// SVG:
// - 适合元素数量少的场景
// - 支持CSS动画
// - 支持事件穿透
// - 内存占用较高

8.3 按需加载

// 1. 按需引入ECharts核心模块
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 2. 注册必须的组件
echarts.use([
    LineChart,
    TitleComponent,
    TooltipComponent,
    CanvasRenderer
]);

// 3. 初始化图表
var chart = echarts.init(dom);

8.4 虚拟滚动

// 对于超大数据集的折线图/柱状图
dataZoom: [{
    type: 'inside',
    xAxisIndex: 0,
    start: 0,
    end: 10              // 初始显示10%数据
}],
series: [{
    type: 'line',
    data: hugeData,      // 超大数组
    sampling: 'lttb',    // 采样算法：'lttb'|'average'|'max'|'min'|'sum'
    dimensions: ['date', 'value'], // 指定维度
    encode: {            // 数据到图形的映射
        x: 'date',
        y: 'value'
    }
}]

国际化与无障碍

9.1 多语言支持

// 注册语言包
echarts.registerLocale('EN', {
    time: {
        month: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ],
        week: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
});

// 初始化时指定语言
var chart = echarts.init(dom, null, {
    locale: 'EN'
});

// 工具提示国际化
tooltip: {
    formatter: function(params) {
        return params.name + ': ' + params.value;
    }
}

9.2 无障碍配置

option = {
    aria: {
        enabled: true,    // 是否开启无障碍
        label: {         // 标签配置
            description: '这是一个饼图，展示了不同类别的数据分布',
            general: {
                withTitle: '这是一个标题为"{title}"的图表',
                withoutTitle: '这是一个图表'
            },
            series: {
                maxCount: 5, // 最大系列描述数量
                single: {
                    prefix: '它由{seriesCount}个系列组成。',
                    withName: '系列名称为{name}，数值为{value}。',
                    withoutName: '数值为{value}。'
                },
                multiple: {
                    prefix: '它包含{seriesCount}个系列。',
                    withName: '系列名称为{name}，数值为{value}。',
                    withoutName: '数值为{value}。',
                    separator: {
                        middle: '；',
                        end: '。'
                    }
                }
            },
            data: {
                maxCount: 5, // 最大数据描述数量
                allData: '其数据为——{valueList}',
                partialData: '前{displayCnt}项为——{valueList}',
                withName: '{name}的数据为{value}',
                withoutName: '{value}',
                separator: {
                    middle: '，',
                    end: ''
                }
            }
        }
    }
};

扩展与自定义

10.1 自定义系列

// 注册自定义系列
echarts.registerChart('custom', CustomChart);

// 使用自定义系列
series: [{
    type: 'custom',
    renderItem: function(params, api) {
        // 自定义渲染逻辑
        return {
            type: 'group',
            children: [{
                type: 'circle',
                shape: {
                    cx: api.value(0),
                    cy: api.value(1),
                    r: api.value(2)
                },
                style: {
                    fill: api.visual('color')
                }
            }]
        };
    },
    data: [[10, 20, 5], [30, 40, 8]]
}]

10.2 自定义组件

// 注册自定义组件
echarts.registerComponent('custom', CustomComponent);

// 使用自定义组件
option = {
    custom: [{
        type: 'custom',
        // 自定义配置
    }]
};

10.3 自定义形状

// 注册自定义形状
echarts.registerShape('customShape', function() {
    return {
        buildPath: function(ctx, shape) {
            // 绘制路径
            ctx.moveTo(shape.x, shape.y);
            ctx.lineTo(shape.x + shape.width, shape.y);
            ctx.lineTo(shape.x + shape.width, shape.y + shape.height);
            ctx.lineTo(shape.x, shape.y + shape.height);
            ctx.closePath();
        }
    };
});

// 使用自定义形状
series: [{
    type: 'custom',
    renderItem: function() {
        return {
            type: 'customShape',
            shape: {
                x: 100,
                y: 100,
                width: 200,
                height: 100
            }
        };
    }
}]

以上是ECharts的全面属性详解，涵盖了从基础配置到高级功能的各个方面。实际使用时，可以根据具体需求选择合适的配置项进行组合。