[echarts] 橫縱數據散點圖

 

需求：課程平均分（X）與課程通過率散點圖

 

 

http://echarts.baidu.com/echarts2/doc/example/scatter1.html
https://www.cnblogs.com/dengyg200891/p/6863128.html

https://blog.csdn.net/luanpeng825485697/article/details/76864440

// 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    //第二步構造數據
    var data1 = [];//數據區域縮放組件
    //構造隨機數
    var random = function (max){
        return (Math.random() * max).toFixed(3);
    };

    //將數據裝載到數組中
    for (var i = 0; i < 500; i++) {
        data1.push([random(15), random(10), random(1)]);
    };

    //3、配置option項
    //第三步就是使用echarts的option進行參數的配置
    option = {}

==============================================================
option = {
    title : {
        text: '課程平均分和通過率散點分布圖',
        subtext: 'X軸：課程平均分 / Y軸：課程通過率'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 1) {
                return params.value[2]  +' <br/>'
                + params.seriesName + ' :'
                + params.value[0] + '分, ' 
                + params.value[1] + '% ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + params.name + ' : '
                   + params.value + '%';
            }
        },  
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data:['[課程平均分，課程通過率]']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: false},
            dataZoom : {show: false},
            dataView : {show: false, readOnly: false},
            restore : {show: false},
            saveAsImage : {show: false}
        }
    },
    xAxis : [
        {
            type : 'value',
            //name:'課程平均分',
            scale:true,
            axisLabel : {
                formatter: '{value} 分'
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            //name:'課程通過率',
            scale:true,
            axisLabel : {
                formatter: '{value} %'
            }
        }
    ],
    series : [
        
        {
            name:'[課程平均分,課程通過率]',
            type:'scatter',
             symbolSize: function (value){
                  return Math.round(value[1] / 12);
              },
            data: [
                      [70.5, 67.7,'大學物理1'], 
                      [79.1,82.7,'大學物理2'],
                       [77.8, 100,'大學物理3']
            ]
        }
    ]
};












=======================================
//第二步構造數據
var data1 = [];//數據區域縮放組件
//構造隨機數
var random = function (max){
  return (Math.random() * max).toFixed(2);
};
i
//將數據裝載到數組中
for (var i = 0; i < 751; i++) {
  data1.push([random(15), random(10),  "大學物理"+i ]);
};

console.log("data1:")
console.log(data1)

option = {
    title : {
        text: '課程平均分和通過率散點分布圖',
        subtext: 'X軸：課程平均分 / Y軸：課程通過率'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 1) {
                return params.value[2]  +' <br/>'
                + params.seriesName + ' :'
                + params.value[0] + '分, ' 
                + params.value[1] + '% ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + params.name + ' : '
                   + params.value + '%';
            }
        },  
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data:['[課程平均分，課程通過率]']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: false},
            dataZoom : {show: false},
            dataView : {show: false, readOnly: false},
            restore : {show: false},
            saveAsImage : {show: false}
        }
    },
    xAxis : [
        {
            type : 'value',
            //name:'課程平均分',
            scale:true,
            axisLabel : {
                formatter: '{value} 分'
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            //name:'課程通過率',
            scale:true,
            axisLabel : {
                formatter: '{value} %'
            }
        }
    ],
    series : [
        
        {
            name:'[課程平均分,課程通過率]',
            type:'scatter',
            data:data1
        }
    ]
};