CKQ/src/views/home/components/SensorStatus.vue

<template>
<div class="item">
    <div class="title">
        <span class="name">传感器在线状况</span>
        <span class="number">24</span>
    </div>
    <div class="container">
        <div id="sensor-status-chart" v-if="status"></div>   
    </div>
</div>
</template>
<script>
 import * as echarts from 'echarts';
  export default {
    name:"SensorStatus",
    data(){
        return{
            myChart:null,
            status:true,
            option :{
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    textStyle:{
                        color:'#fff'
                    }
                },
                grid: {
                    top:'20%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel:{
                        color:'#fff'                      
                    },
                    axisLine:{
                        show:false
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'category',
                    data: ['在线', '离线'],
                    axisLabel:{
                        color:'#fff'                      
                    },
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '压力',
                        type: 'bar',
                        data: [63,19, 23, 31, 12, 13]
                    },
                    {
                        name: '位移',
                        type: 'bar',
                        data: [19, 23, 31, 12, 13, 68]
                    },
                    {
                        name: '有害气体',
                        type: 'bar',
                        data: [19, 23, 31, 12, 13, 68]
                    }
                ]
            }
        }
    },
    created(){
        // this.$nextTick(()=>{
        //     this.init()
        // })
    },
    methods:{
        init(){
            var chartDom = document.getElementById('sensor-status-chart');
            var myChart = echarts.init(chartDom);
            
            this.option && myChart.setOption(this.option);  
            myChart.on('click', function(params) {
                console.log("SensorStatus",params)
            }); 
            this.myChart=myChart                     
        }
    },
    destroyed() {
        this.status=false
    },
  }
</script>
<style lang="scss" scoped>
.container{
    height: 13.2vh !important; 
    // min-height: 164px;
    #sensor-status-chart{
        width: 95%;
        height: 100%;
    }    
}
</style>