React封装折线图

实现思路:外层直接传入整个完整的options,实现渲染效果

xAxisData: x轴数据
seriesData: 系列数据
legend: 图例设置
tooltip: 悬浮窗设置

import React, { useState, useEffect } from 'react';
import EchartInit from '../EchartInit/index'

// 中间数据处理层
export default function MiddleLine(props: any) {
  const {seriesData, xAxisData} = props;

  const [options, setOptions] = useState({});
  let colorDefault = ['#BA55D3', '#8A2BE2', '#FFB6C1', '#DB7093']
  // formatter options
  const init = () => {
    let option = {
      color:colorDefault,
      legend: {
        show: true,
      },
      // 悬浮提示框
      tooltip: {
        show: true,
        trigger:'axis',
      },
      // x轴
      xAxis: {
        type: 'category',
        data: xAxisData,
      },
      // y轴
      yAxis: {
        type: 'value'
      },
      // 显示数据
      series: seriesData,
    };

    setOptions(option);
  }


  useEffect(() => {
    init();
  }, [seriesData])

  return (
    <EchartInit options={options} />
  )
}

let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let seriesData = [
  {
    name: 'Forest',
    data: [8120, 932, 1901, 934, 1290, 41330, 1320],
    type: 'line',
    smooth: true,
    symbol:'none',
  },
  {
    name: 'Steppe',
    data: [1020, 732, 9901, 41934, 1290, 13300, 11320],
    type: 'line',
    smooth: true,
    symbol:'none',

  },
  {
    name: 'Banans',
    data: [4020, 3732, 6901, 41934, 9290, 23300, 61320],
    type: 'line',
    smooth: true,
    symbol:'none',

  }
]

<div className="line">
    <Line seriesData={seriesData} xAxisData={xAxisData} />
</div>