🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
路径D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js 在_buildChinamapAreaChartDescription方法里添加 ~~~ dataCategory.groups.push({ name: "text", title: { text: "配置地区" }, elements: [{ title: "省份", type: "select-s", bind: "provinceObj", items: [{ name: "北京", value: "110000" }, { name: "天津", value: "120000" }, { name: "上海", value: "310000" }, { name: "重庆", value: "500000" },{ name: "河北", value: "130000" }, { name: "山西", value: "140000" }, { name: "内蒙古", value: "150000" }, { name: "辽宁", value: "210000" }, { name: "吉林", value: "220000" }, { name: "黑龙江", value: "230000" }, { name: "江苏", value: "320000" }, { name: "浙江", value: "330000" }, { name: "安徽", value: "340000" }, { name: "福建", value: "350000" }, { name: "江西", value: "360000" }, { name: "山东", value: "370000" }, { name: "河南", value: "410000" }, { name: "湖北", value: "420000" }, { name: "湖南", value: "430000" }, { name: "广东", value: "440000" }, { name: "广西", value: "450000" }, { name: "海南", value: "460000" }, { name: "四川", value: "510000" }, { name: "贵州", value: "520000" }, { name: "云南", value: "530000" }, { name: "西藏", value: "540000" }, { name: "陕西", value: "610000" }, { name: "青海", value: "630000" }, { name: "宁夏", value: "640000" }, { name: "新疆", value: "650000" }, { name: "香港", value: "810000" }, { name: "澳门", value: "820000" }, { name: "台湾", value: "710000" }] },{ title: "市级", type: "select-s", bind: "cityObj", items: [] }, // { // title: "世界地图", // type: "select-s", // bind: "worldObj", // items: [{ // name: "world", // value: "100000" // }] // } ] }); ~~~ 添加监听的方法 向下滑动200行左右 ~~~ // 选择省份 scope.$watch("component.config.provinceObj", function (newValue, oldValue) { if (newValue != null && newValue !== oldValue) { var option = component.config.chartConfig; var optionNode = component.config; scope.component.description.categories[6].groups[0].elements[1].items = []; // console.log(optionNode) // console.log(newValue) loadMap(newValue.value,newValue.name); function loadMap(mapCode, mapName) { $.ajaxSettings.async = false; $.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) { if (data1) { // console.log(data1) for(var i = 0;i<data1.features.length;i++){ // console.log(data1.features[i]) var name = data1.features[i].properties.name; var id = data1.features[i].id; scope.component.description.categories[6].groups[0].elements[1].items.push({ name: name, value: id }) } echarts.registerMap(mapName, data1); option.geo.map = mapName // console.log(mapName) // console.log(option) scope.component.context.chart.setOption(option, true) curlMap = { mapCode: mapCode, mapName: mapName }; // console.log(curlMap); optionNode.curlMap = curlMap; // console.log(optionNode); } else { alert('无法加载该地图'); } }); } // console.log(scope.component.description.categories[6].groups[0].elements[1].items) } }); // 选择市区 scope.$watch("component.config.cityObj", function (newValue, oldValue) { if (newValue != null && newValue !== oldValue) { var option = component.config.chartConfig; var optionNode = component.config; // console.log(optionNode) // console.log(newValue) loadMap(newValue.value,newValue.name); function loadMap(mapCode, mapName) { $.ajaxSettings.async = false; $.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) { if (data1) { echarts.registerMap(mapName, data1); // console.log(data1) option.geo.map = mapName // console.log(mapName) scope.component.context.chart.setOption(option, true) curlMap = { mapCode: mapCode, mapName: mapName }; // console.log(curlMap); optionNode.curlMap = curlMap; // console.log(optionNode); } else { alert('无法加载该地图'); } }); } } }); // end ~~~ 在 internalInit 方法里 case "chinamap": 添加 ~~~ // 数据处理 var option = component.config.chartConfig; var optionNode = component.config; // console.log(optionNode) if(optionNode.curlMap){ loadMap(optionNode.curlMap.mapCode, optionNode.curlMap.mapName); }else{ loadMap('100000', 'china'); } // var mapdata = option.series[0].data; // option.series[0].data = mapdata; function loadMap(mapCode, mapName) { $.ajaxSettings.async = false; $.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) { if (data1) { // console.log(data1) echarts.registerMap(mapName, data1); // console.log(data1) option.geo.map = mapName // console.log(mapName) scope.component.context.chart.setOption(option, true) curlMap = { mapCode: mapCode, mapName: mapName }; // console.log(curlMap) } else { alert('无法加载该地图'); } }); } ~~~ 路径D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js 在internalBuildEChartsComponent方法里 case "chinamap": 添加 ~~~ // 数据处理 var option = component.config.chartConfig; var optionNode = component.config; // console.log(optionNode) if(optionNode.curlMap){ loadMap(optionNode.curlMap.mapCode, optionNode.curlMap.mapName); }else{ loadMap('100000', 'china'); } // var mapdata = option.series[0].data; // option.series[0].data = mapdata; function loadMap(mapCode, mapName) { $.ajaxSettings.async = false; $.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) { if (data1) { // console.log(data1) echarts.registerMap(mapName, data1); // console.log(data1) option.geo.map = mapName // console.log(mapName) scope.component.context.chart.setOption(option, true) curlMap = { mapCode: mapCode, mapName: mapName }; // console.log(curlMap) } else { alert('无法加载该地图'); } }); } ~~~