之前看到网上很多那种可视化的后台管理页面,觉得很炫,刚好前阵子公司也有个地图可视化需求,又刚好分配给我了,今天来说说我的理解,先看效果,我这是第一次写博客园,后面会持续更新项目中觉得有意思的需求
import echarts from ‘echarts’
首先引入echarts
我这边的需求是展现深圳市每个区的数据,其实都一样的道理,然后需要深圳市每个区的详细经纬度数据,这个可以在 http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 这里找到你需要的数据,我是使用的json,
在需要用的组件中引入json
const jsonData = require(‘@/assets/js/shen_zhen.json’)
鼠标移到哪个区显示哪个区的数据,并且颜色改变,移到左侧的数据返回对应的区也会改变颜色,这些都是属性可以配置的,网上可以找到很多,这里也插入给大家看看吧
options: {
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function(params) {
var value = (params.value + '').split('.')
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
return params.name + ': ' + value
}
},
geo: {
roam: false, // 是否开启缩放和平移
zoom: 1, // 当前视角缩放比例
selectedMode: 'single', // 选中模式
aspectScale: 1, // 长宽比
label: {
normal: {
show: true,
textStyle: {
color: '#ffffff'
}
},
emphasis: {
show: true
}
},
// 设置为一张完整经纬度的世界地图
// map: 'world',
map: '广东',
left: 100,
top: 0,
right: 100,
bottom: 0,
itemStyle: {
// 地图区域的多边形 图形样式
hoverAnimation: true,
normal: {
opacity: 0.9,
borderWidth: 1,
areaColor: '#27A5F9', // 默认的地图板块颜色
borderColor: '#fff' // 地图边框颜色
},
emphasis: {
// 点击时候的颜色
areaColor: '#FFDF34', // 默认的地图板块颜色
borderColor: '#fff', // 地图边框颜色
opacity: 1,
color: '#fff'
}
}
},
// 旁边的数据范围 gte大于等于 lte小于等于 gt大于 lt小于
visualMap: {
min: 0,
max: 5000,
left: 0,
bottom: 0,
showLabel: !0,
show: true,
pieces: [
{
gte: 0,
lt: 5,
color: '#ADC3DA',
label: '0-5 人'
},
{
gte: 5,
lt: 10,
color: '#FE8B5F',
label: '5-10 人'
},
{
gte: 10,
lt: 20,
label: '10 - 20 人',
color: '#F6BC5B'
},
{
gte: 20,
lt: 30,
label: '20- 30 人',
color: '#5AB5FF'
},
{
gte: 30,
lt: 100,
label: '30- 100 人',
color: '#8B6DF6'
},
{
gt: 100,
label: '> 100 人',
color: '#F6798A'
}
]
}
}
最主要就是数据的显示了,this.allNumList就是后端返回的数据,这里还有一个坑给大家补充一下,数组返回的数据里面,item里面一定要有name跟value字段,否则数据显示不出来的,我这里就踩坑了,
```javascript
series: [
{
type: 'map',
map: '广东',
geoIndex: 0,
aspectScale: 1, // 长宽比
showLegendSymbol: true, // 存在legend时显示
data: this.allNumList, // 返回的数组
label: {
normal: {
show: true
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
areaColor: '#FFDF34'
}
},
animation: true
},
{
type: 'lines',
z: 3,
coordinateSystem: 'geo'
// data: []
}
],