全国新增趋势
效果:
代码:
<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
效果:
代码:
<template>标签:province,vue,option,topData,TOP5,value,var,data,echarts From: https://blog.51cto.com/u_15680317/6044113
<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>