123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <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/visualMapPiecewise'
- ], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
- renderer: 'canvas'
- });
- var data1 = [];
- var data2 = [];
- for (var i = 0; i < 5; i++) {
- data1.push([
- i * 5, i * 4, i * 20,
- Math.random() * 10
- ]);
- data2.push([
- i * 5, 30, (Math.random() - 0.5) * 100
- ])
- }
- chart.setOption({
- grid: {
- top: '26%',
- bottom: '26%'
- },
- xAxis: {
- type: 'value',
- splitLine: {
- show: false
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: false
- }
- },
- visualMap: [
- {
- show: true,
- splitNumber: 7,
- selectedMode: 'multiple',
- backgroundColor: '#eee',
- dimension: 3,
- seriesIndex: 0,
- max: 10,
- color: ['red', 'pink', 'black']
- },
- {
- right: 0,
- splitNumber: 3,
- max: 10,
- selectedMode: 'multiple',
- dimension: 3,
- seriesIndex: 0,
- backgroundColor: '#eee',
- inRange: {
- symbol: ['rect', 'line', 'path://M 100 100 L 300 100 L 200 300 z']
- }
- },
- {
- left: 'center',
- min: -50,
- max: 50,
- dimension: 2,
- seriesIndex: 1,
- backgroundColor: '#eee',
- pieces: [
- {
- lt: 0,
- color: 'red',
- symbol: 'path://M 100 100 L 300 100 L 200 300 z'
- },
- {
- gte: 0,
- color: 'green',
- symbol: 'rect'
- }
- ]
- }
- ],
- series: [
- {
- name: 'scatter',
- type: 'scatter',
- symbolSize: 40,
- data: data1
- },
- {
- type: 'scatter',
- symbolSize: 60,
- data: data2
- }
- ]
- });
- })
- </script>
- </body>
- </html>
|