vue中Echarts之省市地图（北京市）展⽰相关数据
1. 下载ECharts 插件
npm i echarts --save
2. 引⼊省市地图
import echarts from 'echarts'
harts = echarts
import '../node_modules/echarts/map/js/province/beijing.js'  // 引⼊北京地图数据
3. 模块中布局
<template>
<div class='container'>
<div class='mychart' id='mychart'></div>
</div>
</template>
4. 在组件JS中定义⽅法
<script>
export default {
data () {
return {}
},
mounted () {
},
methods: {
myChart () {
// 基于准备好的dom，初始化echarts实例
let mychart = harts.ElementById('mychart'))
// 监听屏幕变化⾃动缩放图表
window.addEventListener('resize', function () {
})
// 绘制图表
mychart.setOption({
// 图表主标题
title: {
// ⽂本
text: '北京',
// 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分⽐
top: 25,
// 值: 'left', 'center', 'right' 同上
left: 'center',
// ⽂本样式
textStyle: {
// 字体⼤⼩
fontSize: 25,
// 字体粗细
fontWeight: 650,
// 字体颜⾊
color: '#fff'
}
},
/
/ 提⽰框组件
tooltip: {
// 触发类型, 数据项图形触发
trigger: 'item',
// 使⽤函数模板，传⼊的数据值 ——> value: number | Array
formatter: function (val) {
return val.data.name + '<br>⼈⼝数量: ' + val.data.value + '万'
}
},
// 视觉映射组件
visualMap: {
/
/ continuous 类型为连续型
type: 'continuous',
show: true, // 是否显⽰ visualMap-continuous 组件 如果设置为 false，不会显⽰，但是数据映射的功能还存在          // 指定 visualMapContinuous 组件的允许的最⼩/⼤值 min/max 必须⽤户指定
min: 0,
// min,max 形成了视觉映射的定义域
max: 400,
// ⽂本样式
textStyle: {
// 字体⼤⼩
fontSize: 15,
// 字体颜⾊
color: '#fff'
},
// 拖拽时，是否实时更新
realtime: false,
// 是否显⽰拖拽⽤的⼿柄
calculable: true,
// 定义在选中范围中的视觉元素
inRange: {
// 图元的颜⾊
color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5']
}
},
series: [
{
// 类型
// 类型
type: 'map',
// 系列名称，⽤于tooltip的显⽰，legend 的图例筛选 在 setOption 更新数据和配置项时⽤于指定对应的系列            map: '北京',
// 地图类型
mapType: 'province',
// 是否开启⿏标缩放和平移漫游 默认不开启
// 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
roam: false,
// 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分⽐
top: 70,
// 图形上的⽂本标签
label: {
show: false // 是否显⽰对应地名
},
// 地图区域的多边形 图形样式
itemStyle: {
// 地图区域的颜⾊ 如果设置了visualMap, 这个属性将不起作⽤
areaColor: '#7B68EE',
/
/ 描边线宽 为 0 时⽆描边
borderWidth: 0.5,
// 图形的描边颜⾊ ⽀持的颜⾊格式同 color
borderColor: '#000',
// 描边类型，默认为实线，⽀持 'solid', 'dashed', 'dotted'
borderType: 'solid'
},
// ⾼亮状态
emphasis: {
// ⽂本标签
label: {
/
/ 是否显⽰标签
show: true,
// ⽂字的颜⾊ 如果设置为 'auto'，则为视觉映射得到的颜⾊，如系列⾊
color: '#fff'
},
// 图形样式
itemStyle: {
// 地图区域的颜⾊
areaColor: '#FF6347'
}
},
/
/ 地图系列中的数据内容数组，数组项可以为单个数值
data: [
{ name: '怀柔区', value: 38.4, lng: 116.63853, lat: 40.322563 },
{ name: '密云区', value: 47.9, lng: 116.849551, lat: 40.382999 },
{ name: '昌平区', value: 196.3, lng: 116.237832, lat: 40.226854 },
{ name: '顺义区', value: 102, lng: 116.663242, lat: 40.1362 },
{ name: '平⾕区', value: 42.3, lng: 117.128025, lat: 40.147115 },
{ name: '门头沟区', value: 30.8, lng: 116.108179, lat: 39.94648 },
{ name: '海淀区', value: 369.4, lng: 116.304872, lat: 39.96553 },
{ name: '⽯景⼭区', value: 65.2, lng: 116.229612, lat: 39.912017 },
{ name: '西城区', value: 129.8, lng: 116.372397, lat: 39.918561 },
{ name: '东城区', value: 90.5, lng: 116.42272, lat: 39.934579 },
{ name: '朝阳区', value: 395.5, lng: 116.449767, lat: 39.927254 },
{ name: '⼤兴区', value: 156.2, lng: 116.348053, lat: 39.732833 },
{ name: '房⼭区', value: 104.6, lng: 116.149892, lat: 39.755039 },
{ name: '房⼭区', value: 104.6, lng: 116.149892, lat: 39.755039 },              { name: '丰台区', value: 232.4, lng: 116.293105, lat: 39.865042 }            ]
}
]
})
// 定时显⽰提⽰框和⾼亮效果
let index = -1
setInterval(function () {
go2map地图北京// 隐藏提⽰框
mychart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
})
// 显⽰提⽰框
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
})
// 取消⾼亮指定的数据图形
mychart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
// ⾼亮指定的数据图形
mychart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
})
index++
if (index > cityArr.length - 1) {
index = -1
}
}, 2000)
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。