You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2022/11/15 07:47:31 UTC
[echarts-examples] branch gh-pages updated: tweak calendar-related examples
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new 679e0c83 tweak calendar-related examples
679e0c83 is described below
commit 679e0c83b7f4feb6cc74b960a0ce7aa4b98adc65
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Nov 15 15:46:29 2022 +0800
tweak calendar-related examples
---
package-lock.json | 30 ++++-----
package.json | 2 +-
public/examples/ts/calendar-charts.ts | 22 +++----
public/examples/ts/calendar-effectscatter.ts | 17 +++--
public/examples/ts/calendar-graph.ts | 17 +++--
public/examples/ts/calendar-heatmap.ts | 17 +++--
public/examples/ts/calendar-horizontal.ts | 19 +++---
public/examples/ts/calendar-lunar.ts | 14 +++--
public/examples/ts/calendar-pie.ts | 94 +++++++++-------------------
public/examples/ts/calendar-simple.ts | 17 +++--
public/examples/ts/calendar-vertical.ts | 23 ++++---
11 files changed, 115 insertions(+), 157 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b21ac4f5..845e8317 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
"css-loader": "^3.5.3",
"cwebp-bin": "^6.1.1",
"download-git-repo": "^3.0.2",
- "echarts": "^5.2.0",
+ "echarts": "^5.4.0",
"echarts-stat": "^1.2.0",
"esbuild": "^0.8.34",
"file-loader": "^6.2.0",
@@ -4454,13 +4454,13 @@
}
},
"node_modules/echarts": {
- "version": "5.3.2",
- "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
- "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
+ "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
"dev": true,
"dependencies": {
"tslib": "2.3.0",
- "zrender": "5.3.1"
+ "zrender": "5.4.0"
}
},
"node_modules/echarts-stat": {
@@ -10722,9 +10722,9 @@
}
},
"node_modules/zrender": {
- "version": "5.3.1",
- "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
- "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
+ "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
"dev": true,
"dependencies": {
"tslib": "2.3.0"
@@ -14329,13 +14329,13 @@
}
},
"echarts": {
- "version": "5.3.2",
- "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz",
- "integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==",
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
+ "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
"dev": true,
"requires": {
"tslib": "2.3.0",
- "zrender": "5.3.1"
+ "zrender": "5.4.0"
},
"dependencies": {
"tslib": {
@@ -19201,9 +19201,9 @@
"dev": true
},
"zrender": {
- "version": "5.3.1",
- "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz",
- "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==",
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
+ "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
"dev": true,
"requires": {
"tslib": "2.3.0"
diff --git a/package.json b/package.json
index fd1a195d..09d97012 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
"css-loader": "^3.5.3",
"cwebp-bin": "^6.1.1",
"download-git-repo": "^3.0.2",
- "echarts": "^5.2.0",
+ "echarts": "^5.4.0",
"echarts-stat": "^1.2.0",
"esbuild": "^0.8.34",
"file-loader": "^6.2.0",
diff --git a/public/examples/ts/calendar-charts.ts b/public/examples/ts/calendar-charts.ts
index 508ac347..d9b6f20f 100644
--- a/public/examples/ts/calendar-charts.ts
+++ b/public/examples/ts/calendar-charts.ts
@@ -6,19 +6,17 @@ shotWidth: 1000
difficulty: 11
*/
-function getVirtulData(year: string) {
- year = year || '2017';
- let date = +echarts.number.parseDate(year + '-01-01');
- let end = +echarts.number.parseDate(+year + 1 + '-01-01');
- let dayTime = 3600 * 24 * 1000;
- let data = [];
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(+year + 1 + '-01-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 1000)
]);
}
- console.log(data[data.length - 1]);
return data;
}
@@ -151,7 +149,7 @@ option = {
{
type: 'heatmap',
coordinateSystem: 'calendar',
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
},
{
type: 'effectScatter',
@@ -160,7 +158,7 @@ option = {
symbolSize: function (val) {
return val[1] / 40;
},
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
},
{
type: 'scatter',
@@ -169,13 +167,13 @@ option = {
symbolSize: function (val) {
return val[1] / 60;
},
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 3,
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
}
]
};
diff --git a/public/examples/ts/calendar-effectscatter.ts b/public/examples/ts/calendar-effectscatter.ts
index 32f4b5c0..05363b78 100644
--- a/public/examples/ts/calendar-effectscatter.ts
+++ b/public/examples/ts/calendar-effectscatter.ts
@@ -1,26 +1,25 @@
/*
-title: Calendar Effectscatter
+title: Calendar EffectScatter
category: calendar
titleCN: 热力特效散点图
difficulty:3
*/
-function getVirtulData(year: string) {
- year = year || '2017';
- let date = +echarts.number.parseDate(year + '-01-01');
- let end = +echarts.number.parseDate(+year + 1 + '-01-01');
- let dayTime = 3600 * 24 * 1000;
- let data: [string, number][] = [];
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(+year + 1 + '-01-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
-const data = getVirtulData('2016');
+const data = getVirtualData('2016');
option = {
backgroundColor: '#404a59',
diff --git a/public/examples/ts/calendar-graph.ts b/public/examples/ts/calendar-graph.ts
index 152222dd..9dc4fbcb 100644
--- a/public/examples/ts/calendar-graph.ts
+++ b/public/examples/ts/calendar-graph.ts
@@ -23,15 +23,14 @@ const links = graphData.map(function (item, idx) {
});
links.pop();
-function getVirtulData(year: string) {
- year = year || '2017';
- var date = +echarts.number.parseDate(year + '-01-01');
- var end = +echarts.number.parseDate(+year + 1 + '-01-01');
- var dayTime = 3600 * 24 * 1000;
- var data = [];
- for (var time = date; time < end; time += dayTime) {
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(+year + 1 + '-01-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
+ for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 1000)
]);
}
@@ -99,7 +98,7 @@ option = {
{
type: 'heatmap',
coordinateSystem: 'calendar',
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
}
]
};
diff --git a/public/examples/ts/calendar-heatmap.ts b/public/examples/ts/calendar-heatmap.ts
index c4ee50fc..f46dadde 100644
--- a/public/examples/ts/calendar-heatmap.ts
+++ b/public/examples/ts/calendar-heatmap.ts
@@ -5,15 +5,14 @@ titleCN: 日历热力图
difficulty: 1
*/
-function getVirtulData(year: string) {
- year = year || '2017';
- var date = +echarts.number.parseDate(year + '-01-01');
- var end = +echarts.number.parseDate(+year + 1 + '-01-01');
- var dayTime = 3600 * 24 * 1000;
- var data: [string, number][] = [];
- for (var time = date; time < end; time += dayTime) {
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(+year + 1 + '-01-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
+ for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 10000)
]);
}
@@ -49,7 +48,7 @@ option = {
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
- data: getVirtulData('2016')
+ data: getVirtualData('2016')
}
};
diff --git a/public/examples/ts/calendar-horizontal.ts b/public/examples/ts/calendar-horizontal.ts
index c0c8f132..d2eef9a9 100644
--- a/public/examples/ts/calendar-horizontal.ts
+++ b/public/examples/ts/calendar-horizontal.ts
@@ -6,15 +6,14 @@ shotWidth: 900
difficulty: 2
*/
-function getVirtulData(year: string) {
- year = year || '2017';
- let date = +echarts.number.parseDate(year + '-01-01');
- let end = +echarts.number.parseDate(+year + 1 + '-01-01');
- let dayTime = 3600 * 24 * 1000;
- let data: [string, number][] = [];
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(+year + 1 + '-01-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 1000)
]);
}
@@ -57,19 +56,19 @@ option = {
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
- data: getVirtulData('2016')
+ data: getVirtualData('2016')
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 2,
- data: getVirtulData('2015')
+ data: getVirtualData('2015')
}
]
};
diff --git a/public/examples/ts/calendar-lunar.ts b/public/examples/ts/calendar-lunar.ts
index 7db582a6..fcf4900d 100644
--- a/public/examples/ts/calendar-lunar.ts
+++ b/public/examples/ts/calendar-lunar.ts
@@ -373,8 +373,8 @@ const dateList = [
['2017-12-31', '十四']
];
-let heatmapData = [];
-let lunarData = [];
+const heatmapData = [];
+const lunarData = [];
for (let i = 0; i < dateList.length; i++) {
heatmapData.push([dateList[i][0], Math.random() * 300]);
lunarData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);
@@ -429,7 +429,7 @@ option = {
{
type: 'scatter',
coordinateSystem: 'calendar',
- symbolSize: 1,
+ symbolSize: 0,
label: {
show: true,
formatter: function (params: any) {
@@ -438,12 +438,13 @@ option = {
},
color: '#000'
},
- data: lunarData
+ data: lunarData,
+ silent: true
},
{
type: 'scatter',
coordinateSystem: 'calendar',
- symbolSize: 1,
+ symbolSize: 0,
label: {
show: true,
formatter: function (params: any) {
@@ -453,7 +454,8 @@ option = {
fontWeight: 700,
color: '#a00'
},
- data: lunarData
+ data: lunarData,
+ silent: true
},
{
name: '降雨量',
diff --git a/public/examples/ts/calendar-pie.ts b/public/examples/ts/calendar-pie.ts
index 02458bb3..6a82b250 100644
--- a/public/examples/ts/calendar-pie.ts
+++ b/public/examples/ts/calendar-pie.ts
@@ -8,60 +8,39 @@ difficulty: 6
const cellSize = [80, 80];
const pieRadius = 30;
-type DataItem = [string, number];
-
-function getVirtulData() {
- let date = +echarts.number.parseDate('2017-02-01');
- let end = +echarts.number.parseDate('2017-03-01');
- let dayTime = 3600 * 24 * 1000;
- let data: DataItem[] = [];
+function getVirtualData() {
+ const date = +echarts.time.parse('2017-02-01');
+ const end = +echarts.time.parse('2017-03-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
-function getPieSeries(
- scatterData: DataItem[],
- chart: echarts.ECharts
-): echarts.PieSeriesOption[] {
- return scatterData.map(function (item, index) {
- var center = chart.convertToPixel('calendar', item);
- return {
- id: index + 'pie',
- type: 'pie',
- center: center,
- label: {
- formatter: '{c}',
- position: 'inside'
- },
- radius: pieRadius,
- data: [
- { name: '工作', value: Math.round(Math.random() * 24) },
- { name: '娱乐', value: Math.round(Math.random() * 24) },
- { name: '睡觉', value: Math.round(Math.random() * 24) }
- ]
- };
- });
-}
-
-function getPieSeriesUpdate(
- scatterData: DataItem[],
- chart: echarts.ECharts
-): echarts.PieSeriesOption[] {
- return scatterData.map(function (item, index) {
- var center = chart.convertToPixel('calendar', item);
- return {
- id: index + 'pie',
- center: center
- };
- });
-}
-
-var scatterData = getVirtulData();
+const scatterData = getVirtualData();
+const pieSeries = scatterData.map(function (item, index) {
+ return {
+ type: 'pie',
+ id: index + 'pie',
+ center: item[0],
+ radius: pieRadius,
+ coordinateSystem: 'calendar',
+ label: {
+ formatter: '{c}',
+ position: 'inside'
+ },
+ data: [
+ { name: 'Work', value: Math.round(Math.random() * 24) },
+ { name: 'Entertainment', value: Math.round(Math.random() * 24) },
+ { name: 'Sleep', value: Math.round(Math.random() * 24) }
+ ]
+ } as echarts.PieSeriesOption;
+});
option = {
tooltip: {},
@@ -93,34 +72,19 @@ option = {
id: 'label',
type: 'scatter',
coordinateSystem: 'calendar',
- symbolSize: 1,
+ symbolSize: 0,
label: {
show: true,
formatter: function (params: any) {
- return echarts.format.formatTime('dd', params.value[0]);
+ return echarts.time.format(params.value[0], '{dd}', false);
},
offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
fontSize: 14
},
data: scatterData
- }
+ },
+ ...pieSeries
]
};
-let pieInitialized: boolean;
-setTimeout(function () {
- pieInitialized = true;
- myChart.setOption<echarts.EChartsOption>({
- series: getPieSeries(scatterData, myChart)
- });
-}, 10);
-
-app.onresize = function () {
- if (pieInitialized) {
- myChart.setOption<echarts.EChartsOption>({
- series: getPieSeriesUpdate(scatterData, myChart)
- });
- }
-};
-
export {};
diff --git a/public/examples/ts/calendar-simple.ts b/public/examples/ts/calendar-simple.ts
index d2ae4aaa..c7c85bc3 100644
--- a/public/examples/ts/calendar-simple.ts
+++ b/public/examples/ts/calendar-simple.ts
@@ -5,15 +5,14 @@ category: calendar
difficulty: 0
*/
-function getVirtulData(year: string) {
- year = year || '2017';
- var date = +echarts.number.parseDate(year + '-01-01');
- var end = +echarts.number.parseDate(year + '-12-31');
- var dayTime = 3600 * 24 * 1000;
- var data = [];
- for (var time = date; time <= end; time += dayTime) {
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(year + '-12-31');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
+ for (let time = date; time <= end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 10000)
]);
}
@@ -32,7 +31,7 @@ option = {
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
}
};
diff --git a/public/examples/ts/calendar-vertical.ts b/public/examples/ts/calendar-vertical.ts
index 39c0cb2d..6eb7669e 100644
--- a/public/examples/ts/calendar-vertical.ts
+++ b/public/examples/ts/calendar-vertical.ts
@@ -6,15 +6,14 @@ shotWidth: 900
difficulty: 1
*/
-function getVirtulData(year: string) {
- year = year || '2017';
- var date = +echarts.number.parseDate(year + '-01-01');
- var end = +echarts.number.parseDate(+year + 1 + '-01-01');
- var dayTime = 3600 * 24 * 1000;
- var data = [];
- for (var time = date; time < end; time += dayTime) {
+function getVirtualData(year: string) {
+ const date = +echarts.time.parse(year + '-01-01');
+ const end = +echarts.time.parse(+year + 1 + '-01-01');
+ const dayTime = 3600 * 24 * 1000;
+ const data: [string, number][] = [];
+ for (let time = date; time < end; time += dayTime) {
data.push([
- echarts.format.formatTime('yyyy-MM-dd', time),
+ echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 1000)
]);
}
@@ -25,7 +24,7 @@ option = {
tooltip: {
position: 'top',
formatter: function (p: any) {
- var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]);
+ const format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}', false);
return format + ': ' + p.data[1];
}
},
@@ -65,19 +64,19 @@ option = {
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
- data: getVirtulData('2015')
+ data: getVirtualData('2015')
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
- data: getVirtulData('2016')
+ data: getVirtualData('2016')
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 2,
- data: getVirtulData('2017')
+ data: getVirtualData('2017')
}
]
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org