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

àì夳堔傛蜴生んèń 2022-10-13 05:17 690阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

*  隐藏坐标线

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221005/78688636777f417a9b1f8257316fcafb.png