散点图的详细配置
作者：互联网
基本散点图
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