let option;
if (myChart1 && myChart1.dispose) {
myChart1.dispose();//销毁图表
}
myChart1 = echarts.init(document.getElementById("BoardCPU"));
function randomData(a,b) {
now = new Date(+now + oneDay);
var valueX=[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')+" "+[now.getHours(), now.getMinutes(), now.getSeconds()].join(':');
return {
value: [
valueX,
NewHitory.slice(a,b)
]
}
}
var data = [];
var now = +new Date();
var oneDay = 1*1000;
for (var i = 0; i < 40; i++) {
data.push(randomData(-(41-i),-(41-i-1)));
}
option = {
title : {
text: this.props.boardNowName+'cpu(%利用率)',
},
tooltip : {
trigger:"axis",
axisPointer: {
animation: false
},
formatter:"{a}<br>{c}"
},
toolbox: {
show : true,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'time',
nameLocation:'middle',
boundaryGap : false,
axisTick:{
show:false
},
axisLabel:{
show:false
},
splitLine: {
show: true
}
}
],
yAxis : [
{
type : 'value',
min:0,
max:100,
splitLine: {
show: true
},
position:'right'
}
],
series : [
{
name:'cpu使用率',
type:'line',
data:data,
showSymbol: false,
hoverAnimation: false,
lineStyle:{
normal:{
color:'blue'
}
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}
],
animationDuration: 0,//这里两个动画设置可以让图表更顺滑
animationEasing: 'cubicInOut'//这里两个动画设置可以让图表更顺滑
};
if (option && typeof option === "object") {
myChart1.setOption(option,true);//注意要设置true
}
解决echart重新绘制图表时闪烁的问题
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2018.html
相关文章
-
echarts实现3D地图——map3D
-
使用echarts绘画时域频域图的JS代码学习
-
【Vue Echarts】天坑 子组件中的Echarts Cannot read properties of undefined (reading ‘getAttribute‘)“
-
解决,引入地图js时Uncaught TypeError: Cannot read properties of undefined (reading ‘regions‘)
-
Echarts X轴类型为time时,X轴标签的细化(年月日时分秒)
-
Echarts概念篇(坐标轴)
-
* echarts/lib/data/helper/completeDimensions in ./node_modules/_echarts-wordcloud@1.1.3@echarts-word
-
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘type‘)
-
echarts地图禁止点击事件以及鼠标默认事件
-
Echarts渲染行政区划,实现聚焦高亮交互
发布的文章
day36_JQuery
2024-02-29 12:02:27
使用jQuery操作下拉框的值(jQuery JS)
2024-02-29 12:02:27
jQuery基础
2024-02-29 12:02:11
jquery将网页html文档导出为pdf图片
2024-02-29 12:02:11
jQuery选择器
2024-02-29 12:02:10
如何使用 jQuery 刷新页面?
2024-02-29 12:02:10
基于javaweb mysql的ssm maven农产品溯源管理系统(java ssm jsp layui jquery mysql)
2024-02-29 12:02:59
开发一个简单的留言板应用——使用 Node.js 、Express 库 和 jQuery 库来实现一个简单的留言板应用程序
2024-02-29 12:02:29
jQuery
2024-01-31 12:01:10
jQuery 背景颜色
2024-02-29 12:02:18
大家推荐的文章