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. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  2. React文档(二十三)Web Components

    React和web components是为了解决不同问题而创立的.web components为可重用组件提供了健壮的封装,而React提供了声明式的库来保持DOM和数据同步.这两点是互相补充的.作 ...

  3. 九度1456胜利大逃亡【BFS】

    时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:4432 解决:1616 题目描述: Ignatius被魔王抓走了,有一天魔王出差去了,这可是Ignatius逃亡的好机会.魔王住在一个城堡 ...

  4. python 近义词库包 synonyms 的使用

    最近接触到nlp的一些东西,需要找出中文词语的近义词,也接触到了一个synonyms 的库, 分词,去停用词,word2vector  等 一些列nlp 的操作,还可以输出中文词语的近义词 https ...

  5. C#操作SQLServer2012类

    public class SqlServerService { public string CONN_STRING { get; set; } = "Data Source=.;Databa ...

  6. C# 3.0 / C# 3.5 对象集合初始化器、匿名类

    对象集合初始化器 在 .NET 2.0 中构造一个对象的方法一是提供一个重载的构造函数,二是用默认的构造函数生成一个对象,然后对其属性进行赋值. 在 .NET 3.5/C# 3.0 中,我们有一种更好 ...

  7. mysql 循环、游标

    mysql 循环只能在存储过程.代码记录 CREATE DEFINER=`front`@`%` PROCEDURE `a_1`() BEGIN -- 声明变量,接收游标循环变量 DECLARE _co ...

  8. Django 之 cookie和session

    一. Cookie 1.Cookie的由来 因为HTTP协议是无状态的,无状态的意思就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,也不会受前后请求响应情况直接影响.简 ...

  9. '假定以下程序经编译和连接后生成可执行文件PROG.EXE,如果在此可执行文件所在目录的DOS提示符下键入:PROG ABCDEFGH IJKL<回车>,则输出结果为( ). void main( int argc, char *argv[]) { while(--argc>0) cout<<argv[argc]; cout<<"\n"; }

    main(int argc,char *argv[])函数的两个形参,第一个int argc,是记录你输入在命令行(你题目中说的操作就是命令行输入)上的字符串个数:第二个*argv[]是个指针数组,存 ...

  10. 开发部署项目时出现:java.lang.OutOfMemoryError: PermGen space

    java.lang.OutOfMemoryError: PermGen space 错误: 原文地址:http://www.cnblogs.com/shihujiang/archive/2012/06 ...