echart 柱状图切换

 

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