安装echarts
npm install echarts -D
配置echarts
在项目src目录下main.js文件中加入配置:
import echarts from 'echarts'
Vue.use(echarts)
使用
画一个中国地图:
<template>
<div id="echartId" class="o-echarts"></div>
</template>
<script>
import echarts from 'echarts'
import JSON from 'echarts/map/json/china.json'
export default {
name: "ChinaList",
data(){
return{
option: {
title: { //表头
text: '全国疫情累计确诊数汇总',
subtext: '最新疫情病例数量显示',
top: '3%',
left: '5%',
textStyle: { // 文字样式
fontSize: 30,
fontWeight: 300,
color: 'green'
}
},
tooltip: { // 鼠标悬浮时显示的内容
padding: 10,
backgroundColor: 'rgba(0,0,0,0.7)',
borderRadius: 8,
formatter: params => {
return `<div>
${params.data.name}:<br/>
累计确诊人数->${params.data.value}<br/>
当前确诊人数->${params.data.obj}<br/>
疑似病例人数->${params.data.suspectedCount}<br/>
治愈人数->${params.data.curedCount}<br/>
死亡人数->${params.data.deadCount}<br/>
</div> `; //鼠标悬浮数据
}
},
toolbox: { // 右侧复位下载
show: true,
orient: "vertical",
right: "20",
top: "center",
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
orient: 'vertical',
top: '9%',
left: '5%',
icon: 'circle',
data: [],
selectedMode: 'single',
selected: {},
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
inactiveColor: '#b6d7ff',
textStyle: {
color: '#ec808d',
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
visualMap: { // 左侧小导航图标
//min: 0,
//max: 500,
show: true,
//splitNumber: 5,
splitList: [
{ start: 1000 },
{ start: 500, end: 1000 },
{ start: 100, end: 500 },
{ start: 50, end: 100 },
{ start: 0, end: 50 }
],
color: [
"#70161D",
"#CB2A2F",
"#E55A4E",
"#F59E83",
"#FDEBCF"
],
/*inRange: {
color: ['#FDEBCF', '#F59E83', '#E55A4E', '#CB2A2F', '#70161D']//.reverse()
},*/
textStyle: {
color: '#000000'
}
},
geo: {
map: '中国',
label: {
normal: {
show: true,
color: '#000000'
},
emphasis: {
show: true,
color: '#000000'
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#8db200',
borderColor: '#6367ad',
borderWidth: 1
},
emphasis: {
areaColor: '#F3FE10' // hover效果
}
},
left: '15%',
right: '0%',
top: '5%',
bottom: '5%'
},
series: [{
name: '累计确诊数汇总', //系列名称
type: 'map', //地图
geoIndex: 0, // 不可缺少,否则无tooltip 指示效果
data: []
}]
}
}
},
mounted() {
this.$axios.get('/bpi/apis/dst/ncov/spreadQuery',{headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{
console.log(result.data.newslist)
let str = result.data.newslist.map(pro=>{
return {
name: pro.provinceShortName,
value:pro.confirmedCount, //累计确诊数
obj:pro.currentConfirmedCount, //当前确诊数
suspectedCount:pro.suspectedCount,//疑似
curedCount:pro.curedCount,//治愈
deadCount:pro.deadCount //死亡
}
})
this.option.series[0].data=str
let echartObj = echarts.init(document.getElementById('echartId'));
echarts.registerMap('中国', JSON);
echartObj.setOption(this.option);
}).catch(err=>{
console.log(err.message);
})
}
}
</script>
<style scoped>
.o-echarts {
width:900px;
height:550px;
}
.show_hover{
background-color: rgba(75,78,81,.5);
}
</style>
河南省地图
<template>
<div id="echartId" class="o-echarts"></div>
</template>
<script>
import echarts from 'echarts'
import JSON from 'echarts/map/json/province/henan.json';
export default {
data(){
return{
option: {
title: {
text: '河南省确诊数汇总',
subtext: '最新疫情病例数量显示',
top: '3%',
left: '5%',
textStyle: {
fontSize: 30,
fontWeight: 300,
color: 'green'
}
},
tooltip: {
padding: 10,
backgroundColor: 'rgba(0,0,0,0.7)',
borderRadius: 8,
formatter: params => {
return `<div>
${params.data.name}:<br/>
累计确诊人数->${params.data.value}<br/>
当前确诊人数->${params.data.obj.currentConfirmedCount}<br/>
疑似病例人数->${params.data.obj.suspectedCount}<br/>
治愈人数->${params.data.obj.curedCount}<br/>
死亡人数->${params.data.obj.deadCount}<br/>
</div> `; //鼠标悬浮数据
}
},
toolbox: { // 右侧复位下载
show: true,
orient: "vertical",
right: "20",
top: "bottom",
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
orient: 'vertical',
top: '9%',
left: '5%',
icon: 'circle',
data: [],
selectedMode: 'single',
selected: {},
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
inactiveColor: '#b6d7ff',
textStyle: {
color: '#ec808d',
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
visualMap: {
show: true,
splitList: [
{ start: 1000 },
{ start: 500, end: 1000 },
{ start: 100, end: 500 },
{ start: 50, end: 100 },
{ start: 0, end: 50 }
],
color: [
"#70161D",
"#CB2A2F",
"#E55A4E",
"#F59E83",
"#FDEBCF"
],
textStyle: {
color: '#000000'
}
},
geo: {
map: '河南省',
label: {
normal: {
show: true,
color: '#000000'
},
emphasis: {
show: true,
color: '#000000'
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#8db200',
borderColor: '#6367ad',
borderWidth: 1
},
emphasis: {
areaColor: '#F3FE10' // hover效果
}
},
left: '15%',
right: '0%',
top: '5%',
bottom: '5%'
},
series: [{
name: '累计确诊数汇总', //系列名称
type: 'map', //地图
geoIndex: 0, // 不可缺少,否则无tooltip 指示效果
data: []
}]
}
}
},
mounted() {
this.$axios.get('/bpi/apis/dst/ncov/spreadQuery',{headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{
console.log(result.data.newslist)
let str = result.data.newslist[18].cities.map(pro=>{
return {
name: pro.cityName+'市',
value:pro.confirmedCount, //累计确诊数
obj:{
currentConfirmedCount:pro.currentConfirmedCount, //当前确诊数
suspectedCount:pro.suspectedCount,//疑似
curedCount:pro.curedCount,//治愈
deadCount:pro.deadCount //死亡
}
}
})
console.log(str)
this.option.series[0].data=str
let echartObj = echarts.init(document.getElementById('echartId'));
echarts.registerMap('河南省', JSON);
echartObj.setOption(this.option);
}).catch(err=>{
console.log(err.message);
})
}
}
</script>
<style scoped>
.o-echarts {
width:680px;
height:550px;
}
.show_hover{
background-color: rgba(75,78,81,.5);
}
</style>