bonus-ui/src/views/screen/cityScreen-old/components/equiStatus/index.vue

<template>
    <div class="content">
        <div class="content-title">
            <div class="title">
                装备状态
            </div> 
        </div>
        <div class="content-view">
            <div id="lineChartFour" style="width: 100%;height: 90%;"></div>
            <div class="text">备注说明：在用装备包含共享装备。</div>
        </div>
    </div>
</template>

<script>
import { equipmentStatusApi } from "@/api/screen/cityScreen"; 
import * as echarts from 'echarts' 
export default {
    data() {
        return { 
            myCharts4:null,
            barWidth:40,
            size:[40, 20],
            Offset1:[-0, 10],
            Offset2:[-0, -10],
            fontSize:20
        }
    },
    created() {

    },
    mounted() { 
        console.log(window.innerWidth, window.innerHeight);
        if(window.innerWidth<3000){
            this.barWidth=20
            this.size=[20, 5]
            this.Offset1=[-0, 3]
            this.Offset2=[-0, -3]
            this.fontSize=10
        }
        this.InitEChartsOne()
    },
    methods: {
        InitEChartsOne() {
            equipmentStatusApi({companyId:sessionStorage.getItem('companyId')}).then((response) => {
                console.log(response,"equipmentStatusApi")
                var dataList = response.data||[];
                var xData=[]
                var yData=[]
                var rateData=[]
                dataList.forEach(item=>{
                    xData.push(item.name)
                    yData.push(item.num)
                    rateData.push(item.rate)
                })
                var option = {
                    grid: {
                        show: true,
                        left: '18%',
                        right: '10%',
                        top: '20%',
                        bottom: '15%', 
                        borderColor: "transparent"
                    },
                    xAxis: {
                        data: xData,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#ccc',
                                fontSize: this.fontSize,
                            },
                            margin: 10, //刻度标签与轴线之间的距离。
                        },
                    },
                    yAxis: {
                        // name:"单位：t",
                        nameTextStyle:{
                            color: '#ccc',
                            fontSize:this.fontSize ,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ccc',
                                fontSize: this.fontSize,
                            },
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth:this.barWidth,
                            z: 10,
                            itemStyle: {
                                color: {
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    type: "linear",
                                    global: false,
                                    colorStops: [
                                            {
                                                offset: 0,
                                                color: '#217CA7',
                                            },
                                            {
                                                offset: .5,
                                                color: '#217CA7'
                                            },
                                            {
                                                offset: .5,
                                                color: '#2B9CCC'
                                            },
                                            {
                                                offset: 1,
                                                color: '#2B9CCC'
                                            }
                                    ],
                                },
                            },
                            label: {
                                show: true,
                                position: 'top',
                                offset: 0,
                                fontSize: this.fontSize,
                                color: '#ccc',
                                formatter: function(params) {
                                    // console.log(params) 
                                    var str = params.value+ "/" + rateData[params.dataIndex]+"%";
                                    return str;
                                },
                            },
                            data:yData
                        },
                        {
                            "name": "",
                            barWidth:this.barWidth,
                            "type": "pictorialBar",
                            symbol: 'diamond',
                            "symbolSize": this.size,
                            "symbolOffset": this.Offset1,
                            "z": 1,
                            itemStyle: {
                                color: {
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    type: "linear",
                                    global: false,
                                    colorStops: [
                                            {
                                                offset: 0,
                                                color: '#217CA7',
                                            },
                                            {
                                                offset: .5,
                                                color: '#217CA7'
                                            },
                                            {
                                                offset: .5,
                                                color: '#2B9CCC'
                                            },
                                            {
                                                offset: 1,
                                                color: '#2B9CCC'
                                            }
                                    ],
                                },
                            },
                             "data": [1, 1, 1, 1]
                        },
                        {
                            "name": "",
                            barWidth:this.barWidth,
                            "type": "pictorialBar",
                            symbol: 'diamond',
                            symbolPosition: 'end',
                            "symbolSize": this.size,
                            "symbolOffset": this.Offset2,
                            "z": 50,
                            itemStyle:{ 
                                        opacity: 1,
                                        color:'#2B9CCC',
                                    },
                            "data": yData
                        },

                    ]
                };
                this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
                this.myCharts4.setOption(option)   
            }); 
        },
    },
}
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%; 
    background-image: url("../../../../../assets/cityScreen/equiStatusBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}   
.content-title{
    width: 100%;
    height: 18%;
    position: relative;
    color: #78D6FF;
}
.title{
    font-size: 24px;
    position: absolute;
    top: 42%;
    left: 18%;
    font-family: DS-TITLE;
    background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.content-view{
    width: 100%;
    height: 85%; 
    padding-left: 8%;
}
.text{
    width: 100%;margin-bottom: 10px;color: #A9C4F8;text-align: center;
    font-size: 24px;
}
@media screen and (min-width: 1080px) { 
    .title{
        font-size: 10px;
    } 
    .text{ 
        font-size: 10px;
    }
    
}
@media screen and (min-width: 3000px) { 
    .title{
        font-size: 24px;
    }
    .text{ 
        font-size: 24px;
    }
}


</style>