修改绑定参数

马宇豪

2022-12-12 cd9dae5c7db49c3dba61609e7188a6b29a635c08

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

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

    <div id="inspectionUnusual" 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 = ['2022-4-1', '2022-4-2', '2022-4-4', '2022-4-4', '2022-4-5', '2022-4-6', '2022-4-7']
            this.numData = [2,5,7,9,1,15,6]
            let myChart = this.$echarts.init(document.getElementById('inspectionUnusual'))
            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>