slides/arch-brief/asset/ec-demo/different-axis-scale.html (101 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<script src="../common/jquery.min.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
</style>
<div id="main"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var xAxisData = [
'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra',
'Scorpio', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'
];
var data0 = [];
var data1 = [];
var data2 = [];
var data3 = [];
function random() {
return Math.random();
}
function round(val) {
return +(val.toFixed(3));
}
for (var i = 0; i < xAxisData.length; i++) {
data0.push([round(random() * 100), round(random() * 30)]);
data1.push(round(random() * 30));
data2.push([round(random() * (i % 2 === 0 ? 100 : 1000000)), round(random() * 30)]);
data3.push([+new Date() + Math.round(random() * 3600 * 24 * 30), round(random() * 30)]);
}
var height = '16%';
myChart.setOption({
backgroundColor: '#fff',
tooltip: {
trigger: 'axis'
},
singleAxis: [{
type: 'value',
id: 'a',
height: height
}, {
type: 'category',
id: 'b',
data: xAxisData,
height: height,
top: '27%'
}, {
type: 'log',
id: 'c',
height: height,
top: '53%'
}, {
type: 'time',
id: 'd',
height: height,
top: '75%'
}],
series: [{
type: 'scatter',
name: 'data',
coordinateSystem: 'singleAxis',
singleAxisId: 'a',
symbolSize: function (val) {
return val[1];
},
data: data0
}, {
type: 'scatter',
name: 'data',
coordinateSystem: 'singleAxis',
singleAxisId: 'b',
symbolSize: function (val) {
return val;
},
data: data1
}, {
type: 'scatter',
name: 'data',
coordinateSystem: 'singleAxis',
singleAxisId: 'c',
symbolSize: function (val) {
return val[1];
},
data: data2
}, {
type: 'scatter',
name: 'data',
coordinateSystem: 'singleAxis',
singleAxisId: 'd',
symbolSize: function (val) {
return val[1];
},
data: data3
}]
});
</script>
</body>
</html>