Vue项目中使用Echarts实现中国地图
echarts现在已经不提供地图map包的下载了(5.0之前会自带这个包),所以很多小伙伴做地图需要走很多弯路,今天给大家分享一下地图的实现1、先在终端安装 npm install echarts --save2、在main.js中引入echarts (注意这里有两种引入方式)<1> 5.0以下版本: import echarts from 'echarts ’<2> 5.
echarts现在已经不提供地图map包的下载了(5.0之前会自带这个包),所以很多小伙伴做地图需要走很多弯路,今天给大家分享一下地图的实现
1、先在终端安装 npm install echarts --save
2、在main.js中引入echarts (注意这里有两种引入方式)
<1> 5.0以下版本: import echarts from 'echarts ’
<2> 5.0以上版本: import * as echarts from ‘echarts’
我这里用的是 “echarts”: “^5.2.1” 引入的是方式 <2>
3、注册在原型上 vue.prototype.$echarts = echarts
4、echarts现在已经不提供地图map包的下载了(5.0之前会自带这个包),但在HTML上是可以直接引用的,vue框架开发需要map包,下面是map包的地图数据,下载后将其文件夹名称改为map,放到项目文件夹node_modules中的_echarts@5.2.1@echarts 文件夹下。
百度网盘链接:https://pan.baidu.com/s/1OMK8vmR7OtwcXUpTtTtzDg
提取码:6s4v
5、这里请求地图上的数据用的是 jsonp,需下载jsonp依赖包,不然会报错
npm i jsonp --save
6、将以下代码粘入 要实现地图页面的.vue文件中
<template>
<div class="hello">
<!-- echarts 初始化 -->
<div class="content" ref="mapbox"></div>
</div>
</template>
<script>
import '_echarts@5.2.1@echarts/map/js/china.js'
import jsonp from 'jsonp'
const option = {
title: {
text: "中国疫情地图",
link: 'https://www.baidu.com',
// subtext: "shinuia",
sublink: "https://www.baidu.com"
},
series: [{
name: '确诊人数',
type: 'map',
map: 'china',
label: {
show: true,
color: '#ffffff',
fontSize: 8
},
itemStyle: {
areaColor: '#eee'
},
roam: true,
zoom: 1.2,
emphasis: {
label: {
color: '#fff',
fontSize: 12,
},
itemStyle: {
areaColor: '#83b5e7'
}
},
data: []
}],
// {name: xxx, value: xxx}
visualMap: [{
type: 'piecewise',
show: true,
pieces: [
{ min: 10000 },
{ min: 1000, max: 9999 },
{ min: 100, max: 999},
{ min: 10, max: 99 },
{ min: 1, max: 9 }
],
// align: 'right'
// showLabel: false
inRange: {
symbol: 'rect',
color: [
'#ffc0b1',
'#9c0505',
]
},
itemWidth: 20
}],
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
}
}
export default {
name: 'ChinaMap',
mounted () {
this.getData()
this.mapcharts = this.$echarts.init(this.$refs.mapbox);
this.mapcharts.setOption(option)
},
methods: {
getData () {
jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (err, data) => {
if (!err) {
// eslint-disable-next-line no-console
console.log(data)
let list = data.data.list.map(item => (
// eslint-disable-next-line no-console
// console.log(item),
{
name: item.name,
value: item.value,
susNum: item.susNum
}))
option.series[0].data = list
this.mapcharts.setOption(option)
}
})
}
}
}
</script>
<style scoped>
.content {
width: 1500px;
height: 800px;
/*width: 100%;*/
/*height: 100%;*/
background-color: rgba(0, 0, 0, 0.3);
}
</style>
7、进入页面即可查看效果
今天的分享到此结束,欢迎大家一起交流。
更多推荐
所有评论(0)