<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';