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

全国新增趋势

效果：

代码：

代码语言：javascript复制

<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

效果：

代码：

代码语言：javascript复制

<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>

echarts

0 人点赞