var gz = "/siteassets/chart/echarts/options/00ac5e1d-7074-422e-aa06-f2352489fcca.json"; var sg = "/siteassets/chart/echarts/options/995e1b71-6ba9-478c-93d2-005079e9b8a7.json"; var sz = "/siteassets/chart/echarts/options/9ac6a38a-ad6e-49e3-969b-4cb237825315.json"; var zh = "/siteassets/chart/echarts/options/86f62558-731b-4936-ba37-aae74503dacf.json"; var st = "/siteassets/chart/echarts/options/7403770c-e98f-4c58-80b2-7b14380b12c9.json"; var fs = "/siteassets/chart/echarts/options/a0ce479a-3ac1-475a-86e4-1f6d905946fd.json"; var jm = "/siteassets/chart/echarts/options/52a73178-d7c6-4c9d-a652-e7cc22afd932.json"; var zj = "/siteassets/chart/echarts/options/6ce3515a-3934-472d-82cc-f136405f6ea5.json"; var mm = "/siteassets/chart/echarts/options/88fa5cbd-9522-475f-8be8-28d985b585ef.json"; var zq = "/siteassets/chart/echarts/options/552fc79c-9b92-45d4-b2df-42e31cc9a172.json"; var hz = "/siteassets/chart/echarts/options/8219cae9-f583-4abd-9c27-e887e30f7c34.json"; var mz = "/siteassets/chart/echarts/options/2679f2a8-c459-445f-8f86-1645ebe73761.json"; var sw = "/siteassets/chart/echarts/options/e1ff6e63-f84d-4711-90cb-547e570dd486.json"; var hy = "/siteassets/chart/echarts/options/25fc7367-2767-448e-8a7f-c043f0207536.json"; var jy = "/siteassets/chart/echarts/options/bf9f6444-ac4f-4d25-bc9c-b36148e069a4.json"; var qy = "/siteassets/chart/echarts/options/690c62f1-11d6-4a73-b860-7f55542dbee0.json"; var dg = "/siteassets/chart/echarts/options/296d3b19-1ce1-4727-9ddc-a28a98473eca.json"; var zs = "/siteassets/chart/echarts/options/a9276fe6-ca29-417c-8bd8-3c37801a0a67.json"; var cz = "/siteassets/chart/echarts/options/73a04403-1be6-4e8f-8bf8-47ffaf20ba60.json"; var jy = "/siteassets/chart/echarts/options/87d4329d-82b2-4eb1-95ea-843aa86e5fd8.json"; var yf = "/siteassets/chart/echarts/options/416a97cc-e868-49b0-8fd7-df51f98e1814.json"; // 广东省数据 var qingdao = "/siteassets/chart/echarts/options/9fcbf17c-f7c9-43c3-886d-39e52a2c6abb.json"; var chart = myChart; var cityProper = { '广州市': gz, '韶关市': sg, '深圳市': sz, '珠海市': zh, '汕头市': st, '佛山市': fs, '江门市': jm, '湛江市': zj, '茂名市': mm, '肇庆市': zq, '惠州市': hz, '梅州市': mz, '汕尾市': sw, '河源市': hy, '阳江市': jy, '清远市': qy, '东莞市': dg, '中山市': zs, '潮州市': cz, '揭阳市': jy, '云浮市': yf, }; var data = [{ name: '广州市', value: 1000, valueNum: 300, }, { name: '韶关市', value: 1000, valueNum: 300, }, { name: '深圳市', value: 1000, valueNum: 300, }, { name: '珠海市', value: 1000, valueNum: 300, }, { name: '汕头市', value: 1000, valueNum: 300, }, { name: '佛山市', value: 1000, valueNum: 300, }, { name: '江门市', value: 1000, valueNum: 300, }, { name: '湛江市', value: 1000, valueNum: 300, }, { name: '茂名市', value: 1000, valueNum: 300, }, { name: '肇庆市', value: 1000, valueNum: 300, }, { name: '惠州市', value: 1000, valueNum: 300, }, { name: '梅州市', value: 1000, valueNum: 300, }, { name: '汕尾市', value: 1000, valueNum: 300, }, { name: '河源市', value: 1000, valueNum: 300, }, { name: '阳江市', value: 1000, valueNum: 300, }, { name: '清远市', value: 1000, valueNum: 300, }, { name: '东莞市', value: 1000, valueNum: 300, }, { name: '中山市', value: 1000, valueNum: 300, }, { name: '潮州市', value: 1000, valueNum: 300, }, { name: '揭阳市', value: 1000, valueNum: 300, }, { name: '云浮市', value: 1000, valueNum: 300, }, ]; // 随机产生数据 // for (var i = 0; i < data.length; i++) { // data[i].value = Math.round(Math.random() * 10000); // data[i].valueNum = Math.round(Math.random() * 1000); // } let option = { tooltip: { trigger: 'item' }, toolbox: { show: true, orient: 'vertical', x: 'right', y: 'center', feature: { mark: { show: true }, dataView: { show: true, readOnly: false } } }, series: [{ tooltip: { trigger: 'item', show: true, formatter: function(params) { if (params.data) { return `${params.name}
规划数量：${params.data.value}
发证数量：${params.data.valueNum}` } else { return; } } }, name: '选择器', type: 'map', mapType: '青岛', // left: 'left', // top: 'top', // width: '30%', roam: true, selectedMode: 'single', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: data }], animation: false }; $.get(qingdao, function(getJSON) { echarts.registerMap("青岛", getJSON) chart.setOption(option, true); chart.on("click", chartClick); }) //var ecConfig = echarts.config; function chartClick(param) { //var selected = param.selected; //console.log(option.series[0].data[1].selected); var selectedProvince = param.name; if (!cityProper[selectedProvince]) { option.series.splice(1); option.legend = null; option.visualMap = null; chart.setOption(option, true); return; } console.log(cityProper[selectedProvince]); $.get(cityProper[selectedProvince], function(geojson, data) { echarts.registerMap('青岛', geojson); // 配置移上去的显示信息 let cityData = [] let mapData = JSON.parse(geojson).features // 市数据配置 mapData.map((i, ind) => { cityData[ind] = { name: i.properties.name, value: Math.round(Math.random() * 10000), valueNum: Math.round(Math.random() * 1000), } }) // 如果要单独配置某个地区的值请使用以下方法 // F12 打印出了具体的值对应位置 console.log(cityData) cityData[0].value = 1000 cityData[0].valueNum = 10000 //地图配置 option.series[0] = { name: '选择器', type: 'map', mapType: '青岛', // left: '50%', // top: 'top', // width: '30%', roam: true, selectedMode: 'single', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: cityData }; option.legend = { left: 'right', data: ['随机数据'] }; option.tooltip = { trigger: 'item', show: true, formatter: function(params) { if (params.data) { return `${params.name}
规划数量：${params.data.value}
发证数量：${params.data.valueNum}` } else { return; } } }, chart.setOption(option, true); }) };

广州下钻