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:20 UTC
[incubator-echarts] branch fix-11186 created (now ad08e1a)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-11186
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at ad08e1a style: fix formatting style of #11186
This branch includes the following new commits:
new ad08e1a style: fix formatting style of #11186
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/01: style: fix formatting style of #11186
Posted by ov...@apache.org.
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