大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
问题：重置echarts折线图时，总会出现多个数据的拐点，与实际渲染的数据拐点不符合。
解决： 在实例化echarts后 clear 上一次的图。
myEcharts.clear()
案例
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'
}
]
]
}
]
};
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/234128.html原文链接：https://javaforall.net
