vue+vuex+axios+echarts画一个动态更新的中国地图的方法


Posted in Javascript onDecember 19, 2017

本文介绍了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画一个动态更新的中国地图的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
前端微信支付js代码
Jul 25 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
常用的9个JavaScript图表库详解
Dec 19 #Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 #Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 #Javascript
Angular2实现组件交互的方法分析
Dec 19 #Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 #Javascript
jquery自定义显示消息数量
Dec 19 #jQuery
基于Vue开发数字输入框组件
Dec 19 #Javascript
You might like
PHP类的反射用法实例
2014/11/03 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
微信自定义分享php代码分析
2016/11/24 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python 实现兔子生兔子示例
2019/11/21 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python中setuptools的作用是什么
2020/06/19 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
植树节口号
2014/06/21 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
python运算符之与用户交互
2022/04/13 Python