Echarts线图在设置x轴高亮之后选中状态下的线的symbol不显示了

原因不是很清楚,但是我的解决思路是这样的:

我们现在都知道让线图默认自然展示情况下不显示symbol 是通过将showSymbol 值赋值为false,但是这种时候,如果我们通过setOtion 方法设置x轴选中标签高亮时,symbol 显示就会失效,于是我想通过其它办法来实现相同的显示效果,那就是

showSymbol属性值改为true(这个点很关键),也就是从始至终都让线图有symbol 的展示,只是先将symbolSize值设置成和线的粗细一样的大小,这样就看不出来它的存在,在选中某一项时,再通过emphasis 高亮设置的属性放大symbol以达到显示出来的效果,样式修改也是同理,如果需要边框,那就默认边框无色,高亮时再通过itemStyle 给边框颜色,具体核心代码如下:

series:[{
…symbol:“circle”, showSymbol:true,  symbolize:4,itemStyle: { color: “#33A5FA”, lineStyle: { width: 4, color: “#33A5FA”}}, …
emphasis: { scale:  3.75, itemStyle: { border color: “#fff”,borderWidth:  3, color: “#33A5FA” } }
}]

这样写有两个注意事项:

1.echarts版本

写完可能发展这样并不好用,那就要检查一下echarts版本,官网上说明了高亮中scale属性允许使用数字格式的版本,低版本会导致数值不生效,只支持布尔值

2.延时器

版本也给了还是不生效,那就要想一下有可能是什么原因导致的,因为我这个项目的图是带有动画渲染的,会有三秒左右的绘制时间,首次进入页面不生效,但是如果做了修改保存后,样式就生效了,所以我怀疑是因为渲染速度的问题,可能是一开始这个初始化的图还没有渲染好就被我后面的setOption 打断了或者是怎么样,于是我给修改x高亮的方法放在了定时器里面,加了个五秒的延时,果然就好了,这个时间就按着各自实际情况给

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容