React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react echarts刷新不显示

react echarts刷新不显示问题的解决方法

作者:huoyueyi

最近在写项目的时候遇到了一个问题,当编辑完代码后echarts图正常展示 , 可再次刷新页面 , echarts会消失,所以本文给大家介绍了react echarts刷新不显示问题原因和解决方法,需要的朋友可以参考下

遇到了一个问题 , 当编辑完代码后echarts图正常展示 , 可再次刷新页面 , echarts会消失

问题如下图

要实现的效果

原因 : ECharts 初始化时找不到对应的 DOM 元素 , 在 React 中,DOM 元素是在组件渲染后才生成的,而你在初始化 ECharts 时试图访问还未渲染完成的 DOM 元素。

import React, { useEffect, useState, useRef } from 'react';
import aa from '@/assets/images/图标.png';
import bb from '@/assets/images/图标1.png';
import cc from '@/assets/images/图标2.png';
import dd from '@/assets/images/图标3.png';
import * as echarts from 'echarts';
import { salesStatistics } from './request';
 
const OrderSalesStatistics = () => {
  const sale = (data) => {
    const xAxisData = data.map((item) => item.month);
    const seriesData = data.map((item) => item.price);
 
    const saleOption = {
      title: {
        text: '销售总金额(元)/月',
        left: 'left',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            formatter: function (value, index) {
              // 仅显示 1、3、5、7、9、11 月的标签
              if ((index + 1) % 2 !== 0) {
                return value + '月';
              } else {
                return '';
              }
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false, // 取消 y 轴的横线
          },
        },
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: seriesData,
          itemStyle: {
            color: '#d48ca0',
          },
        },
      ],
    };
    const saleEchart = echarts.init(document.getElementById('totalSalesAmount'));
    saleEchart.setOption(saleOption);
  };
  const teachers = (data) => {
    const seriesData = data.map((item) => ({
      name: item.teacher_name,
      value: item.price,
    }));
    const option = {
      title: {
        text: '老师业绩分布TOP10',
        left: 'left',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'horizontal', // 将 orient 设置为 'horizontal'
        top: '5%', // 调整 top 属性的值,控制图例位置
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          labelLine: {
            show: false,
          },
          label: {
            // 添加label属性,在formatter函数中获取price和ratio
            formatter: function (params) {
              const { price, ratio } = data[params.dataIndex];
              return `${params.name} ${(ratio * 100).toFixed(2)}%`;
            },
          },
        },
      ],
    };
 
    const teacherEchart = echarts.init(document.getElementById('teacherPerformance'));
    teacherEchart.setOption(option);
  };
 
  const books = (data) => {
    const seriesData = data.map((item) => ({
      name: item.book_name,
      value: item.price,
    }));
    console.log('seriesData-book', seriesData);
 
    const option = {
      title: {
        text: '书籍业绩分布TOP10',
        left: 'left',
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          return `<div style="display: flex; align-items: center;">
                          <div style="width: 10px; height: 10px; border-radius: 50%; background-color: ${params.color}; margin-right: 10px;"></div>
                          <span style="color: ${params.color}">镜像地址</span> : ${params.name}
                        </div>`;
        },
      },
      series: [
        {
          name: '库存情况',
          type: 'pie',
          radius: '68%',
          center: ['50%', '50%'],
          clockwise: false,
          data: seriesData,
          label: {
            normal: {
              textStyle: {
                color: '#999',
                fontSize: 14,
              },
            },
          },
          labelLine: {
            //取消选中饼图后往外指的小横线
            normal: {
              show: false,
            },
          },
          itemStyle: {
            //饼图之间的间距
            normal: {
              borderWidth: 4,
              borderColor: '#ffffff',
            },
            emphasis: {
              borderWidth: 0,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
      color: ['#00acee', '#52cdd5', '#79d9f1', '#a7e7ff', '#c8efff'],
      backgroundColor: '#fff',
    };
 
    const bookEchart = echarts.init(document.getElementById('bookPerformance'));
    bookEchart.setOption(option);
  };
 
  const [tabArr, setTabArr] = useState([]);
  const [type, setType] = useState('');
 
  // 在组件内部定义 refs , 解决一刷新就消失
  const totalSalesAmountRef = useRef(null);
  const teacherPerformanceRef = useRef(null);
  const bookPerformanceRef = useRef(null);
 
  const initAllEcharts = async () => {
    const data = await salesStatistics();
    let { salesAmount, teacher, book, order_num, buy_num, average, income } = data;
    setType(data.type);
    console.log('type', type);
    if (data.type === 2) {
      sale(salesAmount);
      books(book);
    } else if (data.type === 1) {
      sale(salesAmount);
      teachers(teacher);
    }
 
    setTabArr([
      { name: '总订单数', value: order_num },
      { name: '总购买人数', value: buy_num },
      { name: '平均客单价', value: average },
      { name: '预计总收入', value: income },
    ]);
  };
 
  useEffect(() => {
    initAllEcharts();
  }, []);
 
  useEffect(() => {
    const initCharts = async () => {
      const data = await salesStatistics();
      let { salesAmount, teacher, book, order_num, buy_num, average, income } = data;
      setType(data.type);
 
      if (data.type === 2) {
        if (totalSalesAmountRef.current && bookPerformanceRef.current) {
          sale(salesAmount, totalSalesAmountRef.current);
          books(book, bookPerformanceRef.current);
        }
      } else if (data.type === 1) {
        if (totalSalesAmountRef.current && teacherPerformanceRef.current) {
          sale(salesAmount, totalSalesAmountRef.current);
          teachers(teacher, teacherPerformanceRef.current);
        }
      }
 
      setTabArr([
        { name: '总订单数', value: order_num },
        { name: '总购买人数', value: buy_num },
        { name: '平均客单价', value: average },
        { name: '预计总收入', value: income },
      ]);
    };
 
    initCharts();
  }, []);
 
  return (
    <div className='sales'>
      <div className='items'>
        {tabArr.map((item, index) => (
          <div className='item' key={Math.random()}>
            <div className='img'>
              {index === 0 && <img src={aa} alt='' />}
              {index === 1 && <img src={bb} alt='' />}
              {index === 2 && <img src={cc} alt='' />}
              {index === 3 && <img src={dd} alt='' />}
            </div>
            <div className='cont'>
              <div className='title'>{item.name}</div>
              <div className='total'>{item.value}</div>
            </div>
          </div>
        ))}
      </div>
 
      <div className='echarts'>                       // html部分也要加上ref
        {type === 1 ? (
          <>
            <div className='echarts-item' id='totalSalesAmount' ref={totalSalesAmountRef}></div>
            <div className='echarts-item' id='teacherPerformance' ref={teacherPerformanceRef}></div>
          </>
        ) : type === 2 ? (
          <>
            <div className='echarts-item' id='totalSalesAmount' ref={totalSalesAmountRef}></div>
            <div className='echarts-item' id='bookPerformance' ref={bookPerformanceRef}></div>
          </>
        ) : null}
      </div>
    </div>
  );
};
 
export default OrderSalesStatistics;

到此这篇关于react echarts刷新不显示问题的解决方法的文章就介绍到这了,更多相关react echarts刷新不显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文