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. PDOMySQL实现类, 自动重置无效连接

    PHP连接MySQL时, 有可能因为MySQL的原因,而使得php里生成的连接无效.比如超过8小时, MySQL自动断开空闲连接的问题,虽然可以调高这个时间,但显然这不是比较文艺的实现方式.现在洒家用 ...

  2. vue手把手教你实现走马灯商品左右轮播图

    <template> <div> <div class="back_add"> <div class="threeImg&quo ...

  3. gensim LDA模型提取每篇文档所属主题(概率最大主题所在)

    gensim的LDA算法中很容易提取到每篇文章的主题分布矩阵,但是一般地还需要进一步获取每篇文章归属到哪个主题概率最大的数据,这个在检索gensim文档和网络有关文章后,发现竟然没有. 简单写了一下. ...

  4. 未在本地计算机上注册microsoft.ace.12.0的解决办法

    (1)去http://download.microsoft.com/download/7/0/3/703ffbcb-dc0c-4e19-b0da-1463960fdcdb/AccessDatabase ...

  5. java 使用GET请求编码问题解决

    java GET请求解决编码的有效代码前端: encodeURI(encodeURI("你好") 后端代码: String name = request.getParameter( ...

  6. 【nowcoder】 4th T2 区间

    题目链接:https://www.nowcoder.com/acm/contest/175/B 当你为时间复杂度挠头的时候 别人已经33行拿满分了 #include<cstdio> #in ...

  7. PHP基础入门(五)---PHP面向对象实用基础知识

    前言: 今天来和大家介绍一下PHP的面向对象.说到面向对象,我不得不提一下面向过程,因为本人在初学时,常常分不清楚面向对象和面向过程,下面就来给大家介绍一下它们的区别: 面向对象专注于由哪个对象来处理 ...

  8. Metasploit模块简述

    辅助模块.渗透攻击模块.后渗透攻击模块.攻击载荷模块.空指令模块.编码器模块 做了一个思维导图,方便理解. 有需要的就下载吧: 链接:https://share.weiyun.com/5e4XVa1 ...

  9. C# DotNetBar ribboncontrol子窗体的系统控件(最大最小关闭)在父窗体中多余显示

    初始效果: 重复的子窗体按钮,看着别扭,修改MdiSystemItemVisible = False;后效果: MdiSystemItemVisible的系统解释为: 为了解决这个问题,浪费了好几天. ...

  10. java读取各种类型文件

    用到的几个包 bcmail-jdk14-132.jar/bcprov-jdk14-132.jar/checkstyle-all-4.2.jar/FontBox-0.1.0-dev.jar/lucene ...