ECharts 配置语法详解

ECharts 使用 option 配置对象 来定义图表的各个部分，包括标题、坐标轴、图例、数据系列等。掌握 option 语法，是使用 ECharts 进行数据可视化的核心。

1. option 配置结构

var option = {
    title: { text: 'ECharts 示例' },  // 标题
    tooltip: {},                     // 提示框
    legend: { data: ['销量'] },       // 图例
    xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },  // X轴
    yAxis: {},                        // Y轴
    series: [{                        // 数据系列
        name: '销量',
        type: 'bar',   // 图表类型
        data: [5, 20, 36, 10, 10, 20]
    }]
};
chart.setOption(option);

2. 主要配置项

2.1 title（标题）

title: {
    text: '主标题',
    subtext: '副标题',
    left: 'center',  // 标题位置：left / center / right
    textStyle: { color: '#333', fontSize: 18 }
}

2.2 tooltip（提示框）

tooltip: {
    trigger: 'axis',  // 触发方式：'item'（单个数据点）或 'axis'（整个轴）
    formatter: '{b}: {c}' // 自定义显示格式
}

2.3 legend（图例）

legend: {
    data: ['销量', '库存'],
    left: 'right' // 位置
}

2.4 grid（网格）

控制图表在画布中的位置：

grid: {
    left: '10%',
    right: '10%',
    top: '15%',
    bottom: '10%',
    containLabel: true
}

2.5 xAxis & yAxis（坐标轴）

xAxis: {
    type: 'category',  // 类别轴
    data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
    type: 'value'  // 数值轴
}

2.6 series（数据系列）

柱状图

series: [{
    name: '销量',
    type: 'bar',
    data: [10, 20, 30, 40, 50],
    itemStyle: { color: 'blue' } // 颜色
}]

折线图

series: [{
    name: '温度',
    type: 'line',
    data: [15, 20, 25, 30, 35],
    smooth: true // 平滑曲线
}]

饼图

series: [{
    type: 'pie',
    radius: '50%',  // 半径大小
    data: [
        { value: 1048, name: '苹果' },
        { value: 735, name: '香蕉' },
        { value: 580, name: '橙子' }
    ]
}]

散点图

series: [{
    type: 'scatter',
    data: [[10, 20], [20, 30], [30, 40]]
}]

3. 交互功能

3.1 toolbox（工具栏）

toolbox: {
    feature: {
        saveAsImage: {},  // 下载图片
        dataView: { readOnly: false }, // 查看数据
        restore: {}  // 还原
    }
}

3.2 dataZoom（缩放）

dataZoom: [
    { type: 'slider', start: 10, end: 80 }  // 拖动缩放
]

3.3 visualMap（视觉映射）

visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    inRange: { color: ['blue', 'red'] }
}

4. 事件监听

点击事件

chart.on('click', function (params) {
    alert(params.name + ': ' + params.value);
});

5. 组合示例

var option = {
    title: { text: '销售数据' },
    tooltip: {},
    legend: { data: ['销量', '利润'] },
    xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
    yAxis: {},
    series: [
        { name: '销量', type: 'bar', data: [10, 15, 30, 25, 20] },
        { name: '利润', type: 'line', data: [5, 10, 15, 10, 5] }
    ]
};
chart.setOption(option);

6. 总结

  • title：标题
  • tooltip：悬浮提示
  • legend：图例
  • grid：调整布局
  • xAxis & yAxis：坐标轴
  • series：数据系列
  • toolbox：工具栏（下载、查看数据）
  • dataZoom：数据缩放
  • visualMap：颜色映射
  • 事件监听：与用户交互

如果你有具体的 ECharts 需求，可以告诉我，我帮你优化配置！🚀