Echarts折线图案例

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

问题：重置echarts折线图时，总会出现多个数据的拐点，与实际渲染的数据拐点不符合。

解决： 在实例化echarts后 clear 上一次的图。

myEcharts.clear()

Jetbrains全家桶1年46，售后保障稳定

案例

import * as echarts from 'echarts';
// ...
const myEcharts = echarts.init(document.querySelector('#test'));
const myTestEcharts = echarts.init(document.querySelector('#test2'));
myEcharts.group = 'group1';
myTestEcharts.group = 'group1';
// 以上两组会进行关联
const option = { 

// 触摸 echarts图 的提示内容
tooltip: { 

// 是否显示提示框
show: true,
// 触发类型：
// 'item':主要在散点图，饼图等无类目轴的图表中使用
// 'axis': 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
// 'none': 什么都不触发
trigger: 'axis',
// 自定义提示框文案
formatter(params) { 

// console.log(params, 'params');
return 'test';
}
},
// X轴
xAxis: { 

// 类型
type: 'time',
// 刻度对齐
boundaryGap: true
},
// Y轴
yAxis: { 

type: 'category',
boundaryGap: true,
// 对应展示数据
data: yAxisData,
// 展示文案
axisLabel: { 

// 自定义文案
formatter: function (params) { 

const arr = params.split(':');
arr.pop();
return arr.join(':');
}
}
},
grid: { 

// 显示数据的图表位于当前canvas的坐标轴
x: 150,
y: 55,
borderWidth: 1
},
// 坐标轴伸缩
dataZoom: [
// type: 'slider'; 鼠标滚轮缩放/触摸板双指
{ 

type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100
},
{ 

type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 0,
end: 100
},
// type: 'inside'; 范围点击缩放
{ 

type: 'inside',
xAxisIndex: [0],
start: 0,
end: 100
},
{ 

type: 'inside',
yAxisIndex: [0],
start: 0,
end: 100
}
],
series: [
{ 

name: 'group1', // 每条折线命名后可以通过connect关联
type: 'line',
symbol: 'none', // 折线图拐点形状
// symbolSize: 6, // 形状大小
smooth: true, // 线条平滑
markPoint: { 
 // 自定义拐点
symbolSize: 20, // 下面data中统一大小
data: [
{ 

coord: [item.startTime, action], // [X轴, Y轴]
symbol: 'circle', // 形状
symbolSize: 8 // 大小
// ...旋转、位置
}
]
}
},
markArea: { 
 // 折线粉红色背景区间
itemStyle: { 

color: 'rgba(255, 173, 177, 0.4)'
},
data: [
[
{ 

name: 'test', // 区间title
xAxis: '2022-03-23 11:17:17'
},
{ 

xAxis: '2022-03-26 14:17:17'
}
]
]
}
]
};