vue echarts柱状图 隐藏坐标轴刻度线等 横向显示百分比

• 隐藏坐标线

axisLine: {
	show: false
},

• 隐藏刻度线

axisTick: {
	show: false
},

• label展示formatter百分比

已经封装好的组件，可以直接复制代码使用，自行传入data.
bar.vue

<template>
	<!-- 柱状图 -->
	<div ref="echart" class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts';
	const animationDuration = 1000

	export default {
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '500px'
			},
			height: {
				type: String,
				default: '300px'
			},
			chartData: {
				type: Object,
				required: true
			},
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$refs.echart);
				this.setOptions(this.chartData)
			},
			setOptions(data) {
				this.chart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: ['质量异常', '无质量异常']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						show: false
					},
					yAxis: {
						type: 'category',
						data: ['准确性', '有效性', '完整性', '唯一性'],
						//隐藏坐标线
						axisLine: {
							show: false
						},
						//隐藏刻度线
						axisTick: {
							show: false
						},
					},
					series: [{
							name: '质量异常',
							type: 'bar',
							stack: 'total',
							label: {
								show: true,
								formatter: '{c}%'
							},
							itemStyle: {
								color: '#F9C660'
							},
							data: data.abData
						},
						{
							name: '无质量异常',
							type: 'bar',
							stack: 'total',
							label: {
								show: true,
								formatter: '{c}%'
							},
							itemStyle: {
								color: '#E6696D'
							},
							data: data.niceData
						},
					]
				})
			},
		}
	}
</script>

引用页面部分代码

<el-col :span="10" :offset="2">
	<el-row>
		<el-col :span="1" class="little-tip">
		</el-col>
		<el-col :span="21" class="tip-font">
			全局分类质量
		</el-col>
	</el-row>
	<data-quality-bar :chartData="data"></data-quality-bar>
</el-col>