相信年底疫情的爆发一直牵动着大家的心，虽然现在大部分地区都已经复工了，但大家还是要注意平时的防护工作。我这边已经复工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>
到这就好啦！！！新的一年
大家 