<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body > <div id="container" style="height: 500px; 500px"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://api.map.baid.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var dataBJ=getBJ(); alert(dataBJ); var dataSH =getJC(); alert(dataSH); function getBJ(){ var dataText=[]; $.ajax({ url:'json', dataType:'json', type:'get', success:function(data){ var arr1; for(var i=0;i<data.length;i++){ arr1=[data[i].x,data[i].y,data[i].result]; dataText.push(arr1); } //alert(dataText[0]); //alert(dataBJ.length); //alert("123456"); }, }) return dataText; } function getJC(){ var dataText=[]; $.ajax({ url:'json1', dataType:'json', type:'get', success:function(data){ var arr1; for(var i=0;i<data.length;i++){ arr1=[data[i].x,data[i].y,data[i].result]; dataText.push(arr1); } //alert(dataText[0]); //alert(dataBJ.length); //alert("123456"); }, }) return dataText; } var schema = [ {name: 'date', index: 0, text: '日'}, {name: 'AQIindex', index: 1, text: 'AQI指数'}, {name: 'PM25', index: 2, text: 'PM2.5'}, {name: 'PM10', index: 3, text: 'PM10'}, {name: 'CO', index: 4, text: '一氧化碳（CO）'}, {name: 'NO2', index: 5, text: '二氧化氮（NO2）'}, {name: 'SO2', index: 6, text: '二氧化硫（SO2）'} ]; var itemStyle = { opacity: 0.8, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }; option = { backgroundColor: '#404a59', color: [ '#ff0000', '#00aaff' ], legend: { top: 10, data: ['代理', '机场'], textStyle: { color: '#fff', fontSize: 16 } }, grid: { left: '10%', right: 150, top: '18%', bottom: '10%' }, tooltip: { padding: 10, backgroundColor: '#222', borderColor: '#777', borderWidth: 1, formatter: function (obj) { var value = obj.value; return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' + obj.seriesName + ' ' + value[0] + '日：' + value[7] + '</div>' + schema[1].text + '：' + value[1] + '<br>'; } }, xAxis: { type: 'value', name: '入度', nameLocation: 'end', nameGap: 20, nameTextStyle: { color: '#fff', fontSize: 16 }, axisLine: { lineStyle: { color: '#eee' } }, splitLine: { show: true } }, yAxis: { type: 'value', name: '出度', nameLocation: 'end', nameGap: 20, nameTextStyle: { color: '#fff', fontSize: 16 }, axisLine: { lineStyle: { color: '#eee' } }, splitLine: { show: true } }, visualMap: [ { left: 'right', top: '10%', dimension: 2, min: 0, max: 250, itemWidth: 30, itemHeight: 120, calculable: true, precision: 0.1, text: ['圆形大小'], textGap: 30, textStyle: { color: '#fff' }, inRange: { symbolSize: [10, 70] }, outOfRange: { symbolSize: [10, 70], color: ['rgba(255,255,255,.2)'] }, controller: { inRange: { color: ['#c23531'] }, outOfRange: { color: ['#444'] } } }, ], series: [ { name: '代理', type: 'scatter', itemStyle: itemStyle, data: dataBJ }, { name: '机场', type: 'scatter', itemStyle: itemStyle, data: dataSH }, ] }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
json格式：
[{"x":20,"y":200,"result":200},
{"x":200,"y":204,"result":200}
]