在vue+vuex+axios+echarts中如何實現中國地圖
本篇文章主要介紹了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')
// 中国地图JS文件 require('echarts/map/js/china')
<template> <p id="china-map"></p> </template>
let chinaMap = echarts.init(document.getElementById('china-map'))
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'
const state = { geoCoordMap: {'香港特别行政区': [114.08, 22.2], '澳门特别行政区': [113.33, 22.13], '台北': [121.5, 25.03]/*等等*/}, // 发光的城市 showCityNumber: 5, showCount: 0, // 是否需要loading isLoading: true }
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 } ] }) } ) } }
chinaMap.showLoading(showLoadingDefault) this.$store.commit('openLoading') this.$store.dispatch('fetchHeatChinaRealData', chinaMap) setInterval(() => { this.$store.dispatch('fetchHeatChinaRealData', chinaMap) }, 1000)
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)
有關使用bootstrap-table.js實作擴充分頁工具列功能
#關於substring()和substr()的差異(詳細教學)
以上是在vue+vuex+axios+echarts中如何實現中國地圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

可以通過以下步驟為 Vue 按鈕添加函數:將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時,watch 會觸發一個回調函數,用於執行更新視圖或其他任務。其配置選項包括 immediate,用於指定是否立即執行回調,以及 deep,用於指定是否遞歸監聽對像或數組的更改。

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法,其中應用程序被劃分為獨立的頁面:代碼維護性:將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化:每個頁面都可以作為獨立的模塊,便於重用和替換。路由簡單:頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化:每個頁面都有自己的 URL,這有助於搜索引擎優化。

在 Vue.js 中引用 JS 文件的方法有三種:直接使用 <script> 標籤指定路徑;利用 mounted() 生命週期鉤子動態導入;通過 Vuex 狀態管理庫進行導入。

Vue.js 返回上一頁有四種方法:$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back(),方法選擇取決於場景。

Vue.js 遍歷數組和對像有三種常見方法:v-for 指令用於遍歷每個元素並渲染模板;v-bind 指令可與 v-for 一起使用,為每個元素動態設置屬性值;.map 方法可將數組元素轉換為新數組。

Vue 中 div 元素跳轉的方法有兩種:使用 Vue Router,添加 router-link 組件。添加 @click 事件監聽器,調用 this.$router.push() 方法跳轉。
