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. 命令“copy /V 已退出,代码为 1

    这个错误出现在vs生成事件里的命令行里. 第一种:简单粗暴直接清空命令行 第二种:通过输出的打印结果来分析: 比如我的出现这个原因一般有两种情况: 第一种:是可能我引用的共享盘Z盘无法连接: 第二种: ...

  2. iOS启动速度优化

    背景 7月26号我们阿里数据iOS端发布了4.4.0版本,这次版本主要是优化了性能,其中main()阶段的启动耗时优化成果比较明显,从之前的0.5-0.7秒,降低为目前的0.1-0.2秒(main() ...

  3. 基于Qt的图像处理技术和算法

    https://blog.csdn.net/silangquan/article/details/41008183

  4. 【调试基础】Part 5 PE格式

    PE概念.区块分类

  5. kali ssh远程连接过程

    准备工具: kali系统,secureCRT, 首先在kali系统中配置ssh文件,我们知道linux总是把所有的配置管理信息当作文件处理,所以对ssh的配置也是相当于对文件的编辑. vi /etc/ ...

  6. Oracle中查看SQL语句的索引命中情况及CPU占用

    第一种: 在PL/SQL中,在Explain plan Window中执行要优化的Sql语句.结果,如下图: Object name列中显示了命中的索引名,Cost列显示了CPU的使用率(%). 第二 ...

  7. test--2

    $(function () {   if (isLogined && !c_has_follwed) {   $.ajax({   url: "/mvc/Follow/Fol ...

  8. styled-components 背后的魔法

    styled-components 定义组件的风格为 const Button = styled.button` background-color: papayawhip; border-radius ...

  9. 学习python D1

    shell脚本最擅长移动文件和替换文本,并不适合GUI界面或者游戏开发,Python是一种解释型语言,在程序开发阶段可以为你节省大量时间 Python2的用户输入需要用raw_input()而非inp ...

  10. 解决Python图片处理模块pillow使用中出现的问题

    最近爬一个电影票房的网站(url:http://58921.com/alltime),上面总票房里面其实是一张图片,那么我需要把图片识别成文字,来获取票房数据.   我头脑里第一想到的解决方案就是要用 ...