ECharts如何添加交互功能

ECharts 是一款基于 JavaScript 的开源可视化库，提供了丰富的图表类型和强大的交互能力。要在 ECharts 中添加交互功能，你需要使用它的配置项和事件监听。以下是一些常见的交互功能及其实现方法：

1. 鼠标悬停提示框（Tooltip）： ECharts 默认提供了鼠标悬停提示框功能，你可以在 option 对象中设置 tooltip 配置项来自定义提示框的样式和内容。

   const option = {
       tooltip: {
           trigger: 'item', // 触发类型，可以是 'item'、'axis' 或 'none'
           triggerOn: 'mousemove' // 触发时机，可以是 'mousemove' 或 'click'
       },
       series: [{
           type: 'bar',
           data: [120, 200, 150, 80, 70, 110, 130]
       }]
   };
   

2. 数据区域缩放（Data Zoom）： 数据区域缩放功能允许用户通过鼠标滚轮或拖动来缩放图表的显示范围。

   const option = {
       dataZoom: [
           {
               type: 'slider', // 缩放类型，可以是 'slider' 或 'inside'
               start: 0, // 初始起始位置，取值范围 [0, 100]
               end: 100 // 初始结束位置，取值范围 [0, 100]
           }
       ],
       series: [{
           type: 'line',
           data: [120, 200, 150, 80, 70, 110, 130]
       }]
   };
   

3. 图例（Legend）： 图例用于显示图表中各个系列的标签，用户可以通过点击图例来切换显示或隐藏某个系列的数据。

   const option = {
       legend: {
           data: ['系列1', '系列2']
       },
       series: [
           {
               name: '系列1',
               type: 'bar',
               data: [120, 200, 150, 80, 70, 110, 130]
           },
           {
               name: '系列2',
               type: 'line',
               data: [50, 100, 150, 80, 70, 110, 130]
           }
       ]
   };
   

4. 数据区域选择（Data Selection）： 数据区域选择功能允许用户通过鼠标拖选来选择图表中的数据区域，并可以获取选中数据的详细信息。

   const option = {
       dataZoom: [
           {
               type: 'slider',
               start: 0,
               end: 100
           }
       ],
       series: [
           {
               type: 'bar',
               data: [120, 200, 150, 80, 70, 110, 130]
           }
       ]
   };
   
   // 监听数据区域选择事件
   myChart.on('dataZoom', function (params) {
       console.log(params);
   });
   

5. 工具栏（Toolbox）： 工具栏提供了多种操作按钮，如保存图片、数据区域缩放、数据区域选择等。

   const option = {
       toolbox: {
           feature: {
               saveImage: {
                   show: true, // 是否显示保存图片按钮
                   title: '保存图片', // 按钮标题
                   icon: 'M 0,0 L 12,12 M 0,12 L 12,0' // 图标
               },
               dataZoom: {
                   show: true,
                   title: ['数据区域缩放', '数据区域放大', '数据区域缩小']
               },
               dataView: {
                   show: true,
                   title: '数据视图',
                   icon: 'M 12,12 H 7V 7H 12 V 12 H 7 V 7 H 12 z M 12,9 H 7 V 4 H 12 V 9 H 7 V 4 H 12 z M 12,16 H 7 V 11 H 12 V 16 H 7 V 11 H 12 z'
               },
               reset: {
                   show: true,
                   title: '重置'
               }
           }
       },
       series: [
           {
               type: 'bar',
               data: [120, 200, 150, 80, 70, 110, 130]
           }
       ]
   };
   

通过以上配置和事件监听，你可以在 ECharts 中实现丰富的交互功能。更多详细信息和示例代码，请参考 ECharts 官方文档：https://echarts.apache.org/zh/tutorial.html。