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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
常用的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
一些星际专用术语解释
2020/03/04 星际争霸
新闻分类录入、显示系统
2006/10/09 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php中序列化与反序列化详解
2017/02/13 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python Requests 基础入门
2016/04/07 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python画折线图的程序
2018/07/26 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
自荐信的五个重要部分
2013/10/29 职场文书
村干部培训方案
2014/05/02 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python