Echarts折线图案例
2023-06-13 09:13:03 时间
大家好,又见面了,我是你们的朋友全栈君。
问题:重置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.cn/234128.html原文链接:https://javaforall.cn
相关文章
- 记一次后门爆破到提权实战案例
- Shell编程实战案例
- 系统和系统实例-软件方法(下)第9章分析类图案例篇Part07
- 盘点一个Python网络爬虫+正则表达式处理案例
- NLP自然语言处理—主题模型LDA案例:挖掘人民网留言板文本数据|附代码数据
- 大数据必学Java基础(八十八):通过案例和概念体会反射的好处
- Docker学习6-Docker镜像commit操作案例
- 【愚公系列】2023年02月 .NET CORE工具案例-MahApps.Metro基于WPF的UI控件库
- 筑牢合规营销“防火墙”,助力四环医药实现合规营销管理能力全面进阶 | 案例研究
- 直播带货虚构流量、雇专业刷手 10起“刷单炒信”案例被曝光
- NFS实战案例: 将NFS的共享目录,做为远程主机用户的家目录
- 入门 SQL Server: 通过实用案例快速掌握SQL技术(sqlserver 书籍)
- TP5实现Redis缓存技术案例研究(tp5redis案例)