ECharts之实现点击复制图中文字数据！

2023-02-17 06:35:36

ECharts 实现图中数据复制：指南

简介

在使用 ECharts 创建图表时，经常需要将图表中的数据复制到其他应用程序中，如 Word 或 Excel。然而，默认情况下，ECharts 并不支持点击复制图表文本数据的功能。本文将指导你如何使用 DataView 组件轻松实现此功能。

配置 DataView 组件

引入 DataView 组件：

import * as echarts from 'echarts';
import 'echarts/components/dataView.js';

配置 DataView 组件：

option = {
  ...
  dataView: {
    show: true,
    readOnly: false,
    optionToContent: function(opt) {
      var axisData = opt.series[0].data.map(function(item) {
        return item.name;
      });
      var valueData = opt.series[0].data.map(function(item) {
        return item.value;
      });
      var table = '<table style="width: 100%; border-collapse: collapse;"><tbody>';
      for (var i = 0; i < axisData.length; i++) {
        table += '<tr><td>' + axisData[i] + '</td><td>' + valueData[i] + '</td></tr>';
      }
      table += '</tbody></table>';
      return table;
    }
  }
  ...
};

绑定点击事件

最后，需要绑定一个事件来监听图表点击并复制数据：

myChart.on('click', function(params) {
  if (params.componentType === 'dataView') {
    var table = params.content;
    copy(table);
  }
});

示例代码

import * as echarts from 'echarts';
import 'echarts/components/dataView.js';

var myChart = echarts.init(document.getElementById('myChart'));

option = {
  title: {
    text: '数据复制'
  },
  dataView: {
    show: true,
    readOnly: false,
    optionToContent: function(opt) {
      var axisData = opt.series[0].data.map(function(item) {
        return item.name;
      });
      var valueData = opt.series[0].data.map(function(item) {
        return item.value;
      });
      var table = '<table style="width: 100%; border-collapse: collapse;"><tbody>';
      for (var i = 0; i < axisData.length; i++) {
        table += '<tr><td>' + axisData[i] + '</td><td>' + valueData[i] + '</td></tr>';
      }
      table += '</tbody></table>';
      return table;
    }
  },
  series: [{
    type: 'bar',
    data: [
      {
        name: '数据 1',
        value: 10
      },
      {
        name: '数据 2',
        value: 20
      },
      {
        name: '数据 3',
        value: 30
      }
    ]
  }]
};

myChart.setOption(option);

myChart.on('click', function(params) {
  if (params.componentType === 'dataView') {
    var table = params.content;
    copy(table);
  }
});