下载echarts
npm install echarts
在plugins目录下新建echarts.js文件并引入echarts依赖包
plugins/echarts.js
import Vue from 'vue'
import * as echartsfrom 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）
在nuxt.config.js配置文件中引入创建的echarts.js
plugins: [
'@/plugins/echarts',
],
下载的echarts依赖包里面没有中国地图数据
- 可以自己下载中国地图json数据，我把它放在了
/static/json/china.json里面。 - 下载地址 http://datav.aliyun.com/portal/school/atlas/area_selector
- 在
plugins/echarts.js引入
import china from '@/static/json/china.json';// 引入中国地图数据
echarts.registerMap('china', china) // 使用该数据
使用
<template>
<div class="">
<div id="chinaChart"></div>
</div>
</template>
<script>
export default {
data() {
return {
mapData: [{
"name": "广东省", // name的值需和使用的地图数据地区名对应，才能匹配地区数据。
"value": '10',
"region": [{
name: 'hszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszzhszz',
address_desc: "hszzzzzzzSBSBSBSSBSBSBSSBSBSBSSBSBSBSSBSBSBSSBSBSBS################"
},
{
name: 'NMSL',
address_desc: "SBSBSBS"
},
{
name: 'hszz-1',
address_desc: "hszzzzzzz"
},
{
name: 'MMP',
address_desc: "hszzzzz122"
},
{
name: 'asdfasfasdafsafsa',
address_desc: "hszzzzz122"
}
],
}, ],
}
},
methods: {
// 地图初始化
echartsInit() {
// 找到容器
let myChart = this.$echarts.init(document.getElementById('chinaChart'))
window.onresize = myChart.resize
// 开始渲染
myChart.setOption({ // 进行相关配置
backgroundColor: "#f2f7f9", // 背景颜色
tooltip: { // 浮动提示框
triggerOn: 'click', // 触发方式：click点击触发
trigger: 'item', //
extraCssText:'width:440px; white-space:pre-wrap', // 设置提示框样式；white-space:pre-wrap设置提示框内容换行，此处如果没设置，在弹窗自定义内容里设置换行无效果
enterable: true, // 设置鼠标可进入提示框
formatter({ // 提示框样式自定义事件
data // 对应下方 series配置的数据
}) {
if (!data) return
const {
name,
region: list
} = data
// 外层div
const containEl = document.createElement('div')
containEl.classList.add('toolip')
// 标题
const titleEl = `<div class="toolip-title">${name}</div>`
// 列表
const ulEl = document.createElement('ul')
ulEl.classList.add('toolip-ul')
// 列表item
if (list.length) {
list.forEach(item => {
ulEl.innerHTML += `<li class="toolip-ul-li-name">${item.name}</li>`
ulEl.innerHTML += `<li class="toolip-ul-li-address">地址：${item.address_desc}</li>`
})
}
containEl.innerHTML += titleEl
containEl.appendChild(ulEl)
// 样式
const styleEl = document.createElement('style')
styleEl.innerHTML = `
*{
margin: 0;
padding: 0;
}
.toolip {
z-index: 2;
width: 400px;
max-height: 350px;
text-align: left;
font-size: 16px;
margin: 15px;
pointer-events: unset;
opacity: 1;
}
.toolip-title {
font-weight: 500;
border-bottom: 1px solid #e3e3e3;
padding-bottom: 10px;
color: #333;
}
.toolip-ul {
max-height: 300px;
overflow-x:auto;
}
.toolip-ul-li-name {
margin-top: 10px;
font-weight: 500;
padding: 5px 0;
color: #666;
word-break: break-all;
}
.toolip-ul-li-address {
padding: 5px 0;
font-size: 14px;
border-bottom: 1px solid #e3e3e3;
color: #999;
word-break: break-all;
}
`
containEl.appendChild(styleEl)
return containEl
}
},
visualMap: { // 视觉映射组件
min: 0, // 最小值
max: 100, // 最大值
text: ['High', 'Low'], // 两端的文本
realtime: false, // 拖拽时，是否实时更新。为false则拖拽结束时，才更新视图。
calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
inRange: { //定义 在选中范围中 的视觉元素。
color: ['lightskyblue', 'yellow', 'orangered']
}
},
geo: { // 这个是重点配置区
map: 'china', // 表示中国地图； 和plugins/echarts.js注册的地图名一致
// roam: true, // 是否开启鼠标缩放和平移漫游。开启后可能会使鼠标在地图上时滚轮无法滑动整个页面。
zoom: 1.25, // 当前视角的缩放比例
scaleLimit: { // 滚轮缩放的极限控制
min: 1.25, //缩放最小大小
max: 1.25 //缩放最大大小
},
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)' // 地名颜色
}
}
},
itemStyle: {
normal: {
areaColor: 'pink', // 区块颜色
borderColor: 'rgba(0, 0, 0, 0.2)' // 地图区块边框颜色
},
emphasis: { // ·鼠标·在地图区块上的样式
areaColor: 'deepPink', // 区块颜色
shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
shadowOffsetY: 0, // 阴影垂直方向上的偏移距离。
shadowBlur: 20, // 图形阴影的模糊大小。
borderWidth: 0, // 描边线宽。为 0 时无描边。
shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
}
}
},
series: [ // 配置地图数据
{
type: 'scatter',
coordinateSystem: 'geo' // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
},
{
type: 'map', // 主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。
geoIndex: 0,
data: this.mapData, // 数据
}
]
})
},
},
mounted() {
this.echartsInit()
}
}
</script>
<style lang="scss" scoped>
#chinaChart {
width: 1120px;
height: 1000px;
}
</style>
-
常态地图效果
image.png
-
鼠标点击区域后的自定义提示框
image.png
