定时刷新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请求一次