1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <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%;
- }
- body {
- margin: 0;
- }
- </style>
- <div id="main"></div>
- <script>
- require([
- 'echarts',
- 'echarts/chart/line',
- 'echarts/component/legend',
- 'echarts/component/grid',
- 'echarts/component/axis',
- 'echarts/component/dataZoom',
- 'echarts/component/tooltip',
- 'echarts/component/markPoint',
- 'echarts/component/markLine'
- ], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
- renderer: 'canvas'
- });
- var data1dim = [];
- for (var i = 0; i < 2000; i++) {
- data1dim.push([i * Math.cos(i / 100), i * Math.sin(i / 100)]);
- }
- chart.setOption({
- animation: false,
- legend: {
- data: ['line', 'line2', 'line3']
- },
- tooltip: {
- },
- xAxis: {
- // position: 'top',
- type: 'value',
- // data: xAxisData,
- // boundaryGap: false
- },
- yAxis: {
- type: 'value',
- // inverse: true
- // data: xAxisData
- },
- series: [
- {
- name: 'line2',
- type: 'line',
- stack: 'all',
- symbol: 'none',
- data: data1dim
- // itemStyle: {
- // normal: {
- // areaStyle: {}
- // }
- // }
- }
- ],
- dataZoom: [
- {
- show: true,
- start: 60,
- filterMode: 'empty'
- },
- {
- show: true,
- orient: 'vertical',
- filterMode: 'empty'
- }
- ]
- });
- })
- </script>
- </body>
- </html>
|