后续进行美化, 先上代码, 其实就是把地图经纬度转为X/Y坐标。
// 品牌优势-区域分布 me.initEcharts2 = function() { var myChart = echarts.init(document.getElementById('echarts2'), 'light'); $.get('../json/chengdu5city.json', function(geoJson) { echarts.registerMap('CD', geoJson); myChart.setOption(option = { title : { text : '城市配送物流区域分布', x : 'center' }, tooltip : { trigger : 'item', formatter : function(params, ticket, callback) { return params.value * "100000"; } }, toolbox : { show : true, orient : 'vertical', left : 'right', top : 'center', feature : { dataView : { readOnly : false }, restore : {}, saveAsImage : {} } }, visualMap : { min : 0, max : 13, text : [ 'High', 'Low' ], realtime : false, calculable : true, inRange : { color : [ 'lightskyblue', 'yellow', 'orangered' ] } }, series : [ { name : '香港18区人口密度', type : 'map', mapType : 'CD', // 自定义扩展图表类型 itemStyle : { normal : { label : { show : true } }, emphasis : { label : { show : true } } }, data : [ { name : '锦江区', value : 0.0005116 }, { name : '青羊区', value : 0.0006116 }, { name : '金牛区', value : 0.000517583 }, { name : '武侯区', value : 0.000416583 }, { name : '成华区', value : 0.000711583 } ] } ] }); setTimeout(function() { myChart.setOption({ series : getPieSeries(scatterData(), myChart) }); }, 10); }); } var scatterData = function getVirtulData() { var data = [ { name : '锦江区', value : 0.00012358 * 100000 }, { name : '青羊区', value : 0.00012358 * 100000 }, { name : '金牛区', value : 0.00012358 * 100000 }, { name : '武侯区', value : 0.00012358 * 100000 }, { name : '成华区', value : 0.00012358 * 100000 } ]; return data; } function getPieSeries(scatterData, chart) { return echarts.util.map(scatterData, function(item, index) { var center = chart.convertToPixel({ seriesIndex : 0 }, [ 104.153987825, 30.740483625 ]); console.log(center); return { id : index + 'pie', type : 'pie', center : center, label : { normal : { formatter : '{c}', position : 'inside' } }, radius : 50, data : [ { name : '工作', value : Math.round(Math.random() * 24) }, { name : '娱乐', value : Math.round(Math.random() * 24) }, { name : '睡觉', value : Math.round(Math.random() * 24) } ] }; }); }