在vue中使用echarts和datav实现一个地图功能-创新互联
这篇文章给大家介绍在vue中使用echarts和datav实现一个地图功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
随着前端技术的飞速发展，大数据时代的来临，我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏，可以直观的展示用户想要的数据，同时炫酷的界面也会深受客户的喜欢。
大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总，也会有一些实时数据刷新，信息预警之类的。笔者在之前也做过一些大屏类的数据展示，但是由于都是一些图表类的，觉得没什么可说的，加之数据也都牵扯到公司，所以没有沉淀下来什么。
最近有朋友要做一个大屏，问了自己一个问题，自己也刚好做了一个简单的大屏数据展示，趁此机会做一个小总结。
先看一下效果：
由于数据牵扯到公司内部信息，所以将一些复杂的切换逻辑都去掉类，但保留了一些数据间但相互联动。
项目采用的是Vue+Echanrts+datav写的，结构目录如下：
由于只是一个单一页面，数据处理也不是复杂，没有涉及到router和vuex，从结构目录上看就是一个很典型的vue-cli项目，在之前我也讲过关于vue-cli项目的一些操作和目录结构解释，这里就不做多做说明了，在文章最后会提供该项目的源码地址库。
大屏主要的炫酷效果本人引用的是datav组件，地址：http://datav.jiaminghi.com/,这简直就是数据可视化的一款神器，神奇之处我就不多说了，大家可以自己去它的网站上自行体会。它也提供了如何在vue 中使用该组件。
datav可以全局注入，也可以按需注入，本人省事就直接在main.js中进行了全局注入。
所有的页面代码都放在了views文件目录下：
其中index.vue文件为主文件入口，其他都是其子组件，组件名称以方位的形式命名，如centerForm.vue就是中间的表单控件。
本项目引入了中国地图并实现省市县下钻，最初采用的是阿里旗下的高德地图，后来因为种种原因改为了百度提供的Echarts来实现，但两种使用方法都保留了下来，大家可以根据自己的需求进行选择。
其中Echarts中国地图的代码如下：
<template>
<div id="china_map_box">
<el-button type="primary" size="mini" class="back" @click="back" v-if="deepTree.length > 1">返回</el-button>
<div class="echarts">
<div id="map"></div>
</div>
</div>
</template>
<script>
import {getChinaJson, getProvinceJSON, getCityJSON} from "../api/get-json";
import {cityProvincesMap} from '../config/cityProvincesMap'
import {mapOption} from '../config/mapOption'
export default {
name: "china",
components: {},
data() {
return {
chart: null, // 实例化echarts
provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json
provincesCode: cityProvincesMap.provincesCode, // 市行政区划，用于查找对应json
areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据
special: ["北京市", "天津市", "上海市", "重庆市", "香港", "澳门"],//直辖市和特别行政区-只有二级地图，没有三级地图
mapData: [], // 当前地图上的地区
option: {...mapOption.basicOption}, // map的相关配置
deepTree: [],// 点击地图时push，点返回时pop
areaName: '中国', // 当前地名
areaCode: '000000', // 当前行政区划
areaLevel: 'country', // 当前级别
}
},
mounted() {
this.$nextTick(() => {
this.initEcharts();
this.chart.on('click', this.echartsMapClick);
});
},
methods: {
// 初次加载绘制地图
initEcharts() {
//地图容器
this.chart = this.$echarts.init(document.getElementById('map'));
if (this.areaCode === '000000') {
this.requestGetChinaJson();
} else {
this.requestGetProvinceJSON({areaName: this.areaName, areaCode: this.areaCode})
}
},
// 地图点击
echartsMapClick(params) {
// console.log(params);
this.areaName = params.areaName;
if (params.name in this.provincesMap) {
this.areaCode = params.data.areaCode;
this.areaLevel = params.data.areaLevel;
//如果点击的是34个省、市、自治区，绘制选中地区的二级地图
this.requestGetProvinceJSON(params.data);
} else if (params.seriesName in this.provincesMap) {
//如果是【直辖市/特别行政区】只有二级下钻
if (this.special.indexOf(params.seriesName) >= 0) {
return;
} else {
this.areaCode = this.areaMap[params.name];
this.areaLevel = params.data.areaLevel;
//显示县级地图
this.requestGetCityJSON(params.data)
}
} else {
return;
}
this.$emit('map-change', params.data);
},
//绘制全国地图
requestGetChinaJson() {
getChinaJson().then(res => {
let arr = [];
for (let i = 0; i < res.features.length; i++) {
let obj = {
name: res.features[i].properties.name,
areaName: res.features[i].properties.name,
areaCode: res.features[i].id,
areaLevel: 'province',
value: Math.round(Math.random()),
};
arr.push(obj)
}
this.mapData = arr;
this.deepTree.push({
mapData: arr,
params: {name: 'china', areaName: 'china', areaLevel: 'country', areaCode: '000000'}
});
//注册地图
this.$echarts.registerMap('china', res);
//绘制地图
this.renderMap('china', arr);
});
},
// 加载省级地图
requestGetProvinceJSON(params) {
getProvinceJSON(params.areaCode).then(res => {
this.$echarts.registerMap(params.areaName, res);
let arr = [];
for (let i = 0; i < res.features.length; i++) {
let obj = {
name: res.features[i].properties.name,
areaName: res.features[i].properties.name,
areaCode: res.features[i].id,
areaLevel: 'city',
value: Math.round(Math.random()),
};
arr.push(obj)
}
this.mapData = arr;
this.deepTree.push({
mapData: arr,
params: params,
});
this.renderMap(params.areaName, arr);
});
},
// 加载市级地图
requestGetCityJSON(params) {
this.areaLevel = params.areaLevel;
getCityJSON(params.areaCode).then(res => {
this.$echarts.registerMap(params.areaName, res);
let arr = [];
for (let i = 0; i < res.features.length; i++) {
let obj = {
name: res.features[i].properties.name,
areaName: res.features[i].properties.areaName,
areaCode: res.features[i].id,
areaLevel: 'districts',
value: Math.round(Math.random()),
};
arr.push(obj)
}
this.mapData = arr;
this.deepTree.push({mapData: arr, params: params});
this.renderMap(params.areaName, arr);
})
},
renderMap(map, data) {
this.option.series = [
{
name: map,
mapType: map,
...mapOption.seriesOption,
data: data
}
];
//渲染地图
this.chart.setOption(this.option);
},
// 返回
back() {
// console.log(this.deepTree);
if (this.deepTree.length > 1) {
this.deepTree.pop();
let areaName = this.deepTree[this.deepTree.length - 1].params.areaName;
let mapData = this.deepTree[this.deepTree.length - 1].mapData;
this.$emit('back-change', this.deepTree[this.deepTree.length - 1].params);
this.renderMap(areaName, mapData);
}
}
}
}
</script>
<style lang="scss" scoped>
#china_map_box {
display: flex;
width: 100%;
height: 100%;
position: relative;
.echarts {
width: 0;
flex: 1;
background-size: 100% 100%;
#map {
height: 100%;
}
}
.back {
position: absolute;
top: .8rem;
right: .5rem;
z-index: 999;
padding-left: .12rem;
padding-right: .12rem;
}
}
</style>
当前题目：在vue中使用echarts和datav实现一个地图功能-创新互联
标题来源：https://www.cdcxhl.com/article38/dscipp.html
成都网站建设公司_创新互联，为您提供品牌网站建设、微信公众号、营销型网站建设、自适应网站、网站营销、建站公司
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 成都网页设计者怎么设计一个专业的响应式网站 2016-10-20
- 让你不得不选择响应式网站制作的理由 2016-03-28
- 响应式网站建设应该注意哪些 2013-04-28
- 响应式网站建设5个注意事项 2014-12-26
- 响应式网站建设为什么如此受欢迎？ 2013-08-13
- 响应式网站能为企业带来哪些好处？ 2022-07-22
- H5响应式网站定制的优势 2016-09-23
- 响应式网站设计的SEO优势 2021-09-18
- 网站制作中什么是响应式网站？ 2013-05-06
- 企业响应式网站建设为何大势所趋势不可挡 2022-05-21
- H5响应式网站设计的优势及强大的功能 2021-12-14
- 企业网站建设升级为响应式网站布局有哪些好处？ 2016-10-03