首页 > 其他分享 >vue+echarts实现疫情(全国新增趋势、境外输入省市TOP5)

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

时间:2023-02-08 14:03:52浏览次数:47  
标签:province vue option topData TOP5 value var data echarts


全国新增趋势

效果:

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

代码:

<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

效果:

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

代码:

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

标签:province,vue,option,topData,TOP5,value,var,data,echarts
From: https://blog.51cto.com/u_15680317/6044113

相关文章

  • vue+echarts实现疫情柱状图(全国确诊省市TOP10)
    效果:代码:<template><div><divid="right1"style="height:800px;width:100%"></div></div></template><script>exportdefault{data(){return{......
  • vue+echarts实现疫情折线图
    效果:代码:<<template><div><divid="left1"style="height:800px;width:100%"></div></div></template><script>//疫情数据//exportdefault{data()......
  • Vue环境安装
    环境安装一、node1.为什么需要node环境Vue.js本质上就是一个Js库,可以直接在页面通过script标签引用。这种使用方式只使用了VueJs的”构建用户界面“,使用不了他的模块化......
  • vue+element DatePicker日期选择器封装(可自定义快捷选择时间)
    前言今天封装了一个DatePicker日期选择器,发现带快捷选择的不太好封装,我需要在不同的地方快捷选择不同的时间,并且快捷显示的时间是从昨天开始,在网上找了一圈都没找到便自己......
  • vue项目部署,清理缓存方式
    1.index.html<!--清除浏览器中的缓存--><metahttp-equiv="pragram"content="no-cache"><metahttp-equiv="cache-control"content="no-cache,no-store,must-revalid......
  • 该给node、vue2升级了
      今天没事逛了逛一下,node、vue2官网,发现了一些奇妙的事情......
  • iis 部署vue 常用配置文件
    <?xmlversion="1.0"encoding="UTF-8"?><configuration><system.webServer><rewrite><rules><rulename="AngularJS"stopProcessing="true">......
  • vue返回离开页面提示
    vue有一个beforeRouteLeave函数,跟生命周期同级data(){return{}},beforeRouteLeave(to,from,next){setTimeout(()=>{//可自己制作确认框,自定义......
  • VSCode 抽取vue的代码片段
    在vscode中文件——>首选项——>用户片段,输入名字按去确定,输入代码片段{"vuehtm":{"scope":"html","prefix":"vuehtml","body":[......
  • Vue事件总线
        vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,如果两个页面没有任何引入和被引入关系,该如何通信?如果咱们的应用程序不需要类似Vuex这......