Echarts折线图案例

Echarts折线图案例问题:重置echarts折线图时,总会出现多个数据的拐点,与实际渲染的数据拐点不符合。解决:在实例化echarts后clear上一次的图。myEcharts.clear()案例constoption={//触摸echarts图的提示内容tooltip:{//是否显示提示框show:true,//触发类型://’item’:主要在散点图,饼图等无类目轴的图表中使用

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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'
}
]
]
}
]
};
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234128.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • mac os x安装教程_OS X EI Capitan

    mac os x安装教程_OS X EI Capitan【引用】Mac下面除了用dmg、pkg来安装软件外,比较方便的还有用MacPorts来帮助你安装其他应用程序,跟BSD中的ports道理一样。MacPorts就像apt-get、yum一样,可以快速安装些软件。下面将MacPorts的安装和使用方法记录在这里以备查。访问官方网站http://www.macports.org/install.php,这里提供有dmg安装和源码安装两种方式,d

  • 几种tree命令的简单安装方法

    几种tree命令的简单安装方法Linux基础tree命令的安装tree命令以树状图列出文件目录结构。不过某些Linux上(Centos6)没有tree命令,本文将介绍安装方法。一、利用镜像安装安装tree命令步骤1.查看系统版本:cat/etc/issue//查看发行版本2.将对应镜像放入光驱,3.挂载镜像文件mount/dev/cd

  • GROUP BY与COUNT用法详解

    GROUP BY与COUNT用法详解聚合函数在介绍GROUPBY和HAVING子句前,我们必需先讲讲sql语言中一种特殊的函数:聚合函数,例如SUM,COUNT,MAX,AVG等。这些函数和其它函数的根本区别就是它们一般作用在多条记录上。SELECTSUM(population)FROMbbc这里的SUM作用在所有返回记录的population字段上,结果就是该查询只返回一个结果,即国家的总人口数。

  • mysql锁表原因及如何处理_mysql备份数据库命令

    mysql锁表原因及如何处理_mysql备份数据库命令解决mysql锁表的终极方法案例一mysql>showprocesslist;参看sql语句,一般少的话mysql>killthread_id;就可以解决了,kill掉第一个锁表的进程,依然没有改善。既然不改善,就想办法将所有锁表的进程kill掉吧,简单的脚本如下:复制代码代码如下:#!/bin/bashmysql-uroot-e”showprocesslist”|grep-i”L…

  • Debian 6 字体显示效果调整

    Debian 6 字体显示效果调整在给cairo打了补丁之后,我发现debian的字体显示效果还是跟ubuntu有差别,于是我把ubuntu下/etc/fonts的所有文件都打包放在了debian的/etc/fonts下,这里面ubuntu对字体的渲染做了优化,我直接拿过来用了,:)。可是效果还是不一样,最后发现了问题所在。打开“Appearance”设置对话框,选中“Fonts”标签,点击”Details”,Hintin

  • java中遍历数组_java循环取数组值

    java中遍历数组_java循环取数组值第一种方法(传统方法)inta[]={1,2,3,4,5};for(inti=0;i<a.length;i++){System.out.println(a[i]);}第二种方法(非传统方法)inta[]={1,2,3,4,5};for(inti:a){System.out.println(i);}注意:其中i的数据类型要和数组a的数组类型保持一致。第三种方…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号