本篇文章主要介绍了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容器
<div id="china-map"></div>
初始化echarts实例
let chinaMap = echarts.init(document.getElementById('china-map'))
4.设置初始化的空白地图，这里需要设置很多echarts参数，参考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]/*等等*/}, // 发光的城市 showCityNumber: 5, showCount: 0, // 是否需要loading isLoading: true }
3.在actions中抓取后台数据并更新地图。
const actions = { fetchHeatChinaRealData ({sta<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码网%</span>te, commit}, chartsObj) { axios.get('static/data/heatChinaRealData.json') .then( (res) => { let data = res.data let paleData = ((state, data) => { let arr = [] let len = data.length while (len--) { let geoCoord = state.geoCoordMap[data[len].name] if (geoCoord) { arr.push({ name: data[len].name, value: geoCoord.concat(data[len].value) }) } } return arr })(state, data) let lightData = paleData.sort((a, b) => { return b.value - a.value }).slice(0, state.showCityNumber) chartsObj.setOption({ series: [ { name: '地区热度', data: paleData }, { name: 'top5', data: lightData } ] }) } ) } }
此时npm run dev已经可以看到中国地图上闪闪的黄色小点点。
若想改变她使动态展示，可以在index.vue中mounted下面加上：
chinaMap.showLoading(showLoadingDefault) this.$store.commit('openLoading') this.$store.dispatch('fetchHeatChinaRealData', chinaMap) setInterval(() => { this.$store.dispatch('fetchHeatChinaRealData', chinaMap) }, 1000)
在ChinaMap.js中actions的mutations中fetchHeatChinaRealData修改：
let lightData = paleData.sort((a, b) => { return b.value - a.value }).slice(0 + state.showCount, state.showCityNumber + state.showCount) if (state.isLoading) { chartsObj.hideLoading() commit('closeLoading') }
五. 其它
1.别忘了在main.js里面引入Vuex。
import Vue from 'vue' import Index from './components/index.vue' import store from './store/index' let ChinaMap = new Vue({ el: '#app', store, template: '', components: {Index} }) Vue.use(ChinaMap)
2.案例代码
GitHub
3.效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue+vuex+axios+echarts画一个动态更新的中国地图的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+vuex+axios+echarts画一个动态更新的中国地图的方法
转载请注明原文链接：vue+vuex+axios+echarts画一个动态更新的中国地图的方法
