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. SWUST OJ(1103)

    删除顺序表中指定区间的数据 #include <iostream> #include <cstdlib> using namespace std; int main() { i ...

  2. SYN-flood攻击

    原理:当TCP三次握手进行第一次握手时,客户端向服务端发送SYN请求报文,第二次握手服务端会返回一个SYN+ACK的一个确认报文,syn-flood攻击就发生在第三次握手,当客户端不去回应服务端的SY ...

  3. MS17-010漏洞复现

     攻击机:192.168.148.132  kali linux2018.2  x64 靶机:192.168.1.129    win7   x64 首先用msfconsole的smb模块扫描,看看是 ...

  4. 按照分层设计理念,完成《XXX需求征集系统》的概念结构设计

    按照分层设计理念,完成<XXX需求征集系统>的概念结构设计. 1.概要架构-初步设计 有关<XXX需求征集系统>的鲁棒图如下: 2.概要架构之高层分割 切系统为系统: 高层功能 ...

  5. Laravel 利用中间件控制权限。

    1.把所有需要控制的url写到config/admin.php里. 2.http/kernel.php文件里加上中间件. 3.http/Middleware/Permission.php 4.视图层

  6. Spring官方文档下载

    Spring框架是目前最流行的java web开发框架,很多时候,我们需要去查看spring的官方文档,这里就简单介绍下如何下载其官方文档. 1.搜索到spring 官网并进入 2.点击DOCS 3. ...

  7. ANG通证是什么?有关ANG通证的干货都在这里

    什么是ANG通证?▲▲▲ 通证也叫代币,是一个虚拟账户名称,是电子卡的虚拟货币.举个简单的例子,腾讯的Q币就是一种通证,我们用货币购换数个Q币,代以购买腾讯游戏里的装备等. 目前,随着加密数字通证的发 ...

  8. Python爬虫入门之Urllib库的基本使用

    那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解 ...

  9. window.opener和window.open

    window.open (URL,name,specs,replace)方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. URL:可选.打开指定的页面的URL.如果没有指定URL,打开一个新的空 ...

  10. Java 平时作业七

    以下是几本计算机书籍的基本信息 编号  书名         价格      出版社 1  JAVA 基础   32   清华大学出版社 2  JAVA WEB 开发  40   电子工业出版社 3  ...