定时刷新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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值