巡检统计

lct123456

2022-04-15 556430aca4efb5c8a0f1788ac65cee16036e3d77

 src/views/doublePreventAction/hiddenDanger/inspectionStatistics/components/inspectionUnusual/index.vue

@@ -1,11 +1,75 @@
<template>

    <div id="toadyLine" style="width:90%;height:360px;margin: 0 auto;">
    </div>
</template>

<script>
    export default {
        name: "index"

export default {
    name: 'index',
    data(){
        return{
            numData:[],
            timeData:[],
        }
    },
    mounted() {
        this.drawTodayLine()
    },
    methods:{
        async drawTodayLine(){
            this.timeData = [1,2,3,4,]
            this.numData = [2,5,7,9]
            let myChart = this.$echarts.init(document.getElementById('toadyLine'))
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: this.timeData
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '5%',
                    top:'5%',
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.numData,
                    type: 'line',
                    itemStyle:{
                        normal:{
                            color:'#0180ff',
                            areaStyle: {
                                type:'default',
                                color: new this.$echarts.graphic.LinearGradient(0,0,0,2,[
                                    {offset:0,color:'#0180ff'},
                                    {offset:0.5,color:'#d7f4f8'},
                                    {offset:1,color:'#fff'},
                                ])
                            },
                            lineStyle:{
                                width:3,
                                type:'solid',
                                color:'#0180ff'
                            },
                            emphasis:{
                                color:'#0180ff',
                                lineStyle:{
                                    width:2,
                                    type:'dotted',
                                    color:'0180ff'
                                }
                            },
                        },
                    },
                    symbolSize:6,
                }]
            })
        }
    }
}
</script>

<style scoped>