vue+echarts实现疫情柱状图(全国确诊省市TOP10)

太过爱你忘了你带给我的痛 2024-04-01 17:51 147阅读 0赞

效果：

![8ee68d9dd3a643b489524a39ad1c2301.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>

[8ee68d9dd3a643b489524a39ad1c2301.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ac0e223f1f1f459b9d4b587947d7b86f.png