이 글에서는 vue+vuex+axios+echarts를 사용하여 동적으로 업데이트되는 중국 지도를 그리는 방법을 주로 소개합니다. 관심 있는 친구들은 참고해 보세요.
이 글에서는 vue+vuex+axios+echarts의 방법을 소개합니다. 동적으로 업데이트되는 중국 지도 그리기 작업은 다음과 같이 모든 사람과 공유됩니다.
1. 프로젝트 생성 및 플러그인 설치
# 安装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
2. 프로젝트 구조
├── 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')
2. 중국 지도 JS 파일을 도입하면 지도가 자동으로 등록됩니다. 또한 axios를 통해 json 파일을 도입할 수도 있으며 echarts.registerMap('china', chinaJson.data)를 수동으로 등록해야 합니다.
// 中国地图JS文件 require('echarts/map/js/china')
3. 너비와 높이가 고정된 DOM 컨테이너를 준비하고 마운트된 echarts 인스턴스를 초기화합니다.
DOM 컨테이너
<template> <p id="china-map"></p> </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 } ] })
4. 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. 액션에서 배경 데이터를 캡처하고 지도를 업데이트하세요.
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에 마운트된 항목을 추가하세요.
chinaMap.showLoading(showLoadingDefault) this.$store.commit('openLoading') this.$store.dispatch('fetchHeatChinaRealData', chinaMap) setInterval(() => { this.$store.dispatch('fetchHeatChinaRealData', chinaMap) }, 1000)
Modify fetchHeatChinaRealData in ChinaMap.js의 작업 변형:
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. Vuex가 main.js에 도입되었다는 것을 잊지 마세요.
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. 효과 그림
위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
JS에서 버튼 클릭을 거부하도록 마우스를 제어하는 방법
boottrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현에 대해
substring()과 substr()의 차이점 정보(자세한 튜토리얼)
JavaScript에서 변수 이름이 배열에 있는지 확인하는 방법
위 내용은 vue+vuex+axios+echarts에서 중국 지도를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!