LineChart折线图封装

/**
 * User: lulongwen
 * Date: 2019-10-24 10:09
 * Description: 折线图封装
 */
import React, { useEffect, useState } from 'react';
import { array, bool, number, oneOf } from 'prop-types';
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import Echarts, {
  grid, xAxis, yAxis, chartHeight, mapLabels, getColor, darkColor,
} from '@/components/Echarts';
import { readLabeledMetricsValues } from './readLabel.json';
Chart.propTypes = {
  dataSource: array,
  xAxisData: array,
  height: number,
  loading: bool,
  theme: oneOf(['light', 'dark'])
};
Chart.defaultProps = {
  dataSource: [],
  xAxisData: [],
  loading: false,
  height: chartHeight,
  theme: 'light',
};
function Chart({ dataSource, xAxisData, loading, theme, height }) {
  const [options, setOptions] = useState({});
  useEffect(update, [dataSource]);
  function update() {
    const OPTIONS = getOptions();
    setOptions(OPTIONS);
  }
  function getOptions() {
    const _dataSource = mapLabels(readLabeledMetricsValues, "P50, P75, P90, P95, P99");
    const legendData = _dataSource.map(it => it.label);
    const seriesData = _dataSource.map(({ label, value }) => {
      return {
        name: label,
        type: 'line',
        symbol: 'none',
        data: value,
        lineStyle: {
          width: 1.5,
          type: 'solid',
        },
        // stack: 'Total', // 堆叠折线图
      };
    });
    return {
      color: getColor(legendData),
      grid: { ...grid, top: 40, left: 48 },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgb(50,50,50)',
        textStyle: {
          fontSize: 13,
          color: '#ccc',
        },
        enterable: true,
        extraCssText: 'max-height: 300px; overflow: auto;',
      },
      legend: {
        type: 'scroll',
        icon: 'circle',
        itemHeight: 10, // 图例大小
        data: legendData,
        show: legendData.length > 1,
        textStyle: { color: darkColor(theme) },
      },
      xAxis: {
        ...xAxis,
        data: xAxisData,
      },
      yAxis,
      series: seriesData,
    };
  }
  const attrs = {
    height,
    options,
    loading,
    components: [
      TooltipComponent,
      LegendComponent,
      GridComponent,
      LineChart,
      UniversalTransition,
    ],
    renderType: 'svg'
  };
  return (
    <Echarts {...attrs} />
  );
}
export default Chart;

series折线图数据

一个折线图的数据

{
    series: [
        {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            smooth: true,
        },
    ];
}