| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <div id="main0"></div> | |
| <div id="main-align"></div> | |
| <div id="main-overlapping"></div> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| for (var i = 0; i < 10; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push(+Math.random().toFixed(2)); | |
| data2.push(+Math.random().toFixed(2)); | |
| } | |
| option = { | |
| legend: { | |
| data: ['line', 'line2'] | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData | |
| }, | |
| yAxis: { | |
| max: 5 | |
| }, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbolSize: 6, | |
| data: data1, | |
| markArea: { | |
| itemStyle: { | |
| // normal: { | |
| // color: 'red' | |
| // }, | |
| emphasis: { | |
| color: 'yellow' | |
| } | |
| }, | |
| label: { | |
| normal: { | |
| // position: 'right' | |
| } | |
| }, | |
| data: [ | |
| [{ | |
| name: 'x 3 - 5', | |
| xAxis: 3 | |
| }, { | |
| xAxis: 5 | |
| }] | |
| ] | |
| } | |
| }, { | |
| name: 'line2', | |
| type: 'line', | |
| stack: 'all', | |
| symbolSize: 6, | |
| data: data2, | |
| markArea: { | |
| label: { | |
| normal: { | |
| position: 'right' | |
| } | |
| }, | |
| data: [ | |
| [{ | |
| name: 'y 0.5 - 0.7', | |
| yAxis: 0.5 | |
| }, { | |
| yAxis: 0.7 | |
| }], | |
| [{ | |
| name: 'This text should not be displayed\nwhen out of range', | |
| yAxis: 3 | |
| }, { | |
| yAxis: 3.5 | |
| }] | |
| ] | |
| } | |
| }], | |
| dataZoom: { | |
| yAxisIndex: 0, | |
| startValue: 0, | |
| endValue: 2, | |
| right: 250 | |
| }, | |
| grid: { | |
| right: 300 | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main0', { | |
| option: option, | |
| title: 'MarkArea with grid filter' | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| option = { | |
| xAxis: { | |
| type: 'category', | |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |
| axisTick: { | |
| alignWithLabel: true | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value' | |
| }, | |
| series: [ | |
| { | |
| data: [150, 230, 224, 218, 135, 147, 260], | |
| type: 'bar', | |
| markArea: { | |
| data: [ | |
| [ | |
| { | |
| xAxis: 'Tue' | |
| }, | |
| { | |
| xAxis: 'Fri' | |
| } | |
| ] | |
| ] | |
| } | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main-align', { | |
| option: option, | |
| title: ['MarkArea with alignWithLabel', 'MarkArea should be Tue ~ Fri'] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| option = { | |
| xAxis: { | |
| type: 'category', | |
| data: Array.from(Array(2017).keys()) | |
| }, | |
| yAxis: { type: 'value', show: true, max: 100 }, | |
| series: [ | |
| { | |
| type: 'bar', | |
| data: [ | |
| [65, 100, 0], | |
| [130, 100, 1], | |
| [196, 100, 2], | |
| [260, 100, 3], | |
| [325, 100, 4], | |
| [391, 100, 5], | |
| [456, 100, 6], | |
| [522, 100, 7], | |
| [1117, 100, 8], | |
| [1189, 100, 9], | |
| [1254, 100, 10], | |
| [1319, 100, 11], | |
| [1420, 100, 12], | |
| [1485, 100, 13], | |
| [1551, 100, 14], | |
| [1616, 100, 15], | |
| [1750, 100, 16], | |
| [1817, 100, 17], | |
| [1882, 100, 18], | |
| [1947, 100, 19], | |
| [2014, 100, 20], | |
| [2081, 100, 21], | |
| [2147, 100, 22] | |
| ], | |
| barGap: 0, | |
| zlevel: 1, | |
| barWidth: 1, //10, | |
| itemStyle: { | |
| color: 'red', | |
| opacity: 0.5 | |
| }, | |
| emphasis: { | |
| itemStyle: { | |
| color: '#ffb703', | |
| opacity: 1, | |
| borderWidth: 2, | |
| borderColor: '#fee440' | |
| } | |
| }, | |
| markArea: { | |
| emphasis: { | |
| itemStyle: { | |
| color: '#48cae4', | |
| opacity: 0.5 | |
| } | |
| }, | |
| zlevel: 10, | |
| itemStyle: { | |
| //opacity: 0 | |
| }, | |
| data: [ | |
| [ | |
| { | |
| xAxis: '65' | |
| }, | |
| { | |
| xAxis: '130' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '130' | |
| }, | |
| { | |
| xAxis: '196' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '196' | |
| }, | |
| { | |
| xAxis: '260' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '260' | |
| }, | |
| { | |
| xAxis: '325' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '325' | |
| }, | |
| { | |
| xAxis: '391' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '391' | |
| }, | |
| { | |
| xAxis: '456' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '456' | |
| }, | |
| { | |
| xAxis: '522' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '522' | |
| }, | |
| { | |
| xAxis: '1117' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1117' | |
| }, | |
| { | |
| xAxis: '1189' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1189' | |
| }, | |
| { | |
| xAxis: '1254' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1254' | |
| }, | |
| { | |
| xAxis: '1319' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1319' | |
| }, | |
| { | |
| xAxis: '1420' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1420' | |
| }, | |
| { | |
| xAxis: '1485' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1485' | |
| }, | |
| { | |
| xAxis: '1551' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1551' | |
| }, | |
| { | |
| xAxis: '1616' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1616' | |
| }, | |
| { | |
| xAxis: '1750' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1750' | |
| }, | |
| { | |
| xAxis: '1817' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1817' | |
| }, | |
| { | |
| xAxis: '1882' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1882' | |
| }, | |
| { | |
| xAxis: '1947' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '1947' | |
| }, | |
| { | |
| xAxis: '2014' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '2014' | |
| }, | |
| { | |
| xAxis: '2081' | |
| } | |
| ], | |
| [ | |
| { | |
| xAxis: '2081' | |
| }, | |
| { | |
| xAxis: '2147' | |
| } | |
| ] | |
| ] | |
| } | |
| } | |
| ], | |
| dataZoom: { endValue: 912 } | |
| }; | |
| var chart = testHelper.create(echarts, 'main-overlapping', { | |
| option: option, | |
| title: [ | |
| 'MarkArea when some ticks are overlapping', | |
| 'There should be **no overlapping around 456**', | |
| 'This test case should be fixed in the future.' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| title: { | |
| text: 'Distribution of Electricity', | |
| subtext: 'Fake Data' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'cross' | |
| } | |
| }, | |
| toolbox: { | |
| show: true, | |
| feature: { | |
| saveAsImage: {} | |
| } | |
| }, | |
| dataZoom: [{}], // WITH ZOOMING | |
| xAxis: { | |
| type: 'category', | |
| boundaryGap: false, | |
| // prettier-ignore | |
| data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'] | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisLabel: { | |
| formatter: '{value} W' | |
| }, | |
| axisPointer: { | |
| snap: true | |
| }, | |
| }, | |
| series: [ | |
| { | |
| name: 'Electricity', | |
| type: 'line', | |
| smooth: true, | |
| // prettier-ignore | |
| data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400], | |
| markArea: { | |
| itemStyle: { | |
| color: 'rgba(255, 173, 177, 0.4)' | |
| }, | |
| data: [ | |
| [ | |
| { | |
| name: 'Morning Peak', | |
| xAxis: '07:30', | |
| yAxis: -100 | |
| }, | |
| { | |
| xAxis: '10:00', | |
| yAxis: 900 // EXACT LIMIT HERE | |
| } | |
| ], | |
| [ | |
| { | |
| name: 'Evening Peak', | |
| xAxis: '17:30' | |
| }, | |
| { | |
| xAxis: '21:15' | |
| } | |
| ], | |
| [ | |
| {yAxis: 200}, {yAxis: 600, xAxis: '22:30'}, // EXACT LIMIT HERE | |
| ] | |
| ] | |
| } | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option = { | |
| xAxis: { | |
| type: 'category', | |
| data: ['a', 'b', 'c', 'd', 'e', 'f', 'g'] | |
| }, | |
| yAxis: { | |
| type: 'value' | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| data: [10, 52, 200, 334, 390, 330, 220], | |
| itemStyle: { | |
| opacity: .1 | |
| }, | |
| markArea: { | |
| data: [ | |
| [ | |
| { | |
| name: '所有数据范围区间', | |
| coord: ['min', 'min'], | |
| itemStyle: { | |
| color: 'lightgray', | |
| borderWidth: 2, | |
| borderColor: 'gray' | |
| }, | |
| label: { | |
| position: 'insideLeft', | |
| } | |
| }, | |
| { | |
| coord: ['max', 'max'] | |
| } | |
| ], | |
| [ | |
| { | |
| name: '[average, min] to [max, median]', | |
| coord: ['average', 'min'], | |
| itemStyle: { | |
| color: '#14c4ba', | |
| opacity: .5 | |
| } | |
| }, | |
| { | |
| coord: ['max', 'median'] | |
| } | |
| ], | |
| [ | |
| { | |
| name: '平均值到最大值', | |
| type: 'average', | |
| itemStyle: { | |
| color: 'lightblue', | |
| borderWidth: 2, | |
| borderColor: 'lightblue' | |
| } | |
| }, | |
| { | |
| type: 'max' | |
| } | |
| ], | |
| [ | |
| { | |
| name: '两个坐标之间的标域', | |
| coord: [1, 20] | |
| }, | |
| { | |
| coord: ['c', 30] | |
| } | |
| ], | |
| [ | |
| { | |
| name: 'yAxis 120~130', | |
| yAxis: 120 | |
| }, | |
| { | |
| yAxis: 130 | |
| } | |
| ], | |
| [ | |
| { | |
| name: '两个屏幕坐标之间的标域 px', | |
| x: 80, | |
| y: 50, | |
| itemStyle: { | |
| color: 'lightgreen' | |
| } | |
| }, | |
| { | |
| x: 100, | |
| y: 100 | |
| } | |
| ], | |
| [ | |
| { | |
| name: '两个屏幕坐标之间的标域 px & %', | |
| x: 100, | |
| y: '20%' | |
| }, | |
| { | |
| x: '90%', | |
| y: '30%' | |
| } | |
| ] | |
| ] | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2', { | |
| title: [ | |
| '**两个屏幕坐标之间的标域** should be displayed', | |
| '**所有数据范围区间** should be displayed', | |
| 'Other mark areas should also be displayed', | |
| 'should have no errors in the console' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |