Echarts柱形头部圆弧处理-灵析社区

对于柱状图来说，我们想要的效果是圆柱的上面进行圆弧的处理，产生顺滑的感觉，怎么处理呢，只要设置好样式即可，参考源代码

圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:borderRadius: 5, // 统一设置四个角的圆角大小borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）

示例效果

示例源代码（共75行）

/*
* @Author: 还是大剑师兰特（CSDN）
* @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-03
*/
<template>
	<div class="container">
		<h3>vue+echarts：柱形头部圆弧处理</h3>
		<p>大剑师兰特，还是大剑师兰特</p>
		<div id="vue-echarts" ref="refEcharts"> </div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写
	export default {
		name: 'cuclife',
		data() {
			return {}
		},
		methods: {
			initCharts() {
				let myChart = echarts.init(this.$refs.refEcharts);
				myChart.setOption({
					title: {
						text: '标题：ECharts示例'
					},
					xAxis: {
						data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet']
					},
					yAxis: {},

					series: [{
						name: '技能值',
						type: 'bar',
						data: [5, 36, 10, 10, 20],
						itemStyle: { 
						    //圆弧处理的核心源代码
							borderRadius:[20,20,0,0,0],
							//静态时显示状态
						    color: new echarts.graphic.LinearGradient(
						         // (x1,y1) 点到点 (x2,y2) 之间进行渐变
						         1, 0, 0, 0,
						         [
						              { offset: 0, color: '#0000ff' }, // 0 起始颜色
									  { offset: 0.5, color: '#ff0000' }, // 0 起始颜色
						              { offset: 1, color: '#0099ce' }  // 1 结束颜色
						        ]
						     ),
						},
					}]
				});
			}
		},
		mounted() {
			this.initCharts();
		}
	}
</script>
<style scoped>
	.container {
		width: 840px;
		height: 580px;
		margin: 50px auto 0;
		border: 1px solid rgb(228, 57, 97);
	}

	#vue-echarts {
		width: 800px;
		height: 460px;
		border: 1px solid #d8d;
		margin: 0 auto;
	}
</style>