相信年底疫情的爆發一直牽動着大家的心，雖然現在大部分地區都已經復工了，但大家還是要注意平時的防護工作。我這邊已經復工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>
到這就好啦！！！新的一年
大家 