react echarts 绘制图表 EchartsLine

给你取暖

已于 2023-02-28 18:58:46 修改

阅读量168

点赞数

分类专栏： css js 文章标签： html5 Powered by 金山文档

于 2023-02-28 18:57:46 首次发布

本文链接：https://blog.csdn.net/weixin_49409651/article/details/129267596

版权

js 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

import React, { useRef, useEffect, memo } from 'react';
import * as echarts from 'echarts';
// import echarts from './echarts.js';
//  react echarts 绘制图表 EchartsLine

const EchartsLine:React.FC<unknown> = ( ) => {
  const lineRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {

    //检测是否已经存在echarts实例，如果不存在，则不再去初始化
    let myChart = echarts.getInstanceByDom(lineRef.current as HTMLDivElement);
    if (myChart == null) {
      myChart = echarts.init(lineRef.current as HTMLDivElement);
    }
    let timer: NodeJS.Timeout | null = null;


    const option = {
      title: {
        bottom: 0,
        right: 'center',
        subtext: '主标题的属性',
        // textStyle: {//主标题的属性
        // },
        subtextStyle: {
          //副标题的属性
          color: '#8C8C8C',
          fontSize: 12, //大小
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: `
                {b}<div >UV&nbsp;<span style='float:right;'>{c}</span><div>
                `,
      },
      dataZoom: [
        {
          bottom: 30,
          height: 8,
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'none',
        },
        {
          bottom: 30,
          height: 8,
          type: 'inside',
          xAxisIndex: 0,
          filterMode: 'none',
        },
        {
          right: 20,
          width: 8,
          type: 'inside',
          yAxisIndex: 0,
          filterMode: 'none',
        },
        {
          right: 20,
          width: 8,
          type: 'slider',
          yAxisIndex: 0,
          filterMode: 'none',
        },
      ] , // 放大缩小
      grid: {
        top: 20,
        left: '5%',
        right: '8%',
        bottom: 45,
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          //坐标轴刻度标签的相关设置
          show: true,
          textStyle: {
            color: '#8C8C8C',
            fontSize: 12,
rotate:40, // 文本旋转角度
          },
          lineStyle: {
            color: '#e3e3e3',
            type: 'slider',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#e3e3e3',
          },
        },
        axisTick: [
          {
            //坐标轴小标记
            show: false,
          },
        ],
        // splitLine: {
        //     show: false,
        //     lineStyle: {
        //         color: '#e3e3e3',
        //         type: 'slider'
        //     }
        // },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          //坐标轴刻度标签的相关设置
          show: true,
          textStyle: {
            color: '#8C8C8C',
            fontSize: 12,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#e3e3e3',
            type: 'slider',
          },
        },
        // max: 1500,
      },
      series: [
        {
          type: 'line',
          smooth: false,
          // symbol: 'circle',
          // sampling: 'average',
          symbolSize: 3,
          itemStyle: {
            color: '#5B8FF9',
          },
          stack: 'a',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#5B8FF9',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
        },
      ],
    };
    myChart.setOption(option);
  }, []);

  return <div ref={lineRef} style={{ height: '270px', width: '100%' }} />;
};
export default memo(EchartsLine);