React之ECharts使用

一、安装ECharts

yarn add -D echarts-for-react
yarn add -D echarts

二、折线图

纵坐标和tootip带有百分比，使用了formatter函数进行转换
自定义formatter时，需要显示折线的颜色就要用一下函数：

formatter: function(params) {
	         var result = '';
	         params.forEach(function (item) {
	             result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
	         });
	         return result;
	     }

import React, { FC } from 'react';
import ReactEcharts from 'echarts-for-react';
import styles from './lineChart.module.scss';
import { MarketChartList } from 'services/types';
import { EChartOption } from 'echarts';

const LineChart: FC<MarketList> = ({ date, list }) => {
  const getOption: EChartOption = {
    title: {  //图的标题
      text: '',
    },
    tooltip: {  //鼠标移入时图的说明
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        label: {
          backgroundColor: '#6a7985',
        },
      },
      //formatter转换函数，tooltip中以%形式展示
      formatter: function(params: EChartOption.Tooltip.Format[]): string {
        let result = '';
        params.forEach(function(item) {
          result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '%</br>';
        });
        return result;
      } as EChartOption.Tooltip.Formatter,
    },
    legend: {  //图例
      data: ['平均耗时', '模型耗时'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: { 
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [ //x坐标系
      {
        type: 'category',
        boundaryGap: false,
        data: date,
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#929292',
          },
        },
      },
    ],
    yAxis: [  //y坐标系
      {
        type: 'value',
        axisTick: {
          show: true, //是否显示刻度
        },
        axisLabel: {
          show: true,
          formatter: '{value} %',//对纵坐标的展示做了转换，以%形式展示
        },
        show: true,
        axisLine: {
          show: true, //是否显示x轴
          lineStyle: {
            color: '#929292', //包括字体颜色
          },
        },
        //设置横坐标的网格线
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#ccc',
          },
        },
      },
    ],
    series: [  //折线数据
      {
        name: '平均耗时',
        type: 'line',
        itemStyle: {
          normal: {
            color: '#81b337',
            lineStyle: {
              color: '#81b337',
            },
          },
        },
        data: data: [82, 93, 71, 34, 12, 30, 20],
      },
      {
        name: '模型耗时',
        type: 'line',
        itemStyle: {
          normal: {
            color: '#db8485',
            lineStyle: {
              color: '#db8485',
            },
          },
        },
        data:[35, 52, 51, 34, 30, 50, 10],
      },
    ],
  };

  return (
    <div style={{ padding: '30px 50px' }}>
      <div className={styles['border_div']}>
        <ReactEcharts option={getOption}></ReactEcharts>
      </div>
      <hr style={{ marginTop: 20 }} />
    </div>
  );
};
export default LineChart;

三、折线面积图

import React, { FC } from 'react'
import ReactEcharts from 'echarts-for-react'
import styles from './areaLineChart.module.scss'
const AreaLineChart: FC = () => {
  const getOption: any = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['平均耗时', '模型耗时', '最长耗时'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [
          '2020-09-22',
          '2020-09-23',
          '2020-09-24',
          '2020-09-25',
          '2020-09-26',
          '2020-09-27',
          '2020-09-28',
        ],
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#929292',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: true, //是否显示刻度
        },
        axisLine: {
          show: true, //是否显示x轴
          lineStyle: {
            color: '#929292', //包括字体颜色
          },
        },
        //设置横坐标的网格线
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#ccc',
          },
        },
      },
    ],
    series: [
      {
        name: '最长耗时',
        type: 'line',
        areaStyle: {
          color: '',
        },
        itemStyle: {
          normal: {
            color: '#888',
            lineStyle: {
              color: '#888',
              width: 3,
            },
          },
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
      {
        name: '平均耗时',
        type: 'line',
        areaStyle: {
          color: '#759AA0',
        },
        itemStyle: {
          normal: {
            color: '#00CED1',
            lineStyle: {
              color: '#00CED1',
              width: 1,
            },
          },
        },
        data: [350, 532, 501, 354, 390, 500, 510],
      },
      {
        name: '模型耗时',
        type: 'line',
        areaStyle: {
          color: '#334B5C',
        },
        itemStyle: {
          normal: {
            color: '#008080',
            lineStyle: {
              color: '#008080',
              width: 1,
            },
          },
        },
        data: [150, 232, 201, 154, 190, 300, 210],
      },
    ],
  }

  return (
    <div style={{ padding: '30px 50px' }}>
      <div className={styles['border_div']}>
        <ReactEcharts option={getOption}></ReactEcharts>
      </div>
      <hr style={{ marginTop: 20 }} />
    </div>
  )
}
export default AreaLineChart