vue + echarts 实现简单中国地图

需求：画出全国地图，根据后台返回数据，在地图上标出对应的地点（map + 散点）

准备工作：

安装依赖

npm install echarts -S

在main.js中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

在需要画地图的页面引入地图的 js 或者 json 文件，官方已经不提供下载很久了，我自己在网上找了一份 json datas.json 点击下载（经纬度多少有点误差，仅供参考）
将该文件放在项目中（我放在了static目录下），引入
import geoData from "../../../../../static/json/datas.json";

以下为代码：

<template>
<div><div :id="chartId" style="height:100%;width:100%;"></div>
</div>
</template><script>
import geoData from "../../../../../static/json/datas.json";
export default {data() {return {windowSize: [0, 0],chartId: `map-${this.$root.UUID()}`,       //用UUID生成图表id，防止id重复chart: { map: null, chartData: [], },}},watch: { windowSize() { this.chart.map.resize() }, },        //监听页面窗口变化mounted() {this.initChart();this.$nextTick(() => { this.drawChart(); });},methods: {initChart() {let _this = this_this.windowSize = [document.body.clientWidth, document.body.clientHeight];window.addEventListener('resize', () => { _this.windowSize = [document.body.clientWidth, document.body.clientHeight]; });_this.chart.map = _this.$echarts.init(document.getElementById(_this.chartId))},drawChart() {let _this = this;let mapName = 'china'let geoCoordMap = {};let tempData = [          //模拟数据{city:'北京',value:'55'},{city:'天津',value:'20'},{city:'西藏',value:'100'},{city:'辽宁',value:'58'},]_this.chart.map.showLoading();      //loading样式let mapFeatures = _this.$echarts.getMap(mapName).geoJson.features;  //获取全国地区的经纬度（只包含了一级城市、省份经纬度）_this.chart.map.hideLoading();            //隐藏loading样式mapFeatures.forEach(function (v) { //获取一级城市、省份经纬度let name = v.properties.name; // 地区名称geoCoordMap[name] = v.properties.cp; // 地区经纬度});let convertData = function (tempData) {               //通过该方法获取自己数据中各地区的经纬度let tempRes = [];for (let i = 0; i < tempData.length; i++) {let geoCoord = geoCoordMap[tempData[i].name] || [];if (geoCoord) {tempRes.push({name: tempData[i].name,value: geoCoord.concat(tempData[i].value) || [],});}}for (let i = 0; i < tempRes.length; i++) {let tempGeoCoord = geoData.rows.filter(t => { return t.name.includes(tempRes[i].name) })if (tempGeoCoord && tempRes[i].value.length == 1) {tempRes[i].value.unshift(tempGeoCoord[0].lat)tempRes[i].value.unshift(tempGeoCoord[0].lng)}}return tempRes;};_this.chart.map.setOption({                 //开始画图geo: {map: 'china',label: { show: false, },                 // 是否显示对应地名roam: true,itemStyle: {normal: {borderWidth: 1, // 地图边框宽度borderColor: '#fff', // 地图边框颜色areaColor: '#0FADFF' // 地图颜色},emphasis: { areaColor: '#0FADFF', borderWidth: 2 }        //高亮时的样式},emphasis: { areaColor: '#0FADFF', borderWidth: 2, label: { show: false } }},tooltip: {triggerOn: 'mousemove',trigger: 'item',extraCssText: 'background:transparent;border:none;',formatter: function (params) {let count = eval(convertData(tempData).map(a => { return a.value[2] }).join('+'))let content = `<div class='tooltip'>${params.name}&nbsp;${params.value[2]}户&nbsp;${(params.value[2]/count*100).toFixed(2)}%`;return (content += `</div>`);}},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',color: "#5ADD8B",                 //点的颜色data: convertData(tempData),symbolSize: 10,               //点的大小symbol: "circle",               //点的样式cursor: "pointer",          //鼠标放上去的效果label: {normal: { show: false },      //默认展示 emphasis: { show: false }     //滑过展示},itemStyle: { color: '#5ADD8B', emphasis: { borderColor: '#fff', borderWidth: 1 } }},{type: 'map',map: 'china',geoIndex: 0,silent: true,hoverable: false,aspectScale: 0.75,tooltip: { show: false }},],});// 取消框架自带的高亮，只高亮散点// _this.chart.map.on('mouseover', (v) => {//   let enlarge = convertData(tempData).map(a => { return a.name })//   let point = enlarge.findIndex(t => { return t == v.name })//   if (point < 0) { _this.chart.map.dispatchAction({ type: 'downplay', dataIndex: v.dataIndex }); }// });// 鼠标滑动到散点外不显示tip_this.chart.map.on('mouseover', (v) => { let enlarge = convertData(tempData).map(a => { return a.name })let point = enlarge.findIndex(t => { return t == v.name })if (point < 0) { _this.chart.map.dispatchAction({ type: 'hideTip', dataIndex: v.dataIndex }); }});_this.$nextTick(() => { _this.chart.map.resize() })},},
}
</script><style lang="scss">.tooltip {color: rgba(50, 50, 50, 1);padding: 6px 9px 11px 9px;background: rgba(255, 255, 255, 1);box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
}
</style>

vue + echarts 实现简单中国地图相关推荐

使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
vue+echarts实现江苏省疫情地图
vue+echarts实现江苏省疫情地图文章目录 vue+echarts实现江苏省疫情地图前言一.使用步骤 1.引入库 2.代码数据效果前言作为刚学习vue结合echarts写的案例,当前 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
vue中使用eCharts插件显示中国地图
一.前言由于项目需求,需要一个中国地图,上面根据从服务器获取到的数据,显示各省份的数据.在eEcharts官网,发现没有地图相关的案列(搜索了一下,都下架了),只有社区有. 二.查找资料 eChar ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
【echarts实现】中国地图世界地图
打开一个用 vue 创建的新项目安装 npm install --save echarts@4.x echars实现中国和世界地图需要引入地图资源需引入地图的话下载的echarts版本就要低于5. ...
使用 Echarts 插件完成中国地图
目录前言: 什么是 Echarts 插件中国地图成品展示步骤: 完成中国地图代码总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个中国地图需要使用 canvas 画布进行编写,不 ...
关于echarts自定义合并中国地图分区展示的问题
其实为了自己能够记住所遇到的问题,然后也是为了以后方便查找,开始决定尝试第一次写自己的博客.当然很多东西也是自己查找借鉴他人才最终解决的问题,所以在此也非常感谢他人的分享.本人前端小白一个,半路转行从 ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...

vue + echarts 实现简单中国地图

准备工作：

以下为代码：

vue + echarts 实现简单中国地图相关推荐

最新文章

热门文章