百度echarts 柱状图 顶部拼接圆点效果

话不多说，简言之：原理就是，利用type="bar"的 label 能设置位置的特性，然后设置背景色、宽高、圆角等，再然后color透明即可。代码如下：

核心代码

label: {show: true,width: 8,height: 8,borderRadius: 1000,color: 'rgba(0,0,0,0)',backgroundColor: 'rgba(251, 204, 0, 1)',position: ['0%', -4],shadowBlur: 6,shadowColor: '#FBCC00',}

options

const options = {tooltip: {trigger: 'axis',backgroundColor: '#040B15',borderColor: '#040B15',textStyle: {color: 'rgba(255, 255, 255, 0.65)',fontSize: 12,},},grid: {show: false,top: 65, // 一下数值可为百分比也可为具体像素值right: '13%',bottom: '16%',left: '10%',},legend: {data: [{name: '次均巡查里程',itemStyle: {color: 'rgba(51, 167, 240, 1)',},},{name: '次均巡查覆盖度',itemStyle: {color: 'rgba(251, 204, 0, 1)',},},],top: '0%',left: 0,textStyle: {color: 'rgba(255, 255, 255, 0.65)',},itemWidth: 10,itemHeight: 10,},xAxis: [{type: 'category',data: virData.value.map((item) => {return {value: item.name,textStyle: {color: 'rgba(255, 255, 255, 0.65)',},};}),axisPointer: {type: 'shadow',},axisTick: {show: false,},},],yAxis: [{type: 'value',name: '次均巡查里程/m',nameTextStyle: {color: 'rgba(255, 255, 255, 0.65)',},min: 0,max: Math.max(...virData.value.map((item: any) => item.done)) + 10,axisLabel: {color: 'rgba(255, 255, 255, 0.65)', // y 轴标注颜色},splitLine: {lineStyle: {type: 'dashed', // 虚线color: 'rgba(255, 255, 255, 0.15)',},show: false,},},{type: 'value',name: '次均巡查覆盖度',min: 0,max: 100,nameTextStyle: {color: 'rgba(255, 255, 255, 0.65)',},axisLabel: {formatter: '{value}%',color: 'rgba(255, 255, 255, 0.65)', // y 轴标注颜色},splitLine: {lineStyle: {type: 'dashed', // 虚线color: 'rgba(255, 255, 255, 0.15)',},show: true,},},],series: [{name: '次均巡查里程',type: 'bar',data: virData.value.map((item: any) => item.done),itemStyle: {color: {type: 'linear',x: 0, // 右y: 0, // 下x2: 0, // 左y2: 1, // 上colorStops: [{offset: 0,color: 'rgba(51, 167, 240, 0.70)', // 0% 处的颜色},{offset: 1,color: 'rgba(51, 167, 240, 0)', // 100% 处的颜色},],},},barWidth: 8,label: {show: true,width: 8,height: 8,borderRadius: 1000,color: 'rgba(0,0,0,0)',backgroundColor: 'rgba(51, 167, 240, 1)',position: ['0%', -4],shadowBlur: 6,shadowColor: '#33A7F0',},},{name: '次均巡查覆盖度',type: 'bar',tooltip: {},data: virData.value.map((item: any) => item.total),itemStyle: {color: {type: 'linear',x: 0, // 右y: 0, // 下x2: 0, // 左y2: 1, // 上colorStops: [{offset: 0,color: 'rgba(251, 204, 0, 0.70)', // 0% 处的颜色},{offset: 1,color: 'rgba(251, 204, 0, 0)', // 100% 处的颜色},],},},barWidth: 8,barGap: '60%',yAxisIndex: 1,label: {show: true,width: 8,height: 8,borderRadius: 1000,color: 'rgba(0,0,0,0)',backgroundColor: 'rgba(251, 204, 0, 1)',position: ['0%', -4],shadowBlur: 6,shadowColor: '#FBCC00',},},],}

最终效果

废话几句：中途找个其他写法，比如：
1.冗余一个type=“bar”，然后用堆叠属性 stack 设置上面的点位，但是有个问题是，如果顶部效果是个小方块，那没啥问题，也挺完美（只是需要单独去处理下tooltip）；如果想要个圆点效果就差点事了，它跟下面的柱子间的位置好像也没法调整（翻文档，实在没找到属性设置），最终的效果会是圆点跟柱子时脱离的，跟UI不符了。
2.冗余一个type=“scatter”，然后也是用堆叠属性 stack 取设置点位。此种方式的问题是，位置、效果都没问题，但是偏移量跟legend的点击之间有问题了。如果没有图例点击事件也能用，但是如果图例是可点击的，那么当隐藏其中一列时，另一列上的小圆点位置没变，柱子位置自适应，两者间就会发生错位（因为一开始为了对上位置，scatter的偏移量是写死的）。此方式如果想用，需要自主处理下legend的点击事件，然后手动再设置下图表属性即可。