LiuTingYu123456 opened a new issue #10107: vue项目中，世界地图与柱状图结合，缩放与拖拽地图时，柱状图的位置没有变化 URL: https://github.com/apache/incubator-echarts/issues/10107 `代码实现：` methods:{ 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); }, 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'));/*初始化echarts*/ 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); this.renderEachCity(container); /*此处添加柱状图*/ /*监听地图缩放与拖拽事件 */ 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 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]
