相信年底疫情的爆发一直牵动着大家的心，虽然现在大部分地区都已经复工了，但大家还是要注意平时的防护工作。我这边已经复工2周了，可家里还有个室友在家办公，想想还是有点羡慕。
回到主题，今天特地做了个全国疫情图：
首先用vue-cli创建项目，然后还需要安装echarts和jsonp这2个包。（因为数据是新浪的接口，用到的是jsonp的结构，另外用到eslint的注意代码规范哦~~）
我用到的vue还是2.0+版本，直接安装
npm install echarts jsonp
我们直接去hoverworld修改内容
<template>
<div class="hello">
<div ref="mapbox" style="width:800px;height:600px;margin:0 auto"></div>
<!-- 初始化echarts需要有个宽高的盒子 -->
</div>
</template>
<script>
import echarts from \'echarts\'
import \'echarts/map/js/china.js\'
import jsonp from \'jsonp\'
const option = {
title: {
// 标题内容
text: \'全国疫情图\',
link: \'https://baidu.com\',
subtext: \'123456\',
sublink: \'https://baidu.com\'
},
series: [{
name: \'确诊人数\',
type: \'map\',
// 告诉echarts渲染一个地图
map: \'china\',
// 告诉echarts渲染中国地图
label: {
// 设置地区汉字
show: true,
color: \'#333\',
fontSize: 10
},
itemStyle: {
// 地图区域样式
areaColor: \'#eee\'
},
roam: true,
// 鼠标滚轮效果
zoom: 1.2,
// 地图放大缩小
emphasis: {
// 鼠标经过地图和字体样式
label: {
color: \'#fff\',
fontSize: 12
},
itemStyle: {
areaColor: \'#ccc\'
}
},
data: []
// 展示后台给的数据，必须格式（name:xxx;value:xxx）
}],
visualMap: [{
// 区域显示颜色
type: \'piecewise\',
show: true,
// splitNumber: 4
pieces: [
{min: 10000},
{min: 1000, max: 9999},
{min: 100, max: 999},
{min: 10, max: 99},
{min: 1, max: 9},
{max: 0}
],
inRange: {
// 区域图标样式
symbol: \'rect\',
color: [\'#FFFFFF\', \'#FFAA85\', \'#FF7B69\', \'#CC2929\', \'#8C0D0D\', \'#660208\']
}
}],
tooltip: {
// 鼠标放上去显示内容
trigger: \'item\'
},
toolbox: {
// 下载
show: true,
orient: \'vertical\',
left: \'right\',
top: \'center\',
feature: {
dataView: {readyOnly: false},
restore: {},
saveAsImage: {}
}
}
}
export default {
name: \'HelloWorld\',
mounted () {
this.getData()
this.mycharts = echarts.init(this.$refs.mapbox)
// 初始化echarts
this.mycharts.setOption(option)
},
methods: {
getData () {
jsonp(\'https://interface.sina.cn/news/wap/fymap2020_data.d.jsonp?_=1580892522427\', {}, (err, data) => {
if (!err) {
console.log(data)
let list = data.data.list.map(item => ({name: item.name, value: item.value}))
option.series[0].data = list
this.mycharts.setOption(option)
// echarts初始化的前提是dom渲染完成
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
到这就好啦！！！新的一年
大家