var data1 = []; var data2 = []; var data3 = []; 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)]); data2.push([random(10), random(10), random(1)]); data3.push([random(15), random(10), random(1)]); } option = { animation: false, legend: { data: ['scatter', 'scatter2', 'scatter3'] }, tooltip: {}, xAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, yAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, //dataZoom 组件是对数轴(axis) 进行 数据窗口缩放 和 数据窗口平移 操作。 //dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同,效果也不同 //dataZoom 的数据窗口范围的设置,目前支持两种形式:百分比形式:参见 dataZoom.start 和 dataZoom.end。绝对数值形式:参见 dataZoom.startValue 和 dataZoom.endValue。 // 这个dataZoom组件,默认控制x轴。 dataZoom: [ { // 这个 dataZoom 组件是 slider 型 dataZoom 组件 type: 'slider', show: true, xAxisIndex: [0], start: 1, // 左边在 1% 的位置。 end: 35,// 右边在 35% 的位置。 }, { type: 'slider', show: true, yAxisIndex: [0], left: '93%', start: 29, end: 36 }, { type: 'inside',// 这个 dataZoom 组件是 inside 型 dataZoom 组件 xAxisIndex: [0], start: 1, // 左边在 1% 的位置。 end: 35// 右边在 35% 的位置。 }, { type: 'inside', yAxisIndex: [0], start: 29, end: 36 }, ], series: [ { name: 'scatter', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data1 }, { name: 'scatter2', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data2 }, { name: 'scatter3', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data3 } ] };