React封装折线图

最新推荐文章于 2025-06-25 17:06:14 发布

原创最新推荐文章于 2025-06-25 17:06:14 发布 · 443 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #reactjs

Echart 专栏收录该内容

27 篇文章

订阅专栏

该博客介绍了一种在React中使用Echarts库创建图表的方法。通过`MiddleLine`组件，接收`seriesData`和`xAxisData`作为输入，动态设置Echarts配置项，包括颜色、图例、悬浮提示框、x轴和y轴的显示，并在状态更新时重新渲染图表。示例展示了如何绘制多条平滑线图。

实现思路:外层直接传入整个完整的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>