Echarts省份地图上显示柱状图+指定区域高亮显示（地图柱状图）

先引入echarts和在echats社区下载对应地图省份的JSON数据，在调接口拿数据的时候如果出现柱状图没出现的问题，要确保后端返回的信息和center和center2中的name名字完全一致，因为后面根据name遍历数组，有其他问题可以私信

import baoji from "@/assets/json/610300.json";export default {data() {return {datasss : [// { name: "渭滨区", value: 0 },// { name: "金台区", value: 42 },// { name: "陈仓区", value: 0 },// { name: "凤翔区", value: 0 },// { name: "岐山县", value: 0 },// { name: "扶风县", value: 0 },// { name: "眉县", value: 0 },// { name: "陇县", value: 0 },// { name: "千阳县", value: 0 },// { name: "麟游县", value: 0 },// { name: "凤县", value: 0 },// { name: "太白县", value: 0 },],areaMap:'',};},mounted() {this.$nextTick(()=>{// this.init();this.getMapList()})}, methods: {init() {const that = this; var chartDom = document.getElementById("baojimap");var myChart = this.$echarts.init(chartDom);window.addEventListener("resize", function () {myChart.resize();});myChart.off("click");this.$echarts.registerMap("js", baoji);this.$echarts.registerMap("js2", baoji);// console.log(baoji);var aaa = []function sss(baoji){// console.log(baoji); aaa = baoji.features.map((item)=>{return {value: (Math.random() * 1000).toFixed(2),name:item.properties.name}});// console.log(aaa);}sss(baoji)var option;// 柱状图 图中的位置var center = {渭滨区: [107.144467, 34.271008],金台区: [107.080003, 34.425192],陈仓区: [107.383645, 34.352747],凤翔区: [107.400577, 34.581668],岐山县: [107.694464, 34.44296],扶风县: [107.929419, 34.375497],眉县: [107.799971, 34.142137],陇县: [106.857066, 34.893262],千阳县: [107.174987, 34.742584],麟游县: [107.696608, 34.777714],凤县: [106.758122, 33.998464],太白县: [107.419533, 33.960015],};// 图中 省份字的位置var center2 = {渭滨区: [107.144467, 34.271008],金台区: [107.080003, 34.425192],陈仓区: [107.383645, 34.352747],凤翔区: [107.400577, 34.581668],岐山县: [107.694464, 34.44296],扶风县: [107.929419, 34.375497],眉县: [107.799971, 34.142137],陇县: [106.857066, 34.893262],千阳县: [107.174987, 34.742584],麟游县: [107.696608, 34.777714],凤县: [106.758122, 33.998464],太白县: [107.419533, 33.960015],};// 数据var dataw = that.datasss;console.log(dataw);var lineData = dataw.map((item) => {// debuggerconsole.log(item);return {coords: [center[item.name],[center[item.name][0], center[item.name][1] + item.value * 4 * 0.001],],};});var scatterData = dataw.map((item) => {return [center[item.name][0],center[item.name][1] + item.value * 4 * 0.001,];});var scatterData2 = dataw.map((item) => {return center[item.name];});var scatterData3 = dataw.map((item) => {return center2[item.name].concat(item.name);});console.log(lineData,scatterData,scatterData2,scatterData3);option = {backgroundColor: "rgba(0,0,0,0)",tooltip: {trigger: 'item',show: true,enterable: true,textStyle:{fontSize:20,color: '#fff'},backgroundColor: 'rgba(0,0,0,0.5)',// backgroundColor: 'rgba(0,2,89,0.8)',// formatter: '{b}'formatter: function (item) {var aaaaa = datawreturn `商户数${aaaaa[item.dataIndex].value}`;},},// 地图图层样式geo: [{map: "js",aspectScale: 0.9,roam: false, //是否允许缩放// roam:true,//zoom: 1.1, //默认显示级别layoutSize: "95%",layoutCenter: ["50%", "50%"],itemStyle: {areaColor: "transparent",borderColor: "#37C1FD",borderWidth: 2,},emphasis: {itemStyle: {areaColor: "#72b2ff",},label: {show: 0,color: "#fff",},},zlevel: 3,regions: [ // 区域配置{name: '金台区', //区块名称itemStyle: {normal: {areaColor: 'rgb(247, 192, 35)' // 区域颜色}}}, ]},{map: "js2",aspectScale: 0.9,roam: false, //是否允许缩放//zoom: 1.1, //默认显示级别layoutSize: "95%",layoutCenter: ["50%", "50%"],itemStyle: {areaColor: {type: "radial",x: 0.7,y: 0.5,r: 0.4,colorStops: [{offset: 0, //color: "#72b2ff", // 0% 处的颜色// color:"rgba(8, 79, 207)"color:"rgba(1, 32, 137,0.5)"},{offset: 1,color: "rgba(1, 32, 137,0.5)", // 100% 处的颜色},],global: false, // 缺省为 false},borderColor: "#37C1FD",borderWidth: 2,},zlevel: 2,silent: true,},{map: "js2",aspectScale: 0.9,roam: false, //是否允许缩放//zoom: 1.1, //默认显示级别layoutSize: "95%",layoutCenter: ["50%", "52%"],itemStyle: {areaColor: "#005DDC",borderColor: "#329BF5",borderWidth: 1,},zlevel: 1,silent: true,},],series: [// 画柱状图{type: "lines",zlevel: 5,effect: {show: false,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: "arrow", //箭头图标symbolSize: 5, //图标大小},lineStyle: {width: 15, //尾迹线条宽度color: 'rgb(22,255,255, .6)',opacity: 1, //尾迹线条透明度curveness: 0, //尾迹线条曲直度},label: {show: 0,position: "end",formatter: "245",},silent: true,data: lineData,},// 柱形数量显示{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,label: {show: !0,position: "left",formatter: (params) => dataw[params.dataIndex].value,padding: [4, 8],backgroundColor: "#003F5E",borderRadius: 5,borderColor: "#67F0EF",borderWidth: 1,color: "#67F0EF",},symbol: "circle",symbolSize: [15, 8],itemStyle: {color: 'rgb(22,255,255, .6)',opacity: 1,},silent: true,data: scatterData,},// 图中圆点设置{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,symbol: "circle",symbolSize: [15, 8],itemStyle: {color: 'rgb(22,255,255, .6)',opacity: 1,shadowColor: "#000",shadowBlur: 5,shadowOffsetY: 2,},silent: true,data: scatterData2,},{type: "effectScatter",coordinateSystem: "geo",geoIndex: 0,symbol: "circle",symbolSize: 4,showEffectOn: "render",rippleEffect: {brushType: "fill",scale: 10,},hoverAnimation: true,label: {formatter: (p) => p.data[2],position: "right",color: "#fff",fontSize: 14,distance: 10,show: !0,},itemStyle: {color: 'rgb(22,255,255, .6)',},zlevel: 6,data: scatterData3,},],};myChart.setOption(option);// 地图中高亮的省份 ，this.areaMap为地区名myChart.on("globalout",()=>{setTimeout(()=>{showTips(this.areaMap)},1000)}) function showTips(name) {aaa.forEach((item,i)=>{ if (item.name.includes(name)) {myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: i});myChart.dispatchAction({type: 'mapSelect',seriesIndex: 0,dataIndex: i});}}); }},//接口async getMapList(){await this.$axios.post("/api/v2/index/HomeMapData").then((res)=>{if(res.data.code === 200){// console.log(res);this.datasss = res.data.data.datathis.areaMap = res.data.data.areaName// 在拿到数据后再调用echarts，防止echarts在没拿到数据之前渲染this.init();console.log(this.datasss);}})}},};.baojimap {height: 100%;width: 100%;}