You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2019/10/18 06:57:21 UTC
[incubator-echarts] 01/01: style: fix formatting style of #11186
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-11186
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit ad08e1a6f5e91b7a9db97c72d97196c2e72d489f
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Oct 18 14:55:29 2019 +0800
style: fix formatting style of #11186
---
src/coord/Axis.js | 14 +-
test/axis-interval.html | 629 ++++++++++++++++++++++++------------------------
2 files changed, 324 insertions(+), 319 deletions(-)
diff --git a/src/coord/Axis.js b/src/coord/Axis.js
index 1257cc5..50e3f4a 100644
--- a/src/coord/Axis.js
+++ b/src/coord/Axis.js
@@ -199,9 +199,9 @@ Axis.prototype = {
var alignWithLabel = tickModel.get('alignWithLabel');
var dataExtent = this.scale.getExtent();
var tickLen = this.scale.getTicks().length + dataExtent[0];
-
+
fixOnBandTicksCoords(
- this, ticksCoords, result.tickCategoryInterval, alignWithLabel, opt.clamp,tickLen
+ this, ticksCoords, result.tickCategoryInterval, alignWithLabel, opt.clamp, tickLen
);
return ticksCoords;
@@ -294,7 +294,7 @@ function fixExtentWithBands(extent, nTick) {
// splitLine/spliteArea should layout appropriately corresponding
// to displayed labels. (So we should not use `getBandWidth` in this
// case).
-function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWithLabel, clamp,tickLen) {
+function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWithLabel, clamp, tickLen) {
var ticksLen = ticksCoords.length;
if (!axis.onBand || alignWithLabel || !ticksLen) {
@@ -310,8 +310,8 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
}
else {
- var crossLen = ticksCoords[ticksLen-1].tickValue - ticksCoords[0].tickValue;
- var shift = (ticksCoords[ticksLen-1].coord - ticksCoords[0].coord) / crossLen;
+ var crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
+ var shift = (ticksCoords[ticksLen - 1].coord - ticksCoords[0].coord) / crossLen;
each(ticksCoords, function (ticksItem) {
ticksItem.coord -= shift / 2;
@@ -323,8 +323,8 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
});
diffSize = tickLen - ticksCoords[ticksLen - 1].tickValue;
-
- last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize};
+
+ last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize};
ticksCoords.push(last);
}
diff --git a/test/axis-interval.html b/test/axis-interval.html
index 8050f32..11864ca 100644
--- a/test/axis-interval.html
+++ b/test/axis-interval.html
@@ -20,105 +20,109 @@ under the License.
<html>
- <head>
- <meta charset="utf-8">
- <script src="lib/esl.js"></script>
- <script src="lib/config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- <script src="lib/testHelper.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="lib/reset.css">
- </head>
- <body>
- <style>
- h1 {
- line-height: 60px;
- height: 60px;
- background: #a60;
- text-align: center;
- font-weight: bold;
- color: #eee;
- font-size: 14px;
- }
- .chart {
- height: 500px;
- }
- </style>
- <div class="chart" id="mainA"></div>
+<head>
+ <meta charset="utf-8">
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="lib/reset.css">
+</head>
+
+<body>
+ <style>
+ h1 {
+ line-height: 60px;
+ height: 60px;
+ background: #a60;
+ text-align: center;
+ font-weight: bold;
+ color: #eee;
+ font-size: 14px;
+ }
- <h1>[ Test minInterval ] yAxis: {minInterval: 1, min: 0}, series.data: [1]</h1>
- <div class="chart" id="main0"></div>
- <h1>[ Test category axis interval ] interval of xAxis should be approperiate after rotated.</h1>
- <div class="chart" id="main1"></div>
- <h1>[ Test time axis interval ] should not overlap when data zoom.</h1>
- <div class="chart" id="main2"></div>
- <h1>[ Test xAxis.axisTick.interval ] let list = [true, false, true, true];axisTick.interval = function(index){return list[index]} </h1>
- <div class="chart" id="main3"></div>
+ .chart {
+ height: 500px;
+ }
+ </style>
+ <div class="chart" id="mainA"></div>
+ <h1>[ Test minInterval ] yAxis: {minInterval: 1, min: 0}, series.data: [1]</h1>
+ <div class="chart" id="main0"></div>
+ <h1>[ Test category axis interval ] interval of xAxis should be approperiate after rotated.</h1>
+ <div class="chart" id="main1"></div>
+ <h1>[ Test time axis interval ] should not overlap when data zoom.</h1>
+ <div class="chart" id="main2"></div>
+ <h1>[ Test xAxis.axisTick.interval ] var list = [true, false, true, true];axisTick.interval =
+ function(index){return list[index]} </h1>
+ <div class="chart" id="main3"></div>
- <script>
- require([
- 'echarts'
- ], function (echarts) {
- var dataCount = 200;
- var data = [];
- var d = +new Date(2015, 3, 13);
- var oneDay = 3600 * 1000;
- for (var i = 0; i < dataCount; i++) {
- data.push([d, Math.random()]);
- d += 2.5 * oneDay;
- }
+ <script>
- var startValue = '2015-04-24T04:21';
- var endValue = '2015-04-24T10:12';
+ require([
+ 'echarts'
+ ], function (echarts) {
- var option = {
- tooltip: {
- trigger: 'axis'
- },
- dataZoom: [{
- startValue: startValue,
- endValue: endValue
- }, {
- type: 'inside',
- startValue: startValue,
- endValue: endValue
- }],
- grid: {
- left: '3%',
- right: '4%',
- bottom: 60,
- containLabel: true
- },
- xAxis: {
- type: 'time',
- minInterval: 3600 * 1000,
- maxInterval: 3600 * 1000
- // splitNumber: 7
- },
- yAxis: {},
- series: [
- {
- type:'line',
- data: data
- }
- ]
- };
+ var dataCount = 200;
+ var data = [];
+ var d = +new Date(2015, 3, 13);
+ var oneDay = 3600 * 1000;
+ for (var i = 0; i < dataCount; i++) {
+ data.push([d, Math.random()]);
+ d += 2.5 * oneDay;
+ }
- testHelper.create(echarts, 'mainA', {
- title: 'xAxis (type: time) should always be 1 hour interval',
- option: option
- });
+ var startValue = '2015-04-24T04:21';
+ var endValue = '2015-04-24T10:12';
+
+ var option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: [{
+ startValue: startValue,
+ endValue: endValue
+ }, {
+ type: 'inside',
+ startValue: startValue,
+ endValue: endValue
+ }],
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: 60,
+ containLabel: true
+ },
+ xAxis: {
+ type: 'time',
+ minInterval: 3600 * 1000,
+ maxInterval: 3600 * 1000
+ // splitNumber: 7
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'line',
+ data: data
+ }
+ ]
+ };
+
+ testHelper.create(echarts, 'mainA', {
+ title: 'xAxis (type: time) should always be 1 hour interval',
+ option: option
});
+ });
- </script>
+ </script>
@@ -126,49 +130,49 @@ under the License.
- <script>
+ <script>
- require([
- 'echarts'
- ], function (echarts) {
+ require([
+ 'echarts'
+ ], function (echarts) {
- option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- }
- ],
- yAxis: [
- {
- type: 'value',
- scale: true,
- min: 0,
- minInterval: 1
- }
- ],
- series: [
- {
- type:'line',
- data: [1]
- }
- ]
- };
+ option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ scale: true,
+ min: 0,
+ minInterval: 1
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ data: [1]
+ }
+ ]
+ };
- testHelper.createChart(echarts, 'main0', option);
- });
+ testHelper.createChart(echarts, 'main0', option);
+ });
- </script>
+ </script>
@@ -181,96 +185,96 @@ under the License.
- <script>
- require([
- 'echarts'
- ], function (echarts) {
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
- var categoryData = [];
- var data = [];
- var rotate = 20;
+ var categoryData = [];
+ var data = [];
+ var rotate = 20;
- for (var i = 0; i < 100; i++) {
- categoryData.push(i + 'longlonglong');
- data.push(Math.random() * 1000000);
- }
+ for (var i = 0; i < 100; i++) {
+ categoryData.push(i + 'longlonglong');
+ data.push(Math.random() * 1000000);
+ }
- option = {
- title: {
- },
- tooltip: {
- trigger: 'axis'
+ option = {
+ title: {
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: [{
+ height: 50
+ }, {
+ top: 220,
+ height: 300
+ }],
+ xAxis: [{
+ id: 'category',
+ type: 'category',
+ boundaryGap: false,
+ data: categoryData,
+ axisLabel: {
+ rotate: rotate
+ }
+ }, {
+ gridIndex: 1
+ }],
+ yAxis: [{
+ }, {
+ id: 'category',
+ type: 'category',
+ boundaryGap: false,
+ data: categoryData,
+ gridIndex: 1,
+ axisLabel: {
+ rotate: rotate
+ }
+ }],
+ series: [
+ {
+ type: 'line',
+ data: data
},
- grid: [{
- height: 50
- }, {
- top: 220,
- height: 300
- }],
- xAxis: [{
- id: 'category',
- type: 'category',
- boundaryGap: false,
- data: categoryData,
- axisLabel: {
- rotate: rotate
- }
- }, {
- gridIndex: 1
- }],
- yAxis: [{
- }, {
- id: 'category',
- type: 'category',
- boundaryGap: false,
- data: categoryData,
- gridIndex: 1,
- axisLabel: {
- rotate: rotate
- }
- }],
- series: [
- {
- type:'line',
- data: data
+ {
+ type: 'line',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: data
+ }
+ ]
+ };
+
+ var chart = testHelper.createChart(echarts, 'main1', option, {height: 600});
+
+ chart && next();
+
+ function next() {
+ var nextInterval = rotate % 90 === 0 ? 2000 : 70;
+ rotate = (rotate + 1) % 360;
+ setTimeout(function () {
+ chart.setOption({
+ xAxis: {
+ id: 'category',
+ axisLabel: {
+ rotate: rotate
+ }
},
- {
- type:'line',
- xAxisIndex: 1,
- yAxisIndex: 1,
- data: data
- }
- ]
- };
-
- var chart = testHelper.createChart(echarts, 'main1', option, {height: 600});
-
- chart && next();
-
- function next() {
- var nextInterval = rotate % 90 === 0 ? 2000: 70;
- rotate = (rotate + 1) % 360;
- setTimeout(function () {
- chart.setOption({
- xAxis: {
- id: 'category',
- axisLabel: {
- rotate: rotate
- }
- },
- yAxis: {
- id: 'category',
- axisLabel: {
- rotate: rotate
- }
+ yAxis: {
+ id: 'category',
+ axisLabel: {
+ rotate: rotate
}
- });
- next();
- }, nextInterval);
- }
- });
+ }
+ });
+ next();
+ }, nextInterval);
+ }
+ });
- </script>
+ </script>
@@ -283,126 +287,127 @@ under the License.
- <script>
+ <script>
- require([
- 'data/rainfall.json',
- 'echarts'
- ], function (rainfallData, echarts) {
+ require([
+ 'data/rainfall.json',
+ 'echarts'
+ ], function (rainfallData, echarts) {
- var option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- bottom: 150
- },
- dataZoom: {
- show: true,
- realtime: true,
- startValue: '2009-09-20 12:00',
- end: 100
- },
- xAxis: [
- {
- type: 'time',
- axisLabel: {
- formatter: function (value) {
- return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
- }
+ var option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ bottom: 150
+ },
+ dataZoom: {
+ show: true,
+ realtime: true,
+ startValue: '2009-09-20 12:00',
+ end: 100
+ },
+ xAxis: [
+ {
+ type: 'time',
+ axisLabel: {
+ formatter: function (value) {
+ return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
}
}
- ],
- yAxis: [
- {
- name: '流量(m^3/s)'
- }
- ],
- series: [
- {
- name: '流量',
- type: 'line',
- symbol: 'none',
- itemStyle: {normal: {areaStyle: {type: 'default'}}},
- data: rainfallData.flow.map(function (val, idx) {
- return [+(new Date(rainfallData.category[idx])), val];
- })
- }
- ]
- };
-
- testHelper.createChart(echarts, 'main2', option);
- })
-
- </script>
-
-
-<script>
-
- require([
- 'echarts'
- ], function (echarts) {
-
- let dataIndex = 0;
-
- let testArr = [
- [true, false, true, true],
- [true, false, true, false],
- [false, true, true, false],
- [false, true, false, true],
- [false, false, true, true],
- [true, true, false, false]
- ];
-
- function print(index){
- return `intervalList = [${testArr[index].toString()}] ,currentIndex is ${index}`
- }
+ }
+ ],
+ yAxis: [
+ {
+ name: '流量(m^3/s)'
+ }
+ ],
+ series: [
+ {
+ name: '流量',
+ type: 'line',
+ symbol: 'none',
+ itemStyle: {normal: {areaStyle: {type: 'default'}}},
+ data: rainfallData.flow.map(function (val, idx) {
+ return [+(new Date(rainfallData.category[idx])), val];
+ })
+ }
+ ]
+ };
+
+ testHelper.createChart(echarts, 'main2', option);
+ })
+
+ </script>
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var dataIndex = 0;
+
+ var testArr = [
+ [true, false, true, true],
+ [true, false, true, false],
+ [false, true, true, false],
+ [false, true, false, true],
+ [false, false, true, true],
+ [true, true, false, false]
+ ];
+
+ function print(index) {
+ return `intervalList = [${testArr[index].toString()}] ,currentIndex is ${index}`
+ }
- var option = {
- title:{
- text:print(dataIndex)
- },
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu'],
- axisTick: {
- show: true,
- interval: function (index) {
- // return index && !!x2Data[index]
- return testArr[dataIndex][index]
+ var option = {
+ title: {
+ text: print(dataIndex)
},
- length:50,
- alignWithLabel: false,
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu'],
+ axisTick: {
+ show: true,
+ interval: function (index) {
+ // return index && !!x2Data[index]
+ return testArr[dataIndex][index]
+ },
+ length: 50,
+ alignWithLabel: false,
+ },
+ },
+ yAxis: {
+ type: 'value'
},
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- data: [820, 932, 901, 934],
- type: 'bar'
- }]
- };
- let ec = echarts.init(document.getElementById('main3'));
-
- setInterval(function(){
- let next = ++dataIndex;
- dataIndex = next > 5 ? 0: next;
- option.title.text = print(dataIndex);
+ series: [{
+ data: [820, 932, 901, 934],
+ type: 'bar'
+ }]
+ };
+ var ec = echarts.init(document.getElementById('main3'));
+
+ setInterval(function () {
+ var next = ++dataIndex;
+ dataIndex = next > 5 ? 0 : next;
+ option.title.text = print(dataIndex);
+ ec.setOption(option);
+ }, 6000);
+
ec.setOption(option);
- },6000);
-
- ec.setOption(option);
- });
+ });
+
+ </script>
-</script>
+</body>
- </body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org