ECharts折线图去掉图例和线段上的小圆点

官方的初始效果

折线图的图例有小圆点,并且图表中也有小圆点
ECharts折线图去掉图例和线段上的小圆点_第1张图片

最终效果

去掉图例和图标中的小圆点
并且柱状图和折线图的图例要不同
ECharts折线图去掉图例和线段上的小圆点_第2张图片

代码实现

  1. 去掉图例小圆点
    官方文档
    ECharts折线图去掉图例和线段上的小圆点_第3张图片itemStyle: { opacity: 0 }
    在这里插入图片描述


  2. 折线图中的小圆点去掉
    官方文档
    ECharts折线图去掉图例和线段上的小圆点_第4张图片两个代码二选一就行,效果是一样的,一个是不显示,一个是显示,但尺寸为0
    symbol: 'none', symbolSize: 0,
    ECharts折线图去掉图例和线段上的小圆点_第5张图片





后记

最开始的思路是修改Icon为roundRect,
ECharts折线图去掉图例和线段上的小圆点_第6张图片

这样虽然可以去掉默认的带小圆点的图例,但是图例的宽高就只能在全局指定,所以柱状图的图例也会跟着改变
ECharts折线图去掉图例和线段上的小圆点_第7张图片所以还是直接修改样式比较方便



优质好文
关于图例的更多知识

你可能感兴趣的:(ECharts样式调整,echarts,前端,javascript)