原因不是很清楚,但是我的解决思路是这样的:
我们现在都知道让线图默认自然展示情况下不显示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高亮的方法放在了定时器里面,加了个五秒的延时,果然就好了,这个时间就按着各自实际情况给