ECharts 交互组件

ECharts 提供了丰富的 交互组件，如工具栏、数据缩放、提示框、图例等，帮助用户更方便地操作和查看图表数据。

1. 工具栏（toolbox）

toolbox 提供了常见的交互功能，如 保存图片、数据视图、动态刷新、区域缩放等。

1.1 基本使用

var option = {
    toolbox: {
        show: true,
        feature: {
            saveAsImage: { show: true },  // 保存为图片
            dataView: { show: true, readOnly: false },  // 查看数据
            restore: { show: true },  // 还原
            magicType: { show: true, type: ['line', 'bar'] },  // 切换图表类型
            dataZoom: { show: true }  // 数据缩放
        }
    },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30] }]
};

📌 功能说明

  • saveAsImage：将图表保存为 PNG 图片
  • dataView：显示原始数据，可编辑
  • restore：重置图表
  • magicType：切换图表类型（折线图/柱状图）
  • dataZoom：添加缩放功能

2. 数据缩放（dataZoom）

dataZoom 允许用户缩放 X 轴或 Y 轴 数据，适用于大数据量图表。

2.1 水平滚动缩放

var option = {
    dataZoom: [{ type: 'slider', start: 10, end: 60 }],  // 拖动缩放
    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50, 60, 70] }]
};

📌 说明

  • type: 'slider'：带滑块的缩放
  • start: 10, end: 60：初始缩放范围（10% – 60%）

2.2 鼠标滚轮缩放

var option = {
    dataZoom: [{ type: 'inside' }],  // 鼠标滚轮缩放
    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50, 60, 70] }]
};

📌 说明

  • type: 'inside'：启用 鼠标滚轮缩放
  • 适用于 大数据量时的交互优化

3. 提示框（tooltip）

tooltip 用于 悬浮时显示数据详情，支持多种触发方式。

3.1 基本使用

var option = {
    tooltip: { trigger: 'axis' },  // 触发方式
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'line', data: [10, 20, 30] }]
};

📌 说明

  • trigger: 'axis'：悬浮时显示 整条 X 轴数据
  • 适用于 折线图、柱状图

3.2 自定义格式

var option = {
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return `${params.name}: <strong>${params.value}</strong> 单位`;
        }
    },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30] }]
};

📌 说明

  • formatter 自定义格式
  • ${params.name} 获取 类别
  • ${params.value} 获取 数据值

4. 图例（legend）

legend 允许用户 显示/隐藏 系列数据，适用于多系列图表。

4.1 基本使用

var option = {
    legend: { show: true },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [
        { name: '系列1', type: 'line', data: [10, 20, 30] },
        { name: '系列2', type: 'bar', data: [5, 15, 25] }
    ]
};

📌 说明

  • 点击图例可隐藏/显示系列

4.2 位置设置

legend: {
    orient: 'vertical',  // 垂直排列
    left: 'right'  // 右侧显示
}

5. 数据区域选择（brush）

brush 允许用户选择数据区域，适用于 数据分析、放大查看等。

5.1 开启矩形选择

var option = {
    brush: { toolbox: ['rect', 'polygon', 'clear'] },
    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
};

📌 功能

  • rect：矩形选择
  • polygon：多边形选择
  • clear：清除选择

6. 全局手势缩放

允许用户通过手势或鼠标缩放整个图表：

var option = {
    geo: {
        map: 'china',
        roam: true  // 开启缩放
    }
};

📌 适用于 地图、散点图等

7. 交互组件应用场景

组件功能适用图表
toolbox导出、数据视图所有图表
dataZoom缩放数据折线图、柱状图
tooltip数据提示所有图表
legend控制显示多系列图表
brush选择数据柱状图、散点图

🚀 你需要哪种交互组件？