| DIR:/home/drsekaran/www/admin/vendors/echarts/test/ |
| Current File : /home/drsekaran/www/admin/vendors/echarts/test/scatter.html |
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/toolbox'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
}
for (var i = 0; i < 30; i++) {
data1.push([random(5), random(5), random(2)]);
data2.push([random(10), random(10), random(2)]);
data3.push([random(15), random(10), random(2)]);
}
chart.setOption({
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
toolbox: {
left: 'left',
feature: {
dataView: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
min: 0,
max: 15,
splitNumber: 30
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [{
name: 'scatter',
type: 'scatter',
label: {
emphasis: {
show: true
}
},
// symbol: 'diamond',
symbolSize: function (val) {
return val[2] * 40;
},
// itemStyle: {
// normal: {
// color: function (params) {
// return 'rgba(30, 70, 50, ' + params.value[2] + ')';
// }
// }
// },
data: data1
}, {
name: 'scatter2',
type: 'scatter',
label: {
emphasis: {
show: true,
position: 'top',
formatter: function (params) {
return params.value;
}
}
},
symbolSize: function (val) {
return val[2] * 40;
},
// itemStyle: {
// normal: {
// label: {
// show: true
// }
// }
// },
data: data2
}, {
name: 'scatter3',
type: 'scatter',
label: {
emphasis: {
show: true
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}],
animationDelay: function (idx) {
return idx * 20;
},
animationDelayUpdate: function (idx) {
return idx * 20;
}
});
chart.on('click', function (params) {
console.log(params.data);
});
})
</script>
</body>
</html> |