echarts散点图总结 

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body >
       <div id="container" style="height: 500px;width: 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>
html代码

json格式：

[{"x":20,"y":200,"result":200},
{"x":200,"y":204,"result":200}

]

posted @ 2020-12-05 14:54  程序员亮亮丫！！  阅读(382)  评论(0)  编辑  收藏  举报