echarts 地图和柱状图结合（在地图上显示柱状图）

如图，需求要做一个在地图上显示柱状图的echarts图，但是百度了半天，发现很少有人发这种例子。这个代码也是借鉴的别人的文章，但需求肯定不完全一致，那我会根据我的需求把代码和注意事项发出来并解释。（如果有人发现了借鉴的那篇，请在评论区发一下链接，我找不到了，谢谢）

话不多说，先上代码

目录：

index.vue文件（也就是组件）

<template><div class="ChinaEcharts"><div class="wrap"><div id="map" :style="'width:' + Width + ';height:' + Height"><div :style="'width:' + Width + ';height:' + Height" ref="myEchart"></div></div></div></div>
</template><script>
import * as echarts from 'echarts'
import tangshan from "./tangshan.json";
import Options from "./optionConfig"; //地图配置
export default {name: "ChinaEcharts",props: {Width: {type: String,default() {return '100%';},},Height: {type: String,default() {return '360px';},},areaData: {type: Array,default() {return [];},},option: {type: Object,default() {return new Options();},},cityConfig: {type: Object,default() {return {};},},areaItems: {type: Object,default() {return {};},},},data() {return {wrap: null, //包裹框drawBar: null, // 柱状图barWrap: null,myChart: null,// 地区坐标selfAreaItems: {},selfAreaData: [],selfOption: new Options(),barColor: ''};},watch: {areaData: {deep: true,handler: function(newVal,oldVal) {this.initEcharts();}}},methods: {loadMap(mapName, data) {if (data) {console.log(mapName, data, "mapName, datamapName, data");this.echarts.registerMap(mapName, data);}},initEcharts() {this.echarts.registerMap("map", tangshan);this.selfAreaData = JSON.parse(JSON.stringify(this.areaData));this.selfOption = JSON.parse(JSON.stringify(this.option));this.myChart = this.echarts.init(this.$refs.myEchart);if (this.cityConfig.dataJson) {this.loadMap(this.cityConfig.name, this.cityConfig.dataJson);}this.selfAreaItems = JSON.parse(JSON.stringify(this.areaItems));window.onresize = this.myChart.resize;this.myChart.setOption(this.selfOption);// 拖拽跟缩放重置let throttledRenderEachCity = this.throttle(this.renderItems, 0);this.myChart.on("geoRoam", throttledRenderEachCity);this.renderItems();},// 缩放和拖拽throttle(fn, delay, debounce) {let currCall;let lastCall = 0;let lastExec = 0;let timer = null;let diff;let scope;let args;delay = delay || 0;function exec() {lastExec = new Date().getTime();timer = null;fn.apply(scope, args || []);}let cb = function () {currCall = new Date().getTime();scope = this;args = arguments;diff = currCall - (debounce ? lastCall : lastExec) - delay;clearTimeout(timer);if (debounce) {timer = setTimeout(exec, delay);} else {if (diff >= 0) {exec();} else {timer = setTimeout(exec, -diff);}}lastCall = currCall;};return cb;},// 填充 地图点位renderItems() {let option = Object.assign(this.selfOption, {xAxis: [],yAxis: [],grid: [],series: [],tooltip: {trigger: "item",axisPointer: {type: "none",},},});this.selfAreaData.forEach((item, idx) => {let nodeCoord = this.selfAreaItems[item.areaName];let coord = this.myChart.convertToPixel("geo", nodeCoord);let itemData = []itemData.push(Number(item.value));if(item.value >= 0 && item.value<=5) {this.barColor = '#58dabd';}else if(item.value > 5 && item.value<=10) {this.barColor = '#fec018';}else if(item.value > 10) {this.barColor = '#f75218';}if (coord) {option.xAxis.push({id: idx + item.areaName,gridId: idx + item.areaName,type: "category",// name: item.areaName,//是否显示柱状图文字nameLocation: "middle",nameGap: 3,splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},axisLine: {show: false,},// data: titleItems,z: 100,});option.yAxis.push({id: idx + item.areaName,gridId: idx + item.areaName,type: "value",splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},axisLine: {show: false,lineStyle: {color: "red",},},min: 0,max: "dataMax",});option.grid.push({id: idx + item.areaName,width: 15,height: 30,left: coord[0] - 15,top: coord[1] - 15,z: 10,});option.series.push({id: idx + item.areaName,type: "bar",xAxisId: idx + item.areaName,yAxisId: idx + item.areaName,barGap: 0,barCategoryGap: 0,data: itemData,barWidth: 8,z: 100,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{  // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。offset: 0,color: '#ffffff'}, {offset: 1,color: this.barColor}]),},opacity: 0,emphasis: {label: {show: false,},},},});}});this.myChart.setOption(option);},},
};
</script>

optionConfig.js文件（这个是地图的配置项）


export default class Options {constructor() {return {tooltip: {},geo: {map: "map",roam: true,label: {show: false,normal: {show: true,textStyle: {color: "#8483c0",fontSize: 12,},},emphasis: {show: true,textStyle: {color: "black",fontSize: 12,},},},itemStyle: {// 普通样式。normal: {areaColor: '#fffefe',//背景颜色borderWidth: 2, //设置外层边框borderColor: '#8483c0'},emphasis: {// 也是选中样式areaColor: "#8483c0",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",}},clickable:false,},visualMap: {type:'piecewise',showLabel:true,pieces:[{min: 10,label:'>10'}, {min: 6, max: 10,label:'5-10'},  {min: 0, max: 5,label:'0-5'},   ],inRange: {color: ['#56dabb','#fec52c','#f7551c']},seriesIndex: 999,left:35,bottom:35,textStyle: {color: "#8483c0",}},};}
}

tangshan.json文件（可以到下面的链接下载需要的地图json，下载的格式应该是geoJson，改成json文件就行了）

echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang

组件的引入：

import chinaEcharts from '../components/ChinaEcharts/index.vue'

<china-echarts :areaData="areaData" :areaItems="areaItems"></china-echarts>

areaData 是数组格式是

areaData: [{areaName:'路南区',value: 9},{areaName:'路北区',value: 19},{areaName:'遵化市',value: 2},{areaName:'迁西县',value: 5},{areaName:'丰南区',value: 10},
],

areaItems 因为每个柱状图是遍历的所以这个传入的配置项是地区对应的柱状图坐标（这个坐标可以在json文件找，我图省事就是用的center坐标，如果有更好的方法请告知我谢谢）

代码放完了，接下来改说说注意事项是什么了

第一个注意点（最重要！！！）：调后台接口有数据但是没有图

我们柱状图的数据肯定是要调后台接口的。但是会发现我们用假的数据，能正常显示柱状图，但是调了后台接口就显示不出来了。在模拟的数据和处理返回的数据格式都一致的情况下。那就是渲染的问题了。

我们请求是异步的，所以客户端就没等服务端相应完就渲染了。所以会导致柱状图再渲染的时候，你传入的数据还是空的

解决办法：

用watch监听数据变化在渲染柱状图（我这个是封装的组件，如果是在同一个页面就直接在请求接口的方法里面调用initEcharts方法就行了）。用假数据测试，initEcharts方法写在mounted里面就行。

watch: {areaData: {deep: true,handler: function(newVal,oldVal) {this.initEcharts();}}},

第二个注意点：柱状图渐变色的问题

我的需求是根据传入的不同数值，显示不同的颜色，在index文件里面 renderItems()里面是写柱状图配置的。

在series里面的itemStyle的normal 写color的配置

renderItems ()里面写对颜色的判断

color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{  // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。offset: 0,color: '#ffffff'}, {offset: 1,color: this.barColor
]),

注意：offset 中间也可以加0.5，这样就可以三个颜色过渡了。

第三个注意点：visualMap会覆盖柱状图的渐变色

echarts里面地图的示例配置是visualMap 不是 lengend

导致会覆盖柱状图颜色的罪魁祸首就是seriesIndex，echarts官网说的很清楚了，因为我这块只是为了展示用，不做任何功能，所以就不用关联设一个不可能的值就行了，这样就不会覆盖改好的柱状图颜色了。

第四个注意点：一个地区渲染多个柱状条和名字

在index文件中，传入的areaData里面的areaName就是每个柱状图的名字，不过我不需要，需要的把他打开就行了

如果在一个地区渲染多个柱状条的话，itemData也就是areaData里面的value，这是一个数组，如果传入的数组长度是2，那就在一个区域会显示两个柱条，并且有高低变化。

第五个注意点：echarts引入方式

import * as echarts from 'echarts'

不管在哪引入echarts，要用* as的形式，官方推荐用法，直接用import from 可能报echarts undefined的错

补充：解决每个区域柱状图高度一直问题

这个问题真的想了很久，甚至想过在数组里面加一个value，然后只显示一个柱条。但没想到咋改。突然茅塞顿开，既然让他给高度不一致，直接设置y轴刻度不就行了。一开始想的是把每组的最大值算出来赋给y轴刻度。然后想了一下不太好，如果数据很多总和加起来就很多了，那少的数据不就几乎看不见了。所以要算每个区域的最大值赋给y轴，话不多说，上代码

在initEcharts方法里面获取最大值

// 遍历数组获取最大值
for(let i = 0;i<this.selfAreaData.length;i++) {if(this.maxValue<this.selfAreaData[i].value) {this.maxValue = this.selfAreaData[i].value}
}

或者换一种更简便的方法，用reduce函数一行代码

this.maxValue = this.selfAreaData.reduce((pre, cur) => pre > cur?.value ? pre : cur?.value)

data里面定义一下maxValue

在柱状图配置项里面的yAxis里面的max属性设置刻度就搞定了

最后附效果图（柱条的样式可以根据需要修改）

如有问题，请指出，谢谢！

echarts 地图和柱状图结合（在地图上显示柱状图）相关推荐

地图上显示柱状图_你见过哪些比较炫酷的地图可视化呈现？
帝都24小时图鉴mp.weixin.qq.com 一座城市总有那么一些特殊的场景和时刻,让人很容易就对这个城市产生特殊印象.据统计,北京有超1000万的工作人口,在这庞大的数字背后,显现了北京上班族 ...
手机端GSP地图的定位并且在网页上显示地图的轨迹
百度地图定位手机端功能开发: 第一步:申请百度的开发者密钥http://developer.baidu.com/map/android-mobile-apply-key.htm 申请到开发API的ke ...
vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
echarts地图上实现柱状图
根据官网的案例套用研究了一下,希望能帮到有需要的朋友 github地址:https://github.com/zhangqian00/echarts-map-bar <!DOCTYPE html ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
使用echarts完成中国省市区县镇地图展示
目录前言一.中国地图 1.1 地图数据-china.js 1.2 代码应用二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用三.市级地图--以 ...
echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...

echarts 地图和柱状图结合（在地图上显示柱状图）

echarts 地图和柱状图结合（在地图上显示柱状图）相关推荐

最新文章

热门文章