<el-card class="box-card mt20 data-show">
<div slot="header" class="clearfix fwb c3">
<span class="ico-t"></span>
<span>诉求质量分析</span>
<div v-if=" timeLabelList.length" class="fr time-btn">
<el-radio-group @change="handleDateChange" size="small" v-model="timeLabelValue" >
<el-radio
v-for="(items, index) in timeLabelList"
:key="index" border
:label="items.value"
>{{ items.label }}</el-radio >
</el-radio-group>
</div>
</div>
<div id="mainPie4" style="width:100%;height:280px"></div>
</el-card>
import {
getWeekDay,
getDayThree,
getNowTime,
} from '@/utils/getDate';
export default{
name:'chart-quality',
data() {
return {
timeLabelList: [
{ label: '日', value: '1' },
{ label: '周', value: '2' },
{ label: '月', value: '3' },
],
timeLabelValue:'1',
dateParams: { startDate: getNowTime()},
suqiuList:[120, 200, 150, 880, 70, 110, 330, 70, 110, 330],
}
},
methods:{
handleDateChange(val) {
this.timeChangeEvent(val);
},
timeChangeEvent(val) {
if (val * 1 === 1) {
this.dateParams.startDate = getNowTime();
} else if (val * 1 === 2) {
this.dateParams.startDate = getWeekDay();
} else if (val * 1 === 3) {
this.dateParams.startDate = getDayThree();
}
this.getQuarantinePersonData();
},
getQuarantinePersonData() {
// this.$http({
// url: '',
// method: 'get',
// params: this.dateParams,
// }).then((res) => {
// console.log(res);
// });
},
},
mounted(){
var chartDom = document.getElementById('mainPie4');
var myChart = echarts.init(chartDom);
var option= {
color:['#0F97FF', '#FFDF06', '#FFC851','#5A5476','#1869A0','#FF9393'],
title: {
textStyle:{
color:'#303133',
fontStyle:'normal',
fontWeight:'500',
fontSize:14,
},
},
xAxis: {
type: 'category',
axisLine: { //单独隐藏坐标线
show: false
},
axisTick: { //单独隐藏刻度线:
show: false
},
axisLabel:{
interval: 0
},
data: ['积分入户', '疫苗接种', '网络色情', '自动售货机', '景观灯', '古树名木', '家禽屠宰','邮筒','报刊亭','民用水井'],
},
yAxis: {
name:'受理量(件)',
type: 'value',
nameTextStyle:{
padding:[0, 20, 0, 0],
color:'#303133',
}
},
grid: {
top: '20%',
left: '1%',
right: '4%',
bottom: '2%',
containLabel: true
},
series: [{
data: this.suqiuList,
type: 'bar',
barWidth : 13,//柱图宽度
itemStyle: {
normal: { //柱形图圆角,初始化效果
barBorderRadius:[15, 15, 0, 0]
}
},
barGap:'0%'
}]
};
option && myChart.setOption(option);
}
}
</script>
<style scoped lang="stylus">
.time-btn {
margin-top: -7px;
margin-bottom: -8px;
/deep/.el-radio__input{
display: none;
}
.el-radio{
margin-right:0;
}
/deep/.el-radio__label {
padding-left: 5px;
}
/deep/.el-radio--small.is-bordered{
background: rgba(211, 211, 211, 0.15);
}
/deep/.el-radio.is-bordered.is-checked{
background:rgba(15, 151, 255, 0.1);
}
}
</style>