vue中实现echarts的横向百分比
<ele-chart ref="visitChart3" style="height: 80px" :option="totalparts" /> computed: { // 柱状图 totalparts() { return { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, // legend: { // data: ['P-level', 'E-level', 'Q-level'] // }, grid: { left: '3%', right: '4%', bottom: '2%', containLabel: true }, xAxis: { type: 'value', show: false }, yAxis: { type: 'category', data: [''], //隐藏坐标线 axisLine: { show: false }, //隐藏刻度线 axisTick: { show: false } }, series: [ { name: 'P-level', type: 'bar', stack: 'total', label: { show: true, formatter: '{c}%' }, itemStyle: { color: '#2379F9' }, data: [30] }, { name: 'E-level', type: 'bar', stack: 'total', label: { show: true, formatter: '{c}%' }, itemStyle: { color: '#61B2FC' }, data: [50] }, { name: 'Q-level', type: 'bar', stack: 'total', label: { show: true, formatter: '{c}%' }, itemStyle: { color: '#23D4A1' }, data: [20] } ] }; } }, activated() { this.getTableData(); this.$refs['visitChart3'].resize(); }, export default { components: { EleChart }, data() { return {} } } import EleChart from 'ele-admin/packages/ele-chart';