vue中Echarts之省市地图（北京市）展示相关数据
1. 下载ECharts 插件
npm i echarts --save
2. 引入省市地图
import echarts from 'echarts'
Vue.prototype.echarts = 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 () {
this.myChart()
},
methods: {
myChart () {
// 基于准备好的dom，初始化echarts实例
let mychart = this.echarts.init(document.getElementById('mychart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function () {
mychart.resize()
})
// 绘制图表
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: 232.4, lng: 116.293105, lat: 39.865042 }
]
}
]
})
// 定时显示提示框和高亮效果
let index = -1
setInterval(function () {
// 隐藏提示框
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>
以上是 vue中Echarts之省市地图（北京市）展示相关数据 的全部内容， 来源链接： utcz.com/z/375203.html
