Echarts折线图线条样式问题

觉醒的萝卜 发布于 2014/12/22 15:27
阅读 14K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:Echarts折线图怎么自定义两节点间线条样式. 另外还有个问题就是可以关闭markline的交互效果吗(包括tooltip)

加载中
0
b
b4515

一、{boolean}  smooth   false   折线图 平滑曲线显示,smooth为true时lineStyle不支持虚线

二、tooltip: {

                  show:false

}

觉醒的萝卜
觉醒的萝卜
谢谢回复 ,不过我意思不是这个- -.我是指一条折线上 ,任意一段改动样式, 而不是整体样式 . 第二个问题意思是达到这种效果 : 鼠标移到markline上不会做任何效果切换, 不影响折线的tooltip ,因为当DOM很小的时候 ,容易移到markline上 ,影响体验
0
b
b4515
等待大牛回答,这些我不是很清楚了.
0
爱谁谁谁
爱谁谁谁
同问!要做一条线,然后按照数据段给不同的样式。怎么实现?@觉醒的萝卜 如果你实现了,烦请回复;谢谢
觉醒的萝卜
觉醒的萝卜
实现方法在下面
0
编程小强
编程小强
看来是不支持的,林峰在这个帖子中回答了http://www.oschina.net/question/2244363_172994
觉醒的萝卜
觉醒的萝卜
可以看看我下面的方法 ,能实现想要的效果
0
觉醒的萝卜
觉醒的萝卜

引用来自“王岩”的评论

同问!要做一条线,然后按照数据段给不同的样式。怎么实现?@觉醒的萝卜 如果你实现了,烦请回复;谢谢
我用另一种方式实现了 , 这里以一条线举例 , 说说简单思路吧 :  
(1)在series里拆分你想改变样式的数据段落 , 并且对应最终展示结果下标位置不变 , 空缺节点值给'-' ; 
像这样 {...data:['5','6','7','-','-','-','15','5'],...} , 
{...data:['-','-','-','12','14','13','-','-'] ,...}
这样就能单独对每段数据赋予样式. 
(2)细节部分 : 要实现legend点击响应所有分段 , 只需要每个分段给与相同的name值 , 以对应legend .
要实现统一的tooltip展示效果 , 只需要在tooltip里给formatter绑定function , 即可自定义展示你给echarts的内容. 
像这样:
formatter : function(params){
   //这里通过params得到你想要的数据 , 组装拼接后返回
   //不清楚params的内容可以console.log(params);在浏览器打印
   //查看
   console.log(params);
   return ...;
}
爱谁谁谁
爱谁谁谁
我晕,跟我最后用的方法一样的.曲线救国吧。【握手】
0
江南春烬

引用来自“王岩”的评论

同问!要做一条线,然后按照数据段给不同的样式。怎么实现?@觉醒的萝卜 如果你实现了,烦请回复;谢谢

引用来自“觉醒的萝卜”的评论

我用另一种方式实现了 , 这里以一条线举例 , 说说简单思路吧 :  
(1)在series里拆分你想改变样式的数据段落 , 并且对应最终展示结果下标位置不变 , 空缺节点值给'-' ; 
像这样 {...data:['5','6','7','-','-','-','15','5'],...} , 
{...data:['-','-','-','12','14','13','-','-'] ,...}
这样就能单独对每段数据赋予样式. 
(2)细节部分 : 要实现legend点击响应所有分段 , 只需要每个分段给与相同的name值 , 以对应legend .
要实现统一的tooltip展示效果 , 只需要在tooltip里给formatter绑定function , 即可自定义展示你给echarts的内容. 
像这样:
formatter : function(params){
   //这里通过params得到你想要的数据 , 组装拼接后返回
   //不清楚params的内容可以console.log(params);在浏览器打印
   //查看
   console.log(params);
   return ...;
}
您好,能完整贴一下您实现的echarts参数JSON么?我现在做的项目里面也需要用到分段显示的功能,但是我把一个数据分成两个系列之后,发现两条线之间并不会连接到一起,具体情况见图。
喃呢者-哆啦A梦
喃呢者-哆啦A梦
把其中一data冗余一个数 data[320,220,"-","-"] data["-",220,330,440]
返回顶部
顶部