vue+echarts实现疫情(全国新增趋势、境外输入省市TOP5)

深碍√TFBOYSˉ_ 2024-04-01 18:06 123阅读 0赞

全国新增趋势

效果：

![5a66a146df38401ab7110038852c6066.png][]

代码：

<template>
      <div>
        <div id="right1" style = "height:800px;width:100%"></div>
      </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                //疫情数据
                data:{
                    数据太大 需要滴滴
                }
            };
        },
        methods:{
    
        },
        mounted(){
            //初始化echart实例对象
            var right1Chart = this.$echarts.init(document.getElementById('right1'))
    
            //配置项
            var option = {
                //标题
                title:{
                    text:"全国确诊省市TOP10",
                    textStyle:{
                        color:'blue'
                    },
                    left:'left'
                },
                // color:['#3398DB'],       //柱状图颜色
                tooltip:{
                    trigger:'axis',
                    //指示器(鼠标移上去 指示)
                    axisPointer:{
                        type:'shadow'       //阴影指示器
                    }
                },
                xAxis:{
                    type:'category',
                    data:[]     //['湖北','广州','北京']，
                },
                yAxis:{
                    type:'value',
                    //y轴字体设置
                    axisLabel:{
                        show:true,
                        color:'black',
                        fontSize:12,
                        formatter:function(value){
                            if(value >= 1000){
                                value = value / 1000 + 'k'
                            }
                            return value
                        }
                    }
                },
                series:[{
                    data:[],    //[282,300,100]
                    type:'bar',
                    barMaxWidth:"50%"           //柱条的最大宽度。
                }]
            }
    
            //获得中国个省市特区
            var provinces = this.data.areaTree[0].children
    
            var topData = []
            //遍历每一个省自治区、直辖市
            for(var provinces of provinces){
                //将每个省的累计确诊病例数添加到配置项的data中
                topData.push({
                    'name':provinces.name,
                    'value':provinces.children[0].total.confirm
                })
            }
            //排序
            topData.sort(function(a,b){
                return b.value - a.value
            })
    
            topData.length = 10
    
            for(var province of topData){
                //将每个省的累计确诊病例数添加到配置项的data中
                option.xAxis.data.push(province.name)
                option.series[0].data.push(province.value)
            }
    
            //使用刚指定的配置项和数据显示图标
            right1Chart.setOption(option)
        }
    }
    </script>
    
    <style>
    
    </style>

境外输入省市TOP5

效果：

![7b159acc54ce4be2a1a72e2be144cf68.png][]

代码：

<template>
      <div>
        测试1
        <div id="right2" style = "height:800px;width:100%"></div>
      </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                data:{
                    数据太大 需要的滴滴
                }
            };
        },
        methods:{
    
        },
        mounted(){
            var right2Chart = this.$echarts.init(document.getElementById('right2'))
    
            var option = {
                title:{
                    text:"境外输入省市TOP5",
                    textStyle:{
                        color:'black'
                    },
                    left:'left'
                },
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'shadow'
                    }
                },
                xAxis:{
                    type:'category',
                    data:[]
                },
                yAxis:{
                    type:'value',
                    axisLabel:{
                        show:true,
                        color:'black',
                        fontSize:12,
                        formatter:function(value){
                            if(value >= 1000){
                                value = value / 1000 + 'k'
                            }
                            return value
                        }
                    }
                },
                series:[{
                    data:[],
                    type:'bar',
                    barMaxWidth:"50%"
                }]
            }
    
            var provinces = this.data.areaTree[0].children
    
            var topData = []
    
            for(var province of provinces){
                //将每个省的累计病例数添加到配置项的data中
                if(province.children[0].name == '境外输入'){
                    topData.push({
                        'name':province.name,
                        'value':province.children[0].total.confirm
                    })
                }
            }
    
            topData.sort(function(a,b){
                return b.value - a.value
            })
    
            topData.length = 5
    
            for(var province of topData){
                option.xAxis.data.push(province.name)
                option.series[0].data.push(province.value)
            }
    
            right2Chart.setOption(option)
        }
    }
    </script>
    
    <style>
    
    </style>

[5a66a146df38401ab7110038852c6066.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9c26652a7fcd43288d9b8b87f9154dcc.png
[7b159acc54ce4be2a1a72e2be144cf68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/56b57d6c435e4d329074f50bd570563f.png