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 折线图点击高亮的更多相关文章

  1. Echarts折线图点击事件

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  3. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  4. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  5. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  6. echarts折线图,数据切换时(最近七天)绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  7. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  8. eCharts 折线图,动态绑定数据不更新图表的问题,

    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...

  9. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Genymotion下载及安装

    引用https://blog.csdn.net/yht2004123/article/details/80146989 一.注册\登录 打开Genymotion官网,https://www.genym ...

  2. 思科模拟器PacketTracer7-----2台PC通过交叉线互连

    实验二—3 实验工具:思科模拟器PacketTracer7(可在思科官网下载,免费) 实验设备: PC两台,交叉线 实验步骤: 一.配置网络拓扑图 二.配置PC0和PC1的IP地址,掩码和网关 四.通 ...

  3. 转入墙内: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 所有资源已转到百度盘: ...

  4. idea 本地tomcat启动控制台乱码问题

    问题:本地tomcat启动,控制台出现中文乱码: 解决办法: 安装了idea发现启动tomcat的时候控制台会有乱码问题,在tomcat配置中添加在VM options填写-Dfile.encodin ...

  5. win10安装配置nodejs

    下载node 官网下载node 接下来在命令提示符里(win+R)输入node -v和npm -v,如图所示,表示安装完成.   测试,   配置node 在nodejs文件目录下,新建文件夹node ...

  6. java8 简便的map和list操作

    如果你看到这篇文章,说明你对java繁琐的list和map操作产生了厌烦.在java中,频繁的操作基本上是获取到对象list,然后根据某个属性或者某几个属性的值,把list转为map,然后遍历其他对象 ...

  7. oracleDBconsole服务启动失败

    问题出现的故障:    在一次正常使用企业管理器后,重新启动计算机,再次启动OracleDBConsoleORCL服务时,报:Windows 不能在 本地计算机 启动 OracleDBConsoleo ...

  8. Monkey

    什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...

  9. git--编写好代码文件后更新到git仓库流程

    先说一下git仓库分类: Git分为三大部分存储区域1:工作区域(就是你打开编辑器的本地代码仓库)2:提交缓存区域(使用git add 命令暂时放置的区域)3:git远程仓库(使用git push命令 ...

  10. windows系统,boost编译安装

    windows系统,boost编译安装vs2017 1.下载https://www.boost.org/users/download/下载windows对应的zip包解压 2.配置vc环境变量我的是: ...