| <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> |
