其他分享
首页 > 其他分享> > 散点图的详细配置

散点图的详细配置

作者:互联网

基本散点图

 

    var option = {
        title:{x:222,left:'center',text:'男性和女性身高、体重分布'},
        color:['green'],//设置点的颜色
        xAxis: {scale:true,name:'身高(cm)',color:'red'},
        yAxis: {scale:true,name:'体重(kg)'}, 
        series: {
            type:'scatter',symbolSize:20,//设置点的大小
            data:[
                [167.0,64.6],[177.8,74.8],[159.5,58.0],[169.5,68.0],
                [163.0,63.6],[157.5,53.2],[164.5,65.0],[163.5,62.0],
                [171.2,65.1],[161.6,58.9],[167.4,67.7],[167.5,63.0],
                [181.1,76.0],[165.0,60.2],[174.5,70.0],[171.5,68.0],
            ]
        }};

 

 

绘制两个散点图

 

var option = {
            color: ['red', 'green'],//设置两个散点图的颜色
            title: { x: 33, text: '男性和女性身高、体重分布', subtext: '抽样调查来自:FLQ 2020' },
            legend: { data: ['女性', '男性'] },  //配置图例组件
            toolbox: {  //配置工具箱组件
                x: 600, show: true,
                feature: {
                    mark: { show: true },
                    dataZoom: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value} cm' } }],
            yAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value} kg' } }],
            series: [  //配置数据系列
                {   //设置女性数据
                    name: '女性', type: 'scatter', symbolSize: 8,
                    data: [[161.2, 51.6], [167.5, 59], [159.5, 49.2], [157, 63], [155.8, 53.6],
                    [173.0, 59], [159.1, 47.6], [156, 69.8], [166.2, 66.8], [160.2, 75.2],
                    [167.6, 61], [160.7, 69.1], [163.2, 55.9], [152, 46.5], [157.5, 54.3],
                    [156, 52.7], [160, 74.3], [163, 62], [165.7, 73.1], [161, 80]],
                    markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }],
                    },
                    markLine: { data: [{ type: 'average', name: '平均值' }] }
                },
                {   //设置男性数据
                    name: '男性', type: 'scatter', symbolSize: 8,
                    data: [[174, 65.6], [175.3, 71.8], [163.5, 80], [186.5, 72.6], [187.2, 78.8],
                    [167, 64.6], [177.8, 74.8], [164.5, 70], [182, 101.6], [165.5, 63.2],
                    [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66], [177, 68.2],
                    [161.5, 74.8], [164.0, 86.4], [164.5, 78.4], [175, 62], [164, 81.6]],
                    markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }],    
                    },
                    markLine: { data: [{ type: 'average', name: '平均值' }] }
                }
            ]
        };

 

带联谊特效的散点图

 

var option = {
            //指定图表的配置项和数据
            legend: { data: ['一般值', '极值'] },
            xAxis: { scale: true },
            yAxis: { scale: true },
            series: [{
                type: 'effectScatter',  //设置具有涟漪特效的散点图
                //设置图形是否不响应和触发鼠标事件,默认false,即响应和触发鼠标事件
                silent: false,
                //设置系列名称,用于legend的图例筛选
                //在setOption更新数据和配置项时用于指定对应的系列
                name: '极值',
                legendHoverLink: false,  //设置是否启用图例hover时的联动高亮
                hoverAnimation: false,  //设置是否开启鼠标hover的提示动画效果
                effectType: 'ripple',  //设置特效类型,目前只支持涟漪特效'ripple'
                //设置何时显示特效,'render'绘制完成后显示特效
                //'emphasis'高亮(hover)的时候显示特效
                showEffectOn: 'render',
                rippleEffect: {  //设置涟漪特效
                    period: 2,  //设置动画的时间,数字越小,动画越快
                    scale: 5.5,  //设置动画中波纹的最大缩放比例
                    brushType: 'fill',  //设置波纹的绘制方式,可选'stroke'和'fill'
                },
                symbolSize: 20,  //设置特效散点图符号的大小
                color: 'green',
                data: [  //设置特效散点图的数据值
                    [172.7, 87.2],
                    [153.4, 42]]
            },
            {
                name: '一般值', type: 'scatter', color: '#FFCCCC',
                data: [[167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [152.0, 45.8],
                [163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [166.4, 56.6],
                [171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [168.5, 65.2],
                [181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0], [163.0, 72.0],
                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [164.3, 59.8],
                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [178.0, 70.6],
                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [172.7, 87.2],
                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [153.4, 42],
                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3]],
            }]
        };

 

 

气泡图

 

 

function random() {  //生成一个范围在(-90,90)随机数的函数
            var r = Math.round(Math.random() * 90);
            return (r * (r % 2 == 0 ? 1 : -1));  //返回一个值为(-90,90)的随机数
        }
        //生成有100个元素的数组,每个元素有三个数值,数组中前两个元素的值的范围在(-90,90),
        //第三个元素的值是表示气泡大小的随机数,其范围是(0,90)
        function randomDataArray() {
            var d = [];
            var len = 100;
            while (len--) {
                d.push([random(), random(), Math.abs(random()),]);
            }
            return d;
        }
        var option = {
            color: ['#FFCCCC', 'green'],  //配置气泡的颜色系列
            title: {  //配置标题组件
                x: 40, text: '标准气泡图示例', subtext: "随机生成"
            },
            tooltip: {  //配置提示框组件
                trigger: 'axis', showDelay: 0,
                axisPointer: {
                    show: true, type: 'cross',
                    lineStyle: { type: 'dashed', width: 1 }
                }
            },
            legend: { x: 240, data: ['bubble1', 'bubble2'] },  //配置图例组件
            toolbox: {  //配置工具箱组件
                show: true, x: 450,
                feature: {
                    mark: { show: true }, dataZoom: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true }, saveAsImage: { show: true }
                }
            },
            xAxis: [{ type: 'value', splitNumber: 4, scale: true }],
            yAxis: [{ type: 'value', splitNumber: 4, scale: true }],
            series: [  //配置数据系列
                {   //设置数据系列中的第1类气泡bubble1
                    name: 'bubble1', type: 'scatter', symbol: 'circle',
                    symbolSize: function (value) { return Math.round(value[2] / 5); },
                    data: randomDataArray()
                },
                {   //设置数据系列中的第2类气泡bubble2
                    name: 'bubble2', type: 'scatter', symbol: 'circle',
                    symbolSize: function (value) { return Math.round(value[2] / 5); },
                    data: randomDataArray()
                }]
        };

 

 

var data=[{"gender":"female","height":161.2,"weight":51.6},{"gender":"female","height":167.5,"weight":59},{"gender":"female","height":159.5,"weight":49.2},{"gender":"female","height":157,"weight":63},{"gender":"female","height":155.8,"weight":53.6},{"gender":"female","height":170,"weight":59},{"gender":"female","height":159.1,"weight":47.6},{"gender":"female","height":166,"weight":69.8},{"gender":"female","height":176.2,"weight":66.8},{"gender":"female","height":160.2,"weight":75.2},{"gender":"female","height":172.5,"weight":55.2},{"gender":"female","height":170.9,"weight":54.2},{"gender":"female","height":172.9,"weight":62.5},{"gender":"female","height":153.4,"weight":42},{"gender":"female","height":160,"weight":50},{"gender":"female","height":147.2,"weight":49.8},{"gender":"female","height":168.2,"weight":49.2},{"gender":"female","height":175,"weight":73.2},{"gender":"female","height":157,"weight":47.8},{"gender":"female","height":167.6,"weight":68.8},{"gender":"female","height":159.5,"weight":50.6},{"gender":"female","height":175,"weight":82.5},{"gender":"female","height":166.8,"weight":57.2},{"gender":"female","height":176.5,"weight":87.8},{"gender":"female","height":170.2,"weight":72.8},{"gender":"female","height":174,"weight":54.5},{"gender":"female","height":173,"weight":59.8},{"gender":"female","height":179.9,"weight":67.3},{"gender":"female","height":170.5,"weight":67.8},{"gender":"female","height":160,"weight":47},{"gender":"female","height":154.4,"weight":46.2},{"gender":"female","height":162,"weight":55},{"gender":"female","height":176.5,"weight":83},{"gender":"female","height":160,"weight":54.4},{"gender":"female","height":152,"weight":45.8},{"gender":"female","height":162.1,"weight":53.6},{"gender":"female","height":170,"weight":73.2},{"gender":"female","height":160.2,"weight":52.1},{"gender":"female","height":161.3,"weight":67.9},{"gender":"female","height":166.4,"weight":56.6},{"gender":"female","height":168.9,"weight":62.3},{"gender":"female","height":163.8,"weight":58.5},{"gender":"female","height":167.6,"weight":54.5},{"gender":"female","height":160,"weight":50.2},{"gender":"female","height":161.3,"weight":60.3},{"gender":"female","height":167.6,"weight":58.3},{"gender":"female","height":165.1,"weight":56.2},{"gender":"female","height":160,"weight":50.2},{"gender":"female","height":170,"weight":72.9},{"gender":"female","height":157.5,"weight":59.8},{"gender":"female","height":167.6,"weight":61},{"gender":"female","height":160.7,"weight":69.1},{"gender":"female","height":163.2,"weight":55.9},{"gender":"female","height":152.4,"weight":46.5},{"gender":"female","height":157.5,"weight":54.3},{"gender":"female","height":168.3,"weight":54.8},{"gender":"female","height":180.3,"weight":60.7},{"gender":"female","height":165.5,"weight":60},{"gender":"female","height":165,"weight":62},{"gender":"female","height":164.5,"weight":60.3},{"gender":"female","height":156,"weight":52.7},{"gender":"female","height":160,"weight":74.3},{"gender":"female","height":163,"weight":62},{"gender":"female","height":165.7,"weight":73.1},{"gender":"female","height":161,"weight":80},{"gender":"female","height":162,"weight":54.7},{"gender":"female","height":166,"weight":53.2},{"gender":"female","height":174,"weight":75.7},{"gender":"female","height":172.7,"weight":61.1},{"gender":"female","height":167.6,"weight":55.7},{"gender":"female","height":151.1,"weight":48.7},{"gender":"female","height":164.5,"weight":52.3},{"gender":"female","height":163.5,"weight":50},{"gender":"female","height":152,"weight":59.3},{"gender":"female","height":169,"weight":62.5},{"gender":"female","height":164,"weight":55.7},{"gender":"female","height":161.2,"weight":54.8},{"gender":"female","height":155,"weight":45.9},{"gender":"female","height":170,"weight":70.6},{"gender":"female","height":176.2,"weight":67.2},{"gender":"female","height":170,"weight":69.4},{"gender":"female","height":162.5,"weight":58.2},{"gender":"female","height":170.3,"weight":64.8},{"gender":"female","height":164.1,"weight":71.6},{"gender":"female","height":169.5,"weight":52.8},{"gender":"female","height":163.2,"weight":59.8},{"gender":"female","height":154.5,"weight":49},{"gender":"female","height":159.8,"weight":50},{"gender":"female","height":173.2,"weight":69.2},{"gender":"female","height":170,"weight":55.9},{"gender":"female","height":161.4,"weight":63.4},{"gender":"female","height":169,"weight":58.2},{"gender":"female","height":166.2,"weight":58.6},{"gender":"female","height":159.4,"weight":45.7},{"gender":"female","height":162.5,"weight":52.2},{"gender":"female","height":159,"weight":48.6},{"gender":"female","height":162.8,"weight":57.8},{"gender":"female","height":159,"weight":55.6},{"gender":"female","height":179.8,"weight":66.8},{"gender":"female","height":162.9,"weight":59.4},{"gender":"female","height":161,"weight":53.6},{"gender":"female","height":151.1,"weight":73.2},{"gender":"female","height":168.2,"weight":53.4},{"gender":"female","height":168.9,"weight":69},{"gender":"female","height":173.2,"weight":58.4},{"gender":"female","height":171.8,"weight":56.2},{"gender":"female","height":178,"weight":70.6},{"gender":"female","height":164.3,"weight":59.8},{"gender":"female","height":163,"weight":72},{"gender":"female","height":168.5,"weight":65.2},{"gender":"female","height":166.8,"weight":56.6},{"gender":"female","height":172.7,"weight":105.2},{"gender":"female","height":163.5,"weight":51.8},{"gender":"female","height":169.4,"weight":63.4},{"gender":"female","height":167.8,"weight":59},{"gender":"female","height":159.5,"weight":47.6},{"gender":"female","height":167.6,"weight":63},{"gender":"female","height":161.2,"weight":55.2},{"gender":"female","height":160,"weight":45},{"gender":"female","height":163.2,"weight":54},{"gender":"female","height":162.2,"weight":50.2},{"gender":"female","height":161.3,"weight":60.2},{"gender":"female","height":149.5,"weight":44.8},{"gender":"female","height":157.5,"weight":58.8},{"gender":"female","height":163.2,"weight":56.4},{"gender":"female","height":172.7,"weight":62},{"gender":"female","height":155,"weight":49.2},{"gender":"female","height":156.5,"weight":67.2},{"gender":"female","height":164,"weight":53.8},{"gender":"female","height":160.9,"weight":54.4},{"gender":"female","height":162.8,"weight":58},{"gender":"female","height":167,"weight":59.8},{"gender":"female","height":160,"weight":54.8},{"gender":"female","height":160,"weight":43.2},{"gender":"female","height":168.9,"weight":60.5},{"gender":"female","height":158.2,"weight":46.4},{"gender":"female","height":156,"weight":64.4},{"gender":"female","height":160,"weight":48.8},{"gender":"female","height":167.1,"weight":62.2},{"gender":"female","height":158,"weight":55.5},{"gender":"female","height":167.6,"weight":57.8},{"gender":"female","height":156,"weight":54.6},{"gender":"female","height":162.1,"weight":59.2},{"gender":"female","height":173.4,"weight":52.7},{"gender":"female","height":159.8,"weight":53.2},{"gender":"female","height":170.5,"weight":64.5},{"gender":"female","height":159.2,"weight":51.8},{"gender":"female","height":157.5,"weight":56},{"gender":"female","height":161.3,"weight":63.6},{"gender":"female","height":162.6,"weight":63.2},{"gender":"female","height":160,"weight":59.5},{"gender":"female","height":168.9,"weight":56.8},{"gender":"female","height":165.1,"weight":64.1},{"gender":"female","height":162.6,"weight":50},{"gender":"female","height":165.1,"weight":72.3},{"gender":"female","height":166.4,"weight":55},{"gender":"female","height":160,"weight":55.9},{"gender":"female","height":152.4,"weight":60.4},{"gender":"female","height":170.2,"weight":69.1},{"gender":"female","height":162.6,"weight":84.5},{"gender":"female","height":170.2,"weight":55.9},{"gender":"female","height":158.8,"weight":55.5},{"gender":"female","height":172.7,"weight":69.5},{"gender":"female","height":167.6,"weight":76.4},{"gender":"female","height":162.6,"weight":61.4},{"gender":"female","height":167.6,"weight":65.9},{"gender":"female","height":156.2,"weight":58.6},{"gender":"female","height":175.2,"weight":66.8},{"gender":"female","height":172.1,"weight":56.6},{"gender":"female","height":162.6,"weight":58.6},{"gender":"female","height":160,"weight":55.9},{"gender":"female","height":165.1,"weight":59.1},{"gender":"female","height":182.9,"weight":81.8},{"gender":"female","height":166.4,"weight":70.7},{"gender":"female","height":165.1,"weight":56.8},{"gender":"female","height":177.8,"weight":60},{"gender":"female","height":165.1,"weight":58.2},{"gender":"female","height":175.3,"weight":72.7},{"gender":"female","height":154.9,"weight":54.1},{"gender":"female","height":158.8,"weight":49.1},{"gender":"female","height":172.7,"weight":75.9},{"gender":"female","height":168.9,"weight":55},{"gender":"female","height":161.3,"weight":57.3},{"gender":"female","height":167.6,"weight":55},{"gender":"female","height":165.1,"weight":65.5},{"gender":"female","height":175.3,"weight":65.5},{"gender":"female","height":157.5,"weight":48.6},{"gender":"female","height":163.8,"weight":58.6},{"gender":"female","height":167.6,"weight":63.6},{"gender":"female","height":165.1,"weight":55.2},{"gender":"female","height":165.1,"weight":62.7},{"gender":"female","height":168.9,"weight":56.6},{"gender":"female","height":162.6,"weight":53.9},{"gender":"female","height":164.5,"weight":63.2},{"gender":"female","height":176.5,"weight":73.6},{"gender":"female","height":168.9,"weight":62},{"gender":"female","height":175.3,"weight":63.6},{"gender":"female","height":159.4,"weight":53.2},{"gender":"female","height":160,"weight":53.4},{"gender":"female","height":170.2,"weight":55},{"gender":"female","height":162.6,"weight":70.5},{"gender":"female","height":167.6,"weight":54.5},{"gender":"female","height":162.6,"weight":54.5},{"gender":"female","height":160.7,"weight":55.9},{"gender":"female","height":160,"weight":59},{"gender":"female","height":157.5,"weight":63.6},{"gender":"female","height":162.6,"weight":54.5},{"gender":"female","height":152.4,"weight":47.3},{"gender":"female","height":170.2,"weight":67.7},{"gender":"female","height":165.1,"weight":80.9},{"gender":"female","height":172.7,"weight":70.5},{"gender":"female","height":165.1,"weight":60.9},{"gender":"female","height":170.2,"weight":63.6},{"gender":"female","height":170.2,"weight":54.5},{"gender":"female","height":170.2,"weight":59.1},{"gender":"female","height":161.3,"weight":70.5},{"gender":"female","height":167.6,"weight":52.7},{"gender":"female","height":167.6,"weight":62.7},{"gender":"female","height":165.1,"weight":86.3},{"gender":"female","height":162.6,"weight":66.4},{"gender":"female","height":152.4,"weight":67.3},{"gender":"female","height":168.9,"weight":63},{"gender":"female","height":170.2,"weight":73.6},{"gender":"female","height":175.2,"weight":62.3},{"gender":"female","height":175.2,"weight":57.7},{"gender":"female","height":160,"weight":55.4},{"gender":"female","height":165.1,"weight":104.1},{"gender":"female","height":174,"weight":55.5},{"gender":"female","height":170.2,"weight":77.3},{"gender":"female","height":160,"weight":80.5},{"gender":"female","height":167.6,"weight":64.5},{"gender":"female","height":167.6,"weight":72.3},{"gender":"female","height":167.6,"weight":61.4},{"gender":"female","height":154.9,"weight":58.2},{"gender":"female","height":162.6,"weight":81.8},{"gender":"female","height":175.3,"weight":63.6},{"gender":"female","height":171.4,"weight":53.4},{"gender":"female","height":157.5,"weight":54.5},{"gender":"female","height":165.1,"weight":53.6},{"gender":"female","height":160,"weight":60},{"gender":"female","height":174,"weight":73.6},{"gender":"female","height":162.6,"weight":61.4},{"gender":"female","height":174,"weight":55.5},{"gender":"female","height":162.6,"weight":63.6},{"gender":"female","height":161.3,"weight":60.9},{"gender":"female","height":156.2,"weight":60},{"gender":"female","height":149.9,"weight":46.8},{"gender":"female","height":169.5,"weight":57.3},{"gender":"female","height":160,"weight":64.1},{"gender":"female","height":175.3,"weight":63.6},{"gender":"female","height":169.5,"weight":67.3},{"gender":"female","height":160,"weight":75.5},{"gender":"female","height":172.7,"weight":68.2},{"gender":"female","height":162.6,"weight":61.4},{"gender":"female","height":157.5,"weight":76.8},{"gender":"female","height":176.5,"weight":71.8},{"gender":"female","height":164.4,"weight":55.5},{"gender":"female","height":160.7,"weight":48.6},{"gender":"female","height":174,"weight":66.4},{"gender":"female","height":163.8,"weight":67.3},{"gender":"male","height":174,"weight":65.6},{"gender":"male","height":175.3,"weight":71.8},{"gender":"male","height":193.5,"weight":80.7},{"gender":"male","height":186.5,"weight":72.6},{"gender":"male","height":187.2,"weight":78.8},{"gender":"male","height":181.5,"weight":74.8},{"gender":"male","height":184,"weight":86.4},{"gender":"male","height":184.5,"weight":78.4},{"gender":"male","height":175,"weight":62},{"gender":"male","height":184,"weight":81.6},{"gender":"male","height":180,"weight":76.6},{"gender":"male","height":177.8,"weight":83.6},{"gender":"male","height":192,"weight":90},{"gender":"male","height":176,"weight":74.6},{"gender":"male","height":174,"weight":71},{"gender":"male","height":184,"weight":79.6},{"gender":"male","height":192.7,"weight":93.8},{"gender":"male","height":171.5,"weight":70},{"gender":"male","height":173,"weight":72.4},{"gender":"male","height":176,"weight":85.9},{"gender":"male","height":176,"weight":78.8},{"gender":"male","height":180.5,"weight":77.8},{"gender":"male","height":172.7,"weight":66.2},{"gender":"male","height":176,"weight":86.4},{"gender":"male","height":173.5,"weight":81.8},{"gender":"male","height":178,"weight":89.6},{"gender":"male","height":180.3,"weight":82.8},{"gender":"male","height":180.3,"weight":76.4},{"gender":"male","height":164.5,"weight":63.2},{"gender":"male","height":173,"weight":60.9},{"gender":"male","height":183.5,"weight":74.8},{"gender":"male","height":175.5,"weight":70},{"gender":"male","height":188,"weight":72.4},{"gender":"male","height":189.2,"weight":84.1},{"gender":"male","height":172.8,"weight":69.1},{"gender":"male","height":170,"weight":59.5},{"gender":"male","height":182,"weight":67.2},{"gender":"male","height":170,"weight":61.3},{"gender":"male","height":177.8,"weight":68.6},{"gender":"male","height":184.2,"weight":80.1},{"gender":"male","height":186.7,"weight":87.8},{"gender":"male","height":171.4,"weight":84.7},{"gender":"male","height":172.7,"weight":73.4},{"gender":"male","height":175.3,"weight":72.1},{"gender":"male","height":180.3,"weight":82.6},{"gender":"male","height":182.9,"weight":88.7},{"gender":"male","height":188,"weight":84.1},{"gender":"male","height":177.2,"weight":94.1},{"gender":"male","height":172.1,"weight":74.9},{"gender":"male","height":167,"weight":59.1},{"gender":"male","height":169.5,"weight":75.6},{"gender":"male","height":174,"weight":86.2},{"gender":"male","height":172.7,"weight":75.3},{"gender":"male","height":182.2,"weight":87.1},{"gender":"male","height":164.1,"weight":55.2},{"gender":"male","height":163,"weight":57},{"gender":"male","height":171.5,"weight":61.4},{"gender":"male","height":184.2,"weight":76.8},{"gender":"male","height":174,"weight":86.8},{"gender":"male","height":174,"weight":72.2},{"gender":"male","height":177,"weight":71.6},{"gender":"male","height":186,"weight":84.8},{"gender":"male","height":167,"weight":68.2},{"gender":"male","height":171.8,"weight":66.1},{"gender":"male","height":182,"weight":72},{"gender":"male","height":167,"weight":64.6},{"gender":"male","height":177.8,"weight":74.8},{"gender":"male","height":164.5,"weight":70},{"gender":"male","height":192,"weight":101.6},{"gender":"male","height":175.5,"weight":63.2},{"gender":"male","height":171.2,"weight":79.1},{"gender":"male","height":181.6,"weight":78.9},{"gender":"male","height":167.4,"weight":67.7},{"gender":"male","height":181.1,"weight":66},{"gender":"male","height":177,"weight":68.2},{"gender":"male","height":174.5,"weight":63.9},{"gender":"male","height":177.5,"weight":72},{"gender":"male","height":170.5,"weight":56.8},{"gender":"male","height":182.4,"weight":74.5},{"gender":"male","height":197.1,"weight":90.9},{"gender":"male","height":180.1,"weight":93},{"gender":"male","height":175.5,"weight":80.9},{"gender":"male","height":180.6,"weight":72.7},{"gender":"male","height":184.4,"weight":68},{"gender":"male","height":175.5,"weight":70.9},{"gender":"male","height":180.6,"weight":72.5},{"gender":"male","height":177,"weight":72.5},{"gender":"male","height":177.1,"weight":83.4},{"gender":"male","height":181.6,"weight":75.5},{"gender":"male","height":176.5,"weight":73},{"gender":"male","height":175,"weight":70.2},{"gender":"male","height":174,"weight":73.4},{"gender":"male","height":165.1,"weight":70.5},{"gender":"male","height":177,"weight":68.9},{"gender":"male","height":192,"weight":102.3},{"gender":"male","height":176.5,"weight":68.4},{"gender":"male","height":169.4,"weight":65.9},
        {"gender":"male","height":182.1,"weight":75.7},{"gender":"male","height":179.8,"weight":84.5},{"gender":"male","height":175.3,"weight":87.7},{"gender":"male","height":184.9,"weight":86.4},{"gender":"male","height":177.3,"weight":73.2},{"gender":"male","height":167.4,"weight":53.9},{"gender":"male","height":178.1,"weight":72},{"gender":"male","height":168.9,"weight":55.5},{"gender":"male","height":157.2,"weight":58.4},{"gender":"male","height":180.3,"weight":83.2},{"gender":"male","height":170.2,"weight":72.7},{"gender":"male","height":177.8,"weight":64.1},{"gender":"male","height":172.7,"weight":72.3},{"gender":"male","height":165.1,"weight":65},{"gender":"male","height":186.7,"weight":86.4},{"gender":"male","height":165.1,"weight":65},{"gender":"male","height":174,"weight":88.6},{"gender":"male","height":175.3,"weight":84.1},{"gender":"male","height":185.4,"weight":66.8},{"gender":"male","height":177.8,"weight":75.5},{"gender":"male","height":180.3,"weight":93.2},{"gender":"male","height":180.3,"weight":82.7},{"gender":"male","height":177.8,"weight":58},{"gender":"male","height":177.8,"weight":79.5},{"gender":"male","height":177.8,"weight":78.6},{"gender":"male","height":177.8,"weight":71.8},{"gender":"male","height":177.8,"weight":116.4},{"gender":"male","height":163.8,"weight":72.2},{"gender":"male","height":188,"weight":83.6},{"gender":"male","height":198.1,"weight":85.5},{"gender":"male","height":175.3,"weight":90.9},{"gender":"male","height":166.4,"weight":85.9},{"gender":"male","height":190.5,"weight":89.1},{"gender":"male","height":166.4,"weight":75},{"gender":"male","height":177.8,"weight":77.7},{"gender":"male","height":179.7,"weight":86.4},{"gender":"male","height":172.7,"weight":90.9},{"gender":"male","height":190.5,"weight":73.6},{"gender":"male","height":185.4,"weight":76.4},{"gender":"male","height":168.9,"weight":69.1},{"gender":"male","height":167.6,"weight":84.5},{"gender":"male","height":175.3,"weight":64.5},{"gender":"male","height":170.2,"weight":69.1},{"gender":"male","height":190.5,"weight":108.6},{"gender":"male","height":177.8,"weight":86.4},{"gender":"male","height":190.5,"weight":80.9},{"gender":"male","height":177.8,"weight":87.7},{"gender":"male","height":184.2,"weight":94.5},{"gender":"male","height":176.5,"weight":80.2},{"gender":"male","height":177.8,"weight":72},{"gender":"male","height":180.3,"weight":71.4},{"gender":"male","height":171.4,"weight":72.7},{"gender":"male","height":172.7,"weight":84.1},{"gender":"male","height":172.7,"weight":76.8},{"gender":"male","height":177.8,"weight":63.6},{"gender":"male","height":177.8,"weight":80.9},{"gender":"male","height":182.9,"weight":80.9},{"gender":"male","height":170.2,"weight":85.5},{"gender":"male","height":167.6,"weight":68.6},{"gender":"male","height":175.3,"weight":67.7},{"gender":"male","height":165.1,"weight":66.4},{"gender":"male","height":185.4,"weight":102.3},{"gender":"male","height":181.6,"weight":70.5},{"gender":"male","height":172.7,"weight":95.9},{"gender":"male","height":190.5,"weight":84.1},{"gender":"male","height":179.1,"weight":87.3},{"gender":"male","height":175.3,"weight":71.8},{"gender":"male","height":170.2,"weight":65.9},{"gender":"male","height":193,"weight":95.9},{"gender":"male","height":171.4,"weight":91.4},{"gender":"male","height":177.8,"weight":81.8},{"gender":"male","height":177.8,"weight":96.8},{"gender":"male","height":167.6,"weight":69.1},{"gender":"male","height":167.6,"weight":82.7},{"gender":"male","height":180.3,"weight":75.5},{"gender":"male","height":182.9,"weight":79.5},{"gender":"male","height":176.5,"weight":73.6},{"gender":"male","height":186.7,"weight":91.8},{"gender":"male","height":188,"weight":84.1},{"gender":"male","height":188,"weight":85.9},{"gender":"male","height":177.8,"weight":81.8},{"gender":"male","height":174,"weight":82.5},{"gender":"male","height":177.8,"weight":80.5},{"gender":"male","height":171.4,"weight":70},{"gender":"male","height":185.4,"weight":81.8},{"gender":"male","height":185.4,"weight":84.1},{"gender":"male","height":188,"weight":90.5},{"gender":"male","height":188,"weight":91.4},{"gender":"male","height":182.9,"weight":89.1},{"gender":"male","height":176.5,"weight":85},{"gender":"male","height":175.3,"weight":69.1},{"gender":"male","height":175.3,"weight":73.6},{"gender":"male","height":188,"weight":80.5},{"gender":"male","height":188,"weight":82.7},{"gender":"male","height":175.3,"weight":86.4},{"gender":"male","height":170.5,"weight":67.7},{"gender":"male","height":179.1,"weight":92.7},{"gender":"male","height":177.8,"weight":93.6},{"gender":"male","height":175.3,"weight":70.9},{"gender":"male","height":182.9,"weight":75},{"gender":"male","height":170.8,"weight":93.2},{"gender":"male","height":188,"weight":93.2},{"gender":"male","height":180.3,"weight":77.7},{"gender":"male","height":177.8,"weight":61.4},{"gender":"male","height":185.4,"weight":94.1},{"gender":"male","height":168.9,"weight":75},{"gender":"male","height":185.4,"weight":83.6},{"gender":"male","height":180.3,"weight":85.5},{"gender":"male","height":174,"weight":73.9},{"gender":"male","height":167.6,"weight":66.8},{"gender":"male","height":182.9,"weight":87.3},{"gender":"male","height":160,"weight":72.3},{"gender":"male","height":180.3,"weight":88.6},{"gender":"male","height":167.6,"weight":75.5},{"gender":"male","height":186.7,"weight":101.4},{"gender":"male","height":175.3,"weight":91.1},{"gender":"male","height":175.3,"weight":67.3},{"gender":"male","height":175.9,"weight":77.7},{"gender":"male","height":175.3,"weight":81.8},{"gender":"male","height":179.1,"weight":75.5},{"gender":"male","height":181.6,"weight":84.5},{"gender":"male","height":177.8,"weight":76.6},{"gender":"male","height":182.9,"weight":85},{"gender":"male","height":177.8,"weight":102.5},{"gender":"male","height":184.2,"weight":77.3},{"gender":"male","height":179.1,"weight":71.8},{"gender":"male","height":176.5,"weight":87.9},{"gender":"male","height":188,"weight":94.3},{"gender":"male","height":174,"weight":70.9},{"gender":"male","height":167.6,"weight":64.5},{"gender":"male","height":170.2,"weight":77.3},{"gender":"male","height":167.6,"weight":72.3},{"gender":"male","height":188,"weight":87.3},{"gender":"male","height":174,"weight":80},{"gender":"male","height":176.5,"weight":82.3},{"gender":"male","height":180.3,"weight":73.6},{"gender":"male","height":167.6,"weight":74.1},{"gender":"male","height":188,"weight":85.9},{"gender":"male","height":180.3,"weight":73.2},{"gender":"male","height":167.6,"weight":76.3},
        {"gender":"male","height":183,"weight":65.9},{"gender":"male","height":183,"weight":90.9},{"gender":"male","height":179.1,"weight":89.1},{"gender":"male","height":170.2,"weight":62.3},{"gender":"male","height":177.8,"weight":82.7},{"gender":"male","height":179.1,"weight":79.1},{"gender":"male","height":190.5,"weight":98.2},{"gender":"male","height":177.8,"weight":84.1},{"gender":"male","height":180.3,"weight":83.2},{"gender":"male","height":180.3,"weight":83.2}]
        var axisData = [];

        for (var i = 0; i < data.length; i++) {
            var height = data[i].height;
            var weight = data[i].weight;
            var itemArr = [height, weight];
            axisData.push(itemArr);
        }
        console.log(axisData)
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {
            title:{
                text:'',
                x:'center',
                textStyle:{
                    color:'red'
                }
            },
            legend:{},
            tooltip:{
                show:true,
                trigger:'axis',
                axisPointer:{
                    type:'shadow',
                    lineStyle:{
                        color:'#le90ff',width:2,type:'solid',
                    },
                },
                backgroundColor:'rgba(0,222,0,0.5)',
                borderColor:'blue',
                borderRadius:8,
                borderWidth:2,
                padding:10,
                // textStyle:{
                //     color:'blue',decoration:'none',fontFamily:'sans-serif',
                //     fontSize:5,fontStyle:'normal',fontWeight:'bold'
                // }
            },
            toolbox:{
                show:true,
                orient:'horizontal',
                x:'right',y:'top',
                color:['#le90ff','#22bb22','4b0082','#d2691e'],
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar','scatter']},
                    restore:{show:true},
                    saveAsImage:{show:true},
                    dataZoom:{
                        show:true,
                        title:{dataZoom:'区域缩放',dataZoomReset:'区域缩放后退'}
                    }
                }
            },
            xAxis: {
                type: "value",
                scale:true,
            },
            yAxis: {
                type: "value",
                scale:true,
            },
            series: [
                {
                    type:'effectScatter',
                    showEffectOn:'emphasis',//render自动拥有涟漪效果 emphasis鼠标滑动过产生
                    rippleEffect:{
                        scale:5,
                    },
                    data: axisData,
                    symbolSize:function(arg) {
                        console.log(arg)
                        var height = arg[0] /100  //因为厘米所以处理100
                        var weight = arg[1]
                        // bmi = 体重kg /(身高m*身高m)大于28肥胖
                        var bmi = weight / (height*height)
                        if(bmi >28){
                            return 20
                        }
                        return 5
                    },
                    itemStyle:{
                        //color:'red'
                        color:function(arg){
                            //console.log(arg)
                            var height = arg.data[0] /100  //因为厘米所以处理100
                            var weight = arg.data[1]
                            // bmi = 体重kg /(身高m*身高m)大于28肥胖
                            var bmi = weight / (height*height)
                            if(bmi >28){
                                return 'red'
                            }
                            return 'pink'
                        }
                    }

                },
                ],
            };

 

 

散点图能直观表现出影响因素和预测对象之间的总体关系趋势

涟漪效果设置需要把type改成effectScatter,就可以实现用rippleEffect控制涟漪的大小

标签:167.6,female,weight,gender,配置,散点图,height,详细,male
来源: https://www.cnblogs.com/lixianhui/p/16289910.html