echarts-for-react

用echarts来画react的图表。

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option;

option = {
  title: {
    text: 'Stacked Line',
  },
  tooltip: {
    //提示框
    trigger: 'axis',
    backgroundColor: '#FFFFFF',
    borderColor: '#d0d0d7',
    borderWidth: 1,
    axisPointer: {
      animation: false,
      type: 'cross',
      lineStyle: {
        type: 'dashed',
        color: '#9EB7ED',
        width: 1,
        opacity: 1,
      },
    },
    formatter: (params) => {
      let newParams = '';
      newParams += `${params[0].data[0]}<br />`;
      params.forEach((param) => {
        const encode1 = param.value[param.encode.y[0]];
        const encode1Fn = fNumber(4, true, true, 'nan')(+encode1);
        const temp1 = `${param.marker}${param.seriesName}:${encode1Fn}<br />`;
        newParams += temp1;
      });
      return `<p style="coloe:#6581BE;display:inline;">${newParams}</p>`;
    },
  },
  legend: {
    //图标
    left: '5%',
    itemGap: 25,
    textStyle: {
      fontSize: 13,
      rich: {
        hint: { color: '#9A9A9A' },
        rise: { color: '#D20A10' },
        drop: { color: '#5E9B42' },
      },
    },
    inactiveColor: '#777', //点击消失后的颜色
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  toolbox: {
    //控制下载和导出数据的按钮
    top: '5%',
    right: '10%',
    feature: {
      dataView: {
        show: true,
        lang: ['', '关闭', '导出excel'],
        optionToContent: (opt) => {
          const newData = opt?.dataset[0]?.source;
          let tableHeader = '';
          opt.series.forEach((os) => {
            tableHeader = `${tableHeader}<td>${os.name}</td>`;
          });
          tableHeader += '</tr>';
          let table = `<table id="echarts-table-dataview" style="width:100%;text-align:center"><tbody><tr><td>时间</td>${tableHeader}`;
          newData.forEach((item) => {
            table = `${table}<tr>
          <td>${item.tradeData}</td>
          <td>${item.today !== '' || null ? item.today : '--'}</td>//多个数据可以多写几个
          `;
          });
          table = `${table}</tbody></table>`;
          return table;
        },
        contentToOption: () => {
          const tableSheet = XLSX.utils.table_to_sheet(
            document.getElementById('echarts-table-dataview'),
            {
              raw: true,
            },
          );
          tableSheet['!cols'] = [{ wch: 14 }, { wch: 12 }, { wch: 5 }];
          const workbook = XLSX.utils.book_new();
          const fileName = Number(flagNet) === 1 ? `标题1` : '标题2';
          XLSX.utils.book_append_sheet(workbook, tableSheet, fileName);
          XLSX.writeFile(workbook, fileName + '.xlsx');
        },
      },
    },
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
};

option && myChart.setOption(option);