您好,登录后才能下订单哦!
这篇文章主要介绍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参数,参考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 ({state, 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: '<Index/>', components: {Index} }) Vue.use(ChinaMap)
2.案例代码
GitHub
3.效果图
以上是“vue+vuex+axios+echarts如何画一个动态更新的中国地图”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。