react echarts 折线图每隔三秒钟切换数据

最新推荐文章于 2023-09-15 14:29:00 发布

新宇最优秀

最新推荐文章于 2023-09-15 14:29:00 发布

阅读量643

点赞数

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/tendernessxy/article/details/111645401

版权

本文介绍如何在React项目中使用ECharts库，实现折线图数据每隔三秒钟自动切换的效果。尽管实际数据量可能较大，但通过示例可以清晰地看到动态切换的过程。

摘要由CSDN通过智能技术生成

实现效果：
由于我的数据过多看出来不是很明显本文数据较少效果会好
在这里插入图片描述

// “一带一路”交通大数据指数
import React, {
    Component } from 'react'

export default class Production extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            innerWidth: window.innerWidth,
            innerHeight: window.innerHeight,
            data: [
                {
    "name": "2017年7月", "maoyi": 112.11, "huoyun": 126.99, "sichou": 91.03 },
                {
    "name": "2017年8月", "maoyi": 108.63, "huoyun": 133.34, "sichou": 94.86 },
                {
    "name": "2017年9月", "maoyi": 113.1, "huoyun": 123.06, "sichou": 98.52 }],
          	tempData: [
          		{
    "name": "2020年1月", "maoyi": 148.78, "huoyun": 142.63, "sichou": 108.53 },
           	    {
    "name": "2020年3月", "maoyi": 112.06, "huoyun": 125.78, "sichou": 97.02 },
                {
    "name": "2020年4月", "maoyi": 123.82, "huoyun": 136.96, "sichou": 102.62 }]}
        this.onResize = this.onResize.bind(this);
        this.initMap = this.initMap.bind(this);
        this.chart;
        this.timer = null;
    }
    componentDidMount() {
   
        let that = this;
        window.addEventListener("resize", this.onResize, false);
        this.initMap()