普通散点图：
注意x轴y轴的类型都是value。且在设置tooltip时也要注意写法：
option = { title : { text: '男性女性身高体重分布', subtext: '抽样调查来自: Heinz 2003' }, tooltip : { trigger: 'axis', showDelay : 0, axisPointer:{ //坐标轴指示器，坐标轴触发有效，默认type为line，可选为：'line' | 'cross' | 'shadow' | type : 'cross', lineStyle: { type : 'dashed', width : 1 } }, formatter : function (value) { if (value[2].length > 1) { return value[0] + ' :<br/>' + value[2][0] + 'cm ' + value[2][1] + 'kg '; } else { return value[0] + ' :<br/>' + value[1] + ' : ' + value[2] + 'kg '; } } }, legend: { data:['女性','男性'] }, toolbox: { show : true, feature : { mark : {show: true}, dataZoom : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'value', power: 1 ,//整数精度，默认为100，个位和百位为0 precision: 2, //小数精度 scale:true, //脱离0值比例，放大聚焦到最终_min，_max区间 axisLabel : { formatter: '{value} cm' } } ], yAxis : [ { type : 'value', power: 1, precision: 2, scale:true, axisLabel : { formatter: '{value} kg' } } ], series : [ { name:'女性', type:'scatter', data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],[163.8, 67.3] //详细见例子 ], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'男性', type:'scatter', data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8] //详细见例子 ], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ] };
标准气泡图，注意在series中需要加symbolisize：
| {number | Function} symbolSize | 2 | 4 | 折线图 (2)，散点图(4) | 标志图形大小，可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function，气泡大小取决于该方法返回值，传入参数为当前数据项（value数组） |
function random(){ var r = Math.round(Math.random() * 100); //随机生成了半径 return (r * (r % 2 == 0 ? 1 : -1)); } function randomDataArray() { var d = []; var len = 100; while (len--) { d.push([ random(), random(), Math.abs(random()), ]); } return d; } option = { tooltip : { trigger: 'axis', showDelay : 0, axisPointer:{ type : 'cross', lineStyle: { type : 'dashed', width : 1 } } }, legend: { data:['scatter1','scatter2'] }, toolbox: { show : true, feature : { mark : {show: true}, dataZoom : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'value', power: 1, splitNumber: 4, //分割段数，默认为5 scale: true } ], yAxis : [ { type : 'value', power: 1, splitNumber: 4, scale: true } ], series : [ { name:'scatter1', type:'scatter', symbolSize: function (value){ return Math.round(value[2] / 5); //标志图形大小，可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function，气泡大小取决于该方法返回值，传入参数为当前数据项（value数组） }, data: randomDataArray() }, { name:'scatter2', type:'scatter', symbolSize: function (value){ return Math.round(value[2] / 5); }, data: randomDataArray() } ] };
类目坐标散点图：增加了一个datazoom和一个datarange，
把x轴变为了类目，y轴变为了值属性
option = { title : { text : '类目坐标散点图', subtext : 'dataZoom支持' }, tooltip : { trigger: 'item', formatter : function (value) { return value[0] + ' （' + '类目' + value[2][0] + '）<br/>' + value[2][1] + ', ' + value[2][2]; } }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom: { //数据区域缩放 show: true, start : 30, end : 70 }, legend : { data : ['series1', 'series2'] }, dataRange: { //值域选择，每个图表最多仅有一个值域控件 min: 0, max: 100, orient: 'horizontal', //布局方式，默认为垂直布局，可选为：'horizontal' | 'vertical' y: 30, x: 'center', //text:['高','低'], // 文本，默认为数值文本 color:['lightgreen','orange'], splitNumber: 5 }, xAxis : [ { type : 'category', axisLabel: { formatter : function(v) { return '类目' + v } }, data : function (){ var list = []; var len = 0; while (len++ < 500) { list.push(len); } return list; }() } ], yAxis : [ { type : 'value' } ], animation: false, series : [ { name:'series1', type:'scatter', symbolSize: function (value){ return Math.round(value[2]/10); }, data: (function () { var d = []; var len = 0; var value; while (len++ < 500) { d.push([ len, (Math.random()*30).toFixed(2) - 0, (Math.random()*100).toFixed(2) - 0 ]); } return d; })() }, { name:'series2', type:'scatter', symbolSize: function (value){ return Math.round(value[2]/10); }, data: (function () { var d = []; var len = 0; var value; while (len++ < 500) { d.push([ len, (Math.random()*30).toFixed(2) - 0, (Math.random()*100).toFixed(2) - 0 ]); } return d; })() } ] };
