Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一、生成项目及安装插件
# 安装 Vue Cli
npm install vue-cli -g# 初始化项目
vue init webpack vue-china-map# 切到目录下
cd vue-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 模块
三、引入中国地图并绘制基本的图表
3.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')
3.2 引入中国地图 JavaScript 文件,会自动注册地图;也可以通过 Axios 方式引入 JSON 文件,需要手动注册 echarts.registerMap('china', chinaJson.data)
。
// 中国地图 JavaScript 文件
require('echarts/map/js/china')
3.3 准备一个有固定宽高的 DOM 容器并在 mounted
里面初始化一个 ECharts 实例。
DOM 容器:
<template><div id="china-map"></div>
</template>
初始化 ECharts 实例:
let chinaMap = echarts.init(document.getElementById('china-map'))
3.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 管理和分发数据
4.1 在 ChinaMap.js
中引入 Vuex 和 Axios。
import axios from 'axios'
4.2 设置必要的变量。
const state = {geoCoordMap: {'香港特别行政区': [114.08, 22.2], '澳门特别行政区': [113.33, 22.13], '台北': [121.5, 25.03]/*等等*/},// 发光的城市showCityNumber: 5,showCount: 0,// 是否需要 LoadingisLoading: true
}
4.3 在 actions
中抓取后台数据并更新地图。
const actions = {fetchHeatChinaRealData ({state, commit}, chartsObj) {axios.get('static/data/heatChinaRealData.json').then((res) => {let data = res.datalet paleData = ((state, data) => {let arr = []let len = data.lengthwhile (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')
}
五、其它
5.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)
5.2 案例代码
GitHub:GitHub - mazeyqian/vue-china-map: Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
版权声明
本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图 – 后除
(完)
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图相关推荐
- vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据 在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
- vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图 效果如图 首先 1.安装echarts npm install echarts -S 2.使用 全局使用 在main.js中 // 引入echarts imp ...
- vue+axios+echarts实现一个折线图
前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在jquery里面使用,引入的例子. Ec ...
- vue中引入Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
- vue如何用echarts画可缩放的中国地图(省会飞行图)
1.创建一个容器之后设计统计图的地理坐标组件与图表类型(事先请保证已经导入了echart依赖包) <template><div ref="ChinaMap"> ...
- vue里使用echarts画世界地图
Vue中使用echarts的项目总结: 1.安装echarts npm install echarts --save 2.在项目需要用到地图的页面里引入echarts(在入口文件里引入后无效,没找到原 ...
- java下拉列表 动态_【示例】教你简单用Java写一个动态更新的下拉列表(无数据库)...
动态更新下拉列表 varxmlHttp;functioncreatXMLHttpRequest() {if(window.ActiveXObject){xmlHttp=newActiveXObject ...
- python画一个动态爱心
可以使用 Python 的第三方库 matplotlib 和 numpy 来画出动态爱心. 首先,需要安装这两个库: pipinstall matplotlib pip install numpy 然 ...
- vue中利用echarts写一个飞机行径图
先写一个盒子盛放地图 后面改进的图 <div class="com-container"><div class="com-chart" id ...
最新文章
- PCB 使用Nginx让IIS7实现负载均衡
- Python中的运算符
- haxm intel庐_Android Studio中Intel HAXM的那些坑
- C++重载(overload)和重写(覆盖)的区别?
- Eclipse 打开文件出现乱码情况总结
- 25-限制容器对内存的使用
- python 获取本地视频信息_python获取视频文件信息
- 随机组卷功能,你值得拥有~~~
- CDQ解决一些三维偏序的问题
- 学会python能做什么-学会python可以做什么
- n2n(Pear-to-pear) 内网穿透
- 【Linux】Linux中755权限是什么意思
- Please use torch.load with map_location=torch.device(‘cpu‘),If you are running on a CPU-only machine
- CentOS7安装配置BareOS备份工具
- java 枚举命名规则,枚举命名惯例 - 复数
- 新手也能看懂,Kubernetes其实很简单
- yolov5训练自己的数据集并计算mAP
- mysql 执行sql文件
- Linux-字符串截取
- BootStrap框架模块:BootStrap4实战
热门文章
- 深度学习中常见的10种激活函数(Activation Function)总结
- idea设置类注释和方法注释模板
- 苹果微信分身版ios_苹果手机ios14系统微信分身地址安装教程
- 移动端表格 横向纵向自适应
- 【调试】sysRq按键使用方法
- 数据结构考研:电脑磁盘碎片的定义、产生原理和清理原因(文件碎片/机械硬盘/固态硬盘/硬盘清理/计算机/软件工程/王道论坛)
- 美的同一性和神秘的算法分析
- 谈及区块链,我们脑海当中首先浮现出来的是,狂热、浮躁的场景
- mysql 行转列case when_mysql行转列利用casewhen_MySQL
- python里面的pip是什么意思_python中的pip是什么意思