定时刷新echart,让echart重新渲染

echarts图表显示代码

function initChart2() {
  var option; // 定时刷新需要
  let newPromise = new Promise((resolve) => {
    resolve()
  })
  //然后异步执行echarts的初始化函数
  newPromise.then(() => {
    //	此dom为echarts图标展示dom

    let chart = myEcharts.init(document.getElementById("myEcharts2"), "purple-passion");
    option = {

      series: [
        {
          type: 'gauge',
          name: '外层辅助',
          radius: '74%',
          startAngle: '225',
          endAngle: '-45',
          splitNumber: '120',
          pointer: {
            show: false
          },
          detail: {
            show: false,
          },
          data: [{
            value: 1
          }],
          // data: [{value: 1, name: 90}],
          title: {
            show: false,
            offsetCenter: [0, 30],
            textStyle: {
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 20,
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [1, '#00FFFF']
              ],
              width: 2,
              opacity: 1
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            length: 20,
            lineStyle: {
              color: '#051932',
              width: 0,
              type: 'solid',
            },
          },
          axisLabel: {
            show: false
          }
        },
        {
          type: 'gauge',
          radius: '70%',
          startAngle: '225',
          endAngle: '-45',
          pointer: {
            show: true
          },
          detail: {
            formatter: function (value) {
              var num = Math.round(value);
              return dataArr[0].value + '%';
            },
            rich: rich,
            offsetCenter: [0, '60%'], // x, y,单位px
            textStyle: {
              color: '#fff',
              fontSize: 18
            }
          },
          data: dataArr,
          title: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colorSet,
              width: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            length: 25,
            lineStyle: {
              color: '#00377a',
              width: 2,
              type: 'solid',
            },
          },
          axisLabel: {
            show: false
          },
          animationDuration: 4000,
        },
        {
          name: '灰色内圈', //刻度背景
          type: 'gauge',
          z: 2,
          radius: '60%',
          startAngle: '225',
          endAngle: '-45',
          //center: ["50%", "75%"], //整体的位置设置
          axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
              color: [
                [1, '#018DFF']
              ],
              fontSize: 20,
              width: 2,
              opacity: 1, //刻度背景宽度
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          axisTick: {
            show: true
          },
          detail: {
            show: 0
          }
        },
        { //内圆
          type: 'pie',
          radius: '30%',
          center: ['50%', '50%'],
          z: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                offset: 0,
                color: '#4978EC'
              },
                {
                  offset: .5,
                  color: '#1E2B57'
                },
                {
                  offset: 1,
                  color: '#141F3D'
                }
              ], false),
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            },
          },
          hoverAnimation: false,
          label: {
            show: false,
          },
          tooltip: {
            show: false
          },
          data: [100],
          animationType: "scale"
        },
      ]
    };
    chart.clear();// 定时刷新需要
    option && chart.setOption(option);// 定时刷新需要
  })
}

echarts定时调用代码

function getSpider(){
  initChart2();
}

window.setInterval(getSpider, 5000);// 每5s请求一次
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用定时器来实现定时刷新echart。首先,在HTML代码中,将echart的容器元素标识出来,例如使用一个div元素,并为其设置一个id,如id="main"。然后,在HTML尾部的<script>标签中,使用JavaScript代码初始化echart,如var myChart = echarts.init(document.getElementById('main'))。接下来,您可以使用定时器函数setInterval来定时执行刷新操作。例如,您可以每隔一段时间(以毫秒为单位)执行一次刷新操作,代码如下: setInterval(function() { // 在这里编写刷新echart的代码 }, 5000); 上述代码中的5000表示定时器每隔5秒执行一次刷新操作,您可以根据需求调整该时间间隔。在刷新echart的代码块中,您可以调用相应的echart API来更新图表数据或重新渲染图表。根据您提供的JSON数组,您可以使用类似以下的代码来更新echart的数据: var data = {"code":100,"msg":"处理成功!","extend":{"dateArr":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"orderCount":[0,0,0,440,50,0,0,0,0,0,0,0],"salesData":[0,0,0,232832,9296,0,0,0,0,0,0,0]}}; // 更新echart数据 myChart.setOption({ xAxis: { data: data.extend.dateArr }, series: [{ name: '订单数量', data: data.extend.orderCount }, { name: '销售数据', data: data.extend.salesData }] }); 通过以上步骤,您就可以实现定时刷新echart,并更新图表数据。请注意,您需要根据具体情况调整代码中的变量和数据结构,以适应您的实际需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [echart实现定时自动刷新数据](https://blog.csdn.net/jumptigerfu/article/details/123235804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Echarts定时异步刷新](https://blog.csdn.net/Xidian2850/article/details/90427683)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值