echarts 折线图点击高亮
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 折线图点击高亮的更多相关文章
- Echarts折线图点击事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- eCharts 折线图,动态绑定数据不更新图表的问题,
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- cron 配置
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...
- vbs中对excel的常用操作
使用QTP自动化测试中,用到对excel的读写操作,这里把一些常用对excel操作的方法进行了归纳,总结.(对excel格式设置的常用操作这里没有进行总结.) Function DataToExcel ...
- SQL基本介绍
SQL学习资料来源:http://www.w3school.com.cn/sql/index.asp SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL?SQL 指结构化查询语言SQL ...
- css--nth-child的注意点
nth-child( n ) 里面的n可以是任何整数值. 不过要取第一位开始的元素DOM对象,那么n是从1开始的 如果n值小于0或者等于0,是不会匹配任何元素,(或者超过数量)切记切记!!!! 例子: ...
- 苹果手机的SB系列(2)为什么不能重命名?
为什么没有重命名? 在手机端不能重命名,在WINOWS端文件是只读的,连他TM的只读属性都无法改,不能重命名,你让我怎么备份? 我怎么知道哪些照片上次备份过了?又重头来过?还是要用苹果的MAC?这种态 ...
- json对象转对象
方式1:var obj = JSON.parse(jsonObject); 方式2:var obj = eval("("+jsonObject+")");
- windows搭建redis集群最佳实践
一.redis的下载安装: (1)下载Redis-x64-3.2.100地址:https://github.com/MicrosoftArchive/redis/releases (2)安装后文件如下 ...
- navicat for mysql 12中文破解版(安装+破解)--亲测可用
http://www.ddooo.com/softdown/129457.htm#dltab
- 浅析Hashmap和Hashtable
一.Hashmap不是线程安全的,而Hashtable是线程安全的 通过查看源码可以发现,hashmap类中的方法无synchronized关键字,而hashtable类中的方法有synchroniz ...
- python笔记26-编码规范层级目录
bin-放的可执行文件 conf-放的配置文件 lib-放的一些lib库 temp-放的零时文件 logs-日志 core-核心逻辑 data-存放数据 README-帮助文档 start_shop. ...