vue+vuex+axios+echarts画一个动态更新的中国地图的方
编程学习 2021-07-04 17:33www.dzhlxh.cn编程入门
本篇文章主要介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法，分享给大家，具体如下：
一. 生成项目及安装插件
# 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save
二. 项目结构
├── index.html
├── main.js
├── components
│ └── index.vue
└── store
├── index.js # 组装模块及导出store的文件
└── modules
└── ChinaMap.js # 中国地图Vuex模块
三. 引入中国地图并绘制基本的图表
1.按需求引入与中国地图相关的Echarts图表和组件。
// 主模块
let echarts = require('echarts/lib/echarts')
// 散点图
require('echarts/lib/chart/scatter')
// 散点图放大
require('echarts/lib/chart/effectScatter')
// 地图
require('echarts/lib/chart/map')
// 图例
require('echarts/lib/component/legend')
// 提示框
require('echarts/lib/component/tooltip')
// 地图geo
require('echarts/lib/component/geo')
2.引入中国地图JS文件，会自动注册地图；也可以通过axios方式引入json文件，需要手动注册echarts.registerMap('china', chinaJson.data)。
// 中国地图JS文件
require('echarts/map/js/china')
3.准备一个有固定宽高的DOM容器并在mounted里面初始化一个echarts实例。
DOM容器
<template> <div id="china-map"></div> </template>
初始化echarts实例
let chinaMap = echarts.init(document.getElementById('china-map'))
4.设置初始化的空白地图，这里需要设置很多echarts参数，参考。
chinaMap.setOption({
backgroundColor: '#272D3A',
// 标题
title: {
text: '中国地图闪闪发光',
left: 'center',
textStyle: {
color: '#fff'
}
},
// 地图上圆点的提示
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2]
}
},
// 图例按钮 点击可选择哪些不显示
legend: {
orient: 'vertical',
left: 'left',
top: 'bottom',
data: ['地区热度', 'top5'],
textStyle: {
color: '#fff'
}
},
// 地理坐标系组件
geo: {
map: 'china',
label: {
// true会显示城市名
emphasis: {
show: false
}
},
itemStyle: {
// 地图背景色
normal: {
areaColor: '#465471',
borderColor: '#282F3C'
},
// 悬浮时
emphasis: {
areaColor: '#8796B4'
}
}
},
// 系列列表
series: [
{
name: '地区热度',
// 表的类型 这里是散点
type: 'scatter',
// 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
coordinateSystem: 'geo',
data: [],
// 标记的大小
symbolSize: 12,
// 鼠标悬浮的时候在圆点上显示数值
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#ddb926'
},
// 鼠标悬浮的时候圆点样式变化
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{
name: 'top5',
// 表的类型 这里是散点
type: 'effectScatter',
// 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
coordinateSystem: 'geo',
data: [],
// 标记的大小
symbolSize: 12,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
})
四. 配置Vuex管理和分发数据
1.在ChinaMap.js中引入vuex和axios。
import axios from 'axios'
2.设置必要的变量。
const state = {
geoCoordMap: {'香港特别行政区': [114.08, 22.2], '澳门特别行政区': [113.33, 22.13], '台北': [121.5, 25.03]/*等等*