echartsx轴刻度线怎么换成圆点

使用Echarts 5.2.2创建数据统计图：圆点刻度线技巧

最新推荐文章于 2024-01-23 13:30:41 发布

原创最新推荐文章于 2024-01-23 13:30:41 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端

在Vue项目中，利用Echarts 5.2.2制作数据统计图时，发现官方不直接支持将x轴刻度线设置为圆点。通过巧妙配置axisTick的lineStyle，设置type为'dotted'，length为1，cap为'round'以及适当宽度，可以模拟出圆点刻度线效果，实现自定义视觉体验。

目前是2021/11/15，echarts最新版本5.2.2，做了一个vue项目后台，用echarts做数据统计图

echarts官网的所有x轴刻度线设置axisTick，我找遍所有设置，发现官方不支持直接把刻度线换成圆点

只支持实线，虚线，点线，也就是solid，dashed，dotted

我们就利用点线datted，调整样式实现我们需要的圆点刻度

通过如下配置

xAxis: {
          data: ['治安', '刑事', '交通', '消防'],
          axisTick: {
            length: 1,
            lineStyle: {
              type: 'dotted',
              color: '#5d9be8',
              width: 10,
              cap: 'round'
            }
          }
        },

实现效果如下