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. Kali 安装 VMwaretools 时 “没有足够可有空间提取xxxxxx”

    方法:将VMwaretools 的压缩包复制到想要解压的地方,然后再进行提取

  2. 毕设记录(ajax)

    有关ajax的cache属性值 cache作用:是否在缓存中读取数据的读取. cache属性是true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不 ...

  3. linux添加本地yum源

    增加一块硬盘 然后格式化成btrfs格式的文件 mkfs.btrfs /dev/sde 永久挂载 echo "/dev/sde /mnt btrfs defaults 0 0" & ...

  4. mac 中git操作账号的保存与删除

    保存: 在mac中自动保存git的用户名和密码很简单,只需要在终端命令行中输入下面的命令就是: git config --global credential.helper osxkeychain 然后 ...

  5. Spring Boot Application

    spring boot默认已经配置了很多环境变量,例如,tomcat的默认端口是8080,项目的contextpath是“/”等等,spring boot允许你自定义一个application.pro ...

  6. linux-0.11 内核源码学习笔记一(嵌入式汇编语法及使用)

    linux内核源码虽然是用C写的,不过其中有很多用嵌入式汇编直接操作底层硬件的“宏函数”,要想顺利的理解内核理论和具体实现逻辑,学会看嵌入式汇编是必修课,下面内容是学习过程中的笔记:当做回顾时的参考. ...

  7. day24_python_1124

    1  复习 2  TCP-UDP协议 3  tcp协议的socket 4  复杂tcp协议的socket 5  带退出的聊天程序 6  时间练习demo 7  粘包现象 1.复习 # 网络编程概念# ...

  8. CPU的系统总线

    主频:时钟频率,用来表示CPU的运算速度.主频=外频*倍频. 外频:基准频率,系统总线的工作频率,外频是CPU与主板之间同步运行的速度,大部分电脑系统中外频也是内存与主板之间同步运行的速度,在这种方式 ...

  9. idea 的Maven执行异常终止(退出代码1)

    Maven execution terminated abnormally (exit code 1)译文:Maven执行异常终止(退出代码1) 我遇到这个错很迷茫 你们遇见了不要慌 只需要粘贴一行代 ...

  10. .net core webapi 使用ValidationAttribute对比同一对象的多个参数

    众所周知,在使用DataAnnotations数据验证的时候,特别是针对同一个InputDto的多个属性进行对比的时候,例如起始日期不能大于结束日期,我们需要在Attribute中知道当前InputD ...