LiuTingYu123456 opened a new issue #10110: 地图与柱状图结合，当拖拽缩放地图时，柱状图位置没有变化 URL: https://github.com/apache/incubator-echarts/issues/10110 ### Version 4.2.0-rc.2 ### Steps to reproduce 当拖拽缩放地图时，柱状图位置没有变化 ### What is expected? 当拖拽与缩放地图时，柱状图的位置能随着地图一起变化 ### What is actually happening? 当拖拽与缩放地图时，柱状图的位置没有变化 `renderEachCity(container) { var option4GDP = { xAxis: [], yAxis: [], grid: [], series: [] }; var map4GDPAndMilitary = this.convertGDPAndMilitary(this.maps); for(var key in map4GDPAndMilitary) { var dataItem = map4GDPAndMilitary[key]; var viewGDP = dataItem[1] * 60 / this.maxGDP; viewGDP = viewGDP < 5 ? 5 : viewGDP; var viewMilitary = viewGDP * ( dataItem[2] / 100 ); viewMilitary = viewMilitary < 5 ? 5 : viewMilitary; console.log(viewGDP, viewMilitary, dataItem[2],'11111111'); var inflationData = [{ value: viewGDP, symbol: "image://../../../../../static/image/GDP.png", symbolSize: [12, 5], symbolRepeat: true, }, { value: viewMilitary, symbol: "image://../../../../../static/image/junfei.png", symbolSize: [12, 5], symbolRepeat: true, }]; var geoCoord = geoCoordNap[dataItem[0]]; //获得城市的坐标 var coord = container.convertToPixel('geo', geoCoord); //转换坐标系上的点到像素坐标值。 key += ''; option4GDP.xAxis.push({ id: key, gridId: key, type: 'category', name: dataItem[0], nameTextStyle: { color: '#F1E04F', }, nameLocation: 'middle', nameGap: 3, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false }, minInterval: 10, data: ["GDP", "军费开支"], z: 100 }); option4GDP.yAxis.push({ id: key, gridId: key, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false, lineStyle: { color: '#1C70B6' } }, max: 50, z: 100 }); option4GDP.grid.push({ id: key, width: 30, height: 40, left: coord[0] - 15, top: coord[1] - 20, z: 100, }); option4GDP.series.push({ id: key, type: 'pictorialBar', symbol: 'circle', xAxisId: key, /*每一组直方图需要对应的x轴与y轴 */ yAxisId: key, barWidth: 10, barGap: 1, barCategoryGap: 0, data: inflationData, z: 100, itemStyle: { normal: { color: function (params) { // 柱状图每根柱子颜色 var colorList = ['#F75D5D', '#59ED4F']; return colorList[params.dataIndex]; return colorList[1]; } } } }); } container.setOption(option4GDP); }, /*军费开支*/ militarys(nameval){ var military=[]; var geoCoordMap={}; for(var key in geoCoordNap){ var name = key; geoCoordMap[name] = geoCoordNap[key] } for(var key in nameval){ var names = nameval[key].countryName; var geoCoord =geoCoordMap[names]; if(geoCoord){ var temp={ value:nameval[key].countGDP, military:nameval[key].countGDP, militaryDataUnit:nameval[key].gDPDataUnit, symbol:"image://../../../../../static/image/junfei.png",/*自定义图片*/ }; military.push(temp); } } // console.log(military); return military }, getWorldMap(data){ var that = this; /* * 悬浮框dataInfo * */ var value2 = []; for(var key in data){ var value = (data[key].peopleCount && data[key].peopleCount.value)||0; var landArea = (data[key].landArea && data[key].landArea.value)||0; var countGDP = (data[key].countGDP && data[key].countGDP.value)||0; var militarySpend = (data[key].militarySpend && data[key].militarySpend.value)||0; var valueUnit = (data[key].peopleCount && data[key].peopleCount.dataUnit)||"--" var landAreaUnit = (data[key].landArea && data[key].landArea.dataUnit)||"--" var countGDPUnit = (data[key].countGDP && data[key].countGDP.dataUnit)||"--" value2.push({ name:key, eglishName:data[key].eglishName, value:value,/*人口数量*/ continent:data[key].continent,/*所属洲*/ landArea:landArea,/*总面积*/ countGDP:countGDP,/*GDP*/ militarySpend:militarySpend,/*军费所占比例*/ /* 单位 * */ valueUnit:valueUnit, landAreaUnit:landAreaUnit, countGDPUnit:countGDPUnit, }) } var nameMap = { "Czech Rep.":"捷克共和国", "Czech Rep..":"捷克共和国", "Albania":"阿尔巴尼亚", ... ... } var container = this.$echarts.init(document.getElementById('container')); var option = { nameMap:nameMap, tooltip: { trigger: 'item', //国家info 的悬浮框 formatter: function (params) { var paramsData = params.data; if(paramsData!=undefined){ /*鼠标经过地图*/ if(params.componentSubType == 'map'){ for(let key in data){ that.toolData=data[key]; that.toolTipStr = `<div class="toolTip" style="background: rgba(0,0,0,.5);color:red;padding: 10px;max-width: 250px;"> <p class="toolName" style="color: #fff;"><span class="name" style="color: #fff;">中文名：</span>${paramsData.name||"--"}</p> <p class="toolName" style="color: #fff;">英文名：${paramsData.eglishName||"--"}</p> <p class="toolName" style="color: #fff;">所属洲：${paramsData.continent||"--"}</p> <p class="toolName" style="color: #fff;">军费所占比例：${data[key].militarySpend.value||"--"}%</p> <p class="toolName" style="color: #fff;">人口数量：${paramsData.value||"--"}${paramsData.valueUnit||"--"}</p> <p class="toolName" style="color: #fff;">总面积：${paramsData.value||"--"}${paramsData.landAreaUnit||"--"}</p> <p class="toolName" style="color: #fff;">GDP：${paramsData.value||"--"}${paramsData.countGDPUnit||"--"}</p> </div>`; return that.toolTipStr } } if (params.componentSubType == 'scatter') { if(params.data.countGDP){ var str = `<div class='tishi' style='padding:15px;color:#555;background:#cfcfcf9e;'> <div>军费开支：${params.data.countGDP||"--"}%</div> </div> `; return str }else if(params.data.military){ var str = `<div class='tishi' style='padding:15px;color:#555;background:#cfcfcf9e;'> <div>GDP：${params.data.military||"--"}${params.data.militaryDataUnit||""}</div> </div> `; return str } } } }, extraCssText: 'background:rgba(0,0,0,0)', }, visualMap: { min: 0, max: 100000000, text:['高','低'], realtime: false, calculable: true, inRange: { color: ['lightskyblue','yellow', 'orangered'] } }, animationEasing: 'elasticOut', series: [ { type: 'scatter', coordinateSystem: 'geo', data: [], }, { name: 'categoryA', type: 'map', geoIndex: 0, /*可以指定一个geo组件 这样map和其他series就可以共享一个geo组件啦 */ data:value2 } ], geo: { map: "world", label: { emphasis: { show: false } }, itemStyle: { normal: { borderColor: 'orange', borderWidth: 1, }, emphasis: { //高亮下的多边形样式 borderWidth: 1, } }, roam: true, //是否允许缩放 // layoutCenter: ["50%", "50%"], //地图位置 // layoutSize: "180%", data:value2 // 背景颜色 }, }; container.setOption(option,true); // start 对应的坐标处加柱状图 By LZ this.renderEachCity(container); // end 对应的坐标处加柱状图 By LZ /*监听地图缩放与拖拽事件 */ container.on('georoam', function (params) { console.log(params,'@@@@@'); }); container.on('click', function(params){ if(params.data){ switch (params.name) { case "GDP": //点击柱状图不发生跳转 break; case "军费开支": break; default: window.open(`/#/countryInfo?entityid=`+params.name); } }else{ alert("请查看其他国家") } }); }` <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
