104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div id="supplierScore" ref="supplierScore" class="chart" @click="handle"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "circleChar",
|
|
props:['data','bgColor','titleText','isStore'],
|
|
data(){
|
|
return{
|
|
}
|
|
},
|
|
mounted() {
|
|
setTimeout(()=>{
|
|
this.drawHandle();
|
|
},100)
|
|
},
|
|
methods:{
|
|
handle(){
|
|
if(this.titleText == '投诉率'){
|
|
this.$emit('clickComplain')
|
|
}else if(this.titleText == '使用率'){
|
|
this.$emit('clickUse')
|
|
}
|
|
},
|
|
// 绘制 总分图表
|
|
drawHandle() {
|
|
let supplierScoreChart = echarts.init(this.$refs.supplierScore)
|
|
let option;
|
|
let arrow=(this.titleText == '投诉率' || this.titleText == '使用率') ? '>' : ''
|
|
const gaugeData = [
|
|
{
|
|
value: this.data,
|
|
name: this.isStore ? '' : this.titleText+arrow,
|
|
title: {
|
|
offsetCenter: ['0%', '20%']
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', this.isStore ? '10%' : '-25%']
|
|
|
|
}
|
|
}
|
|
];
|
|
option = {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
pointer: {
|
|
show: false
|
|
},
|
|
progress: {
|
|
show: true,
|
|
// width:6,
|
|
itemStyle:{
|
|
color:this.bgColor
|
|
}
|
|
},
|
|
/* axisLine: {
|
|
lineStyle: {
|
|
width:12,
|
|
}
|
|
},*/
|
|
splitLine: { show: false},
|
|
axisTick: { show: false},
|
|
axisLabel: {show: false},
|
|
data: gaugeData,
|
|
title: {
|
|
fontSize: 11,
|
|
color:'rgba(4, 4, 21,0.45)'
|
|
},
|
|
detail: {
|
|
color:this.isStore ? this.bgColor : '#040415',
|
|
fontSize: this.isStore ? 43 :19,
|
|
formatter: this.isStore ? '{value}' : '{value}%'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
// 绘制图表
|
|
option && supplierScoreChart.setOption(option, true);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
.wrap{
|
|
@include flexCenter;
|
|
}
|
|
.img{
|
|
@include whMarLe(12px,10px,4px);
|
|
}
|
|
.chart{
|
|
width: 100%;
|
|
height: 125px;
|
|
}
|
|
</style> |