echarts 折线图点击高亮
echarts中注册事件很多 ,记录下今天做的折线图点击高亮;
查了api,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了。
上图:
如图所示,只能圆点变大。。。
贴出代码:
function chartModule () {
var self = this;
var myChart = null;
var prevIndex = null;
this.init = function () {
myChart = echart.init(document.getElementById('myChart'));
};
this.chartInfo = function () {
var option = {
//此处略。。
};
myChart.setOption (option);
myChart.on('click',function(params){
self.highlight(params.seriesIndex);
}
};
this.highlight= function (index){//高亮
prevIndex = index;//记录上次高亮位置
myChart.dispatchAction({
type: 'highlight',
seriesIndex: index,
})
};
this.downplay= function (){ //取消高亮 直接调用就可以
myChart.dispatchAction({
type: 'downplay',
seriesIndex: prevIndex,
})
}
}
如果有人能够点击时直接将整条线条加粗高亮显示,还请大神赐教!!!
echarts 折线图点击高亮的更多相关文章
- Echarts折线图点击事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- eCharts 折线图,动态绑定数据不更新图表的问题,
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- Genymotion下载及安装
引用https://blog.csdn.net/yht2004123/article/details/80146989 一.注册\登录 打开Genymotion官网,https://www.genym ...
- 思科模拟器PacketTracer7-----2台PC通过交叉线互连
实验二—3 实验工具:思科模拟器PacketTracer7(可在思科官网下载,免费) 实验设备: PC两台,交叉线 实验步骤: 一.配置网络拓扑图 二.配置PC0和PC1的IP地址,掩码和网关 四.通 ...
- 转入墙内:SAS HBA crossflashing or flashing to IT mode, Dell Perc H200 and H310
Default firmware for this guide is:2118it.binVersion 20.00.07.00Release date: 11-FEB-16 所有资源已转到百度盘: ...
- idea 本地tomcat启动控制台乱码问题
问题:本地tomcat启动,控制台出现中文乱码: 解决办法: 安装了idea发现启动tomcat的时候控制台会有乱码问题,在tomcat配置中添加在VM options填写-Dfile.encodin ...
- win10安装配置nodejs
下载node 官网下载node 接下来在命令提示符里(win+R)输入node -v和npm -v,如图所示,表示安装完成. 测试, 配置node 在nodejs文件目录下,新建文件夹node ...
- java8 简便的map和list操作
如果你看到这篇文章,说明你对java繁琐的list和map操作产生了厌烦.在java中,频繁的操作基本上是获取到对象list,然后根据某个属性或者某几个属性的值,把list转为map,然后遍历其他对象 ...
- oracleDBconsole服务启动失败
问题出现的故障: 在一次正常使用企业管理器后,重新启动计算机,再次启动OracleDBConsoleORCL服务时,报:Windows 不能在 本地计算机 启动 OracleDBConsoleo ...
- Monkey
什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...
- git--编写好代码文件后更新到git仓库流程
先说一下git仓库分类: Git分为三大部分存储区域1:工作区域(就是你打开编辑器的本地代码仓库)2:提交缓存区域(使用git add 命令暂时放置的区域)3:git远程仓库(使用git push命令 ...
- windows系统,boost编译安装
windows系统,boost编译安装vs2017 1.下载https://www.boost.org/users/download/下载windows对应的zip包解压 2.配置vc环境变量我的是: ...