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 2020/10/23 11:00:38 UTC
[incubator-echarts-examples] branch next updated: Modify title
about gauge chart example
This is an automated email from the ASF dual-hosted git repository.
wangdd pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-examples.git
The following commit(s) were added to refs/heads/next by this push:
new 37c679e Modify title about gauge chart example
37c679e is described below
commit 37c679ebe73fdb4d5668f4aef531a55cc5567f11
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Oct 23 19:00:26 2020 +0800
Modify title about gauge chart example
---
public/data/gauge-clock.js | 10 ++--
public/data/gauge-grade.js | 4 +-
public/data/gauge-multi-title.js | 2 +-
public/data/gauge-progress.js | 97 ++++++++++++++++++++++++++++++++-------
public/data/gauge-ring.js | 2 +-
public/data/gauge-simple.js | 23 ++++++++++
public/data/gauge-speed-simple.js | 55 ----------------------
public/data/gauge-speed.js | 72 +++++++----------------------
public/data/gauge-stage.js | 4 +-
9 files changed, 131 insertions(+), 138 deletions(-)
diff --git a/public/data/gauge-clock.js b/public/data/gauge-clock.js
index f143a7e..f7ba17c 100644
--- a/public/data/gauge-clock.js
+++ b/public/data/gauge-clock.js
@@ -1,5 +1,5 @@
/*
-title: Gauge Clock chart
+title: Clock Gauge
titleCN: 时钟仪表盘
category: gauge
shotWidth: 1000
@@ -36,7 +36,7 @@ option = {
axisLabel: {
fontSize: 50,
distance: 25,
- formatter: function(value) {
+ formatter: function (value) {
if (value === 0) {
return '';
}
@@ -193,13 +193,13 @@ var timeUpdatedStatus = {
second: false,
minute: false,
hour: false
-}
+};
function updateSeries(time, series, type) {
var isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1);
if (isCritical && timeUpdatedStatus[type] === true) {
timeUpdatedStatus[type] = false;
- series.data[0].value = 0
+ series.data[0].value = 0;
series.clockwise = true;
option.animationDurationUpdate = 0;
myChart.setOption(option, true);
@@ -212,7 +212,7 @@ function updateSeries(time, series, type) {
}
}
-setInterval(function() {
+setInterval(function () {
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes() + second / 60;
diff --git a/public/data/gauge-grade.js b/public/data/gauge-grade.js
index 602c6f1..3035105 100644
--- a/public/data/gauge-grade.js
+++ b/public/data/gauge-grade.js
@@ -1,6 +1,6 @@
/*
-title: Gauge Grade chart
-titleCN: 等级划分仪表盘
+title: Grade Gauge
+titleCN: 等级仪表盘
category: gauge
shotWidth: 800
difficulty: 4
diff --git a/public/data/gauge-multi-title.js b/public/data/gauge-multi-title.js
index 524dfe7..1ebf9e1 100644
--- a/public/data/gauge-multi-title.js
+++ b/public/data/gauge-multi-title.js
@@ -1,5 +1,5 @@
/*
-title: Gauge Multi Title chart
+title: Multi Title Gauge
titleCN: 多标题仪表盘
category: gauge
difficulty: 4
diff --git a/public/data/gauge-progress.js b/public/data/gauge-progress.js
index be73f3f..307ac09 100644
--- a/public/data/gauge-progress.js
+++ b/public/data/gauge-progress.js
@@ -1,30 +1,93 @@
/*
-title: Gauge Basic progress chart
-titleCN: 基础仪表盘
+title: Grogress Gauge
+titleCN: 进度仪表盘
category: gauge
-difficulty: 2
+shotWidth: 800
+difficulty: 3
*/
option = {
series: [{
type: 'gauge',
+ startAngle: 180,
+ endAngle: 0,
+ min: 0,
+ max: 240,
+ splitNumber: 12,
+ itemStyle: {
+ color: '#58D9F9',
+ shadowColor: 'rgba(0,138,255,0.45)',
+ shadowBlur: 10,
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ },
+ progress: {
+ show: true,
+ roundCap: true,
+ width: 18
+ },
pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2 [...]
+ length: '75%',
+ width: 16,
+ offsetCenter: [0, '5%']
+ },
+ axisLine: {
+ roundCap: true,
+ lineStyle: {
+ width: 18
+ }
+ },
+ axisTick: {
+ splitNumber: 2,
+ lineStyle: {
+ width: 2,
+ color: '#999'
+ }
+ },
+ splitLine: {
+ length: 12,
+ lineStyle: {
+ width: 3,
+ color: '#999'
+ }
+ },
+ axisLabel: {
+ distance: 30,
+ color: '#999',
+ fontSize: 20
+ },
+ title: {
show: false
},
- progress: {
- show: true
+ detail: {
+ backgroundColor: '#fff',
+ borderColor: '#999',
+ borderWidth: 2,
+ width: '60%',
+ lineHeight: 40,
+ height: '15%',
+ borderRadius: 8,
+ offsetCenter: [0, '35%'],
+ valueAnimation: true,
+ formatter: function (value) {
+ return '{value|' + value.toFixed(0) + '}{unit|km/h}';
+ },
+ rich: {
+ value: {
+ fontSize: 50,
+ fontWeight: 'bolder',
+ color: '#777'
+ },
+ unit: {
+ fontSize: 20,
+ color: '#999',
+ padding: [0, 0, -20, 10]
+ }
+ }
},
data: [{
- value: 20,
- name: '完成率'
- }],
- detail: {
- formatter: '{value}%'
- }
+ value: 100
+ }]
}]
-};
-
-setInterval(function () {
- option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
- myChart.setOption(option, true);
-}, 2000);
+};
\ No newline at end of file
diff --git a/public/data/gauge-ring.js b/public/data/gauge-ring.js
index 04bcc4b..5c88cd8 100644
--- a/public/data/gauge-ring.js
+++ b/public/data/gauge-ring.js
@@ -1,5 +1,5 @@
/*
-title: Gauge Ring chart
+title: Ring Gauge
titleCN: 得分环
category: gauge
difficulty: 5
diff --git a/public/data/gauge-simple.js b/public/data/gauge-simple.js
new file mode 100644
index 0000000..b52c58e
--- /dev/null
+++ b/public/data/gauge-simple.js
@@ -0,0 +1,23 @@
+/*
+title: Simple Gauge
+titleCN: 基础仪表盘
+category: gauge
+difficulty: 1
+*/
+
+option = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ series: [{
+ name: 'Pressure',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}'
+ },
+ data: [{
+ value: 50,
+ name: 'SCORE'
+ }]
+ }]
+};
diff --git a/public/data/gauge-speed-simple.js b/public/data/gauge-speed-simple.js
deleted file mode 100644
index 59d6005..0000000
--- a/public/data/gauge-speed-simple.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-title: Gauge Speed Simple chart
-titleCN: 简单速度仪表盘
-category: gauge
-difficulty: 2
-*/
-
-option = {
- series: [{
- type: 'gauge',
- progress: {
- show: true,
- width: 18
- },
- axisLine: {
- lineStyle: {
- width: 18
- }
- },
- axisTick: {
- show: false
- },
- splitLine: {
- length: 15,
- lineStyle: {
- width: 2,
- color: '#999'
- }
- },
- axisLabel: {
- distance: 25,
- color: '#999',
- fontSize: 20
- },
- anchor: {
- show: true,
- showAbove: true,
- size: 25,
- itemStyle: {
- borderWidth: 10
- }
- },
- title: {
- show: false
- },
- detail: {
- valueAnimation: true,
- fontSize: 80,
- offsetCenter: [0, '70%']
- },
- data: [{
- value: 70
- }]
- }]
-};
\ No newline at end of file
diff --git a/public/data/gauge-speed.js b/public/data/gauge-speed.js
index f27471c..2f342dc 100644
--- a/public/data/gauge-speed.js
+++ b/public/data/gauge-speed.js
@@ -1,93 +1,55 @@
/*
-title: Gauge Speed chart
+title: Speed Gauge
titleCN: 速度仪表盘
category: gauge
-shotWidth: 800
-difficulty: 3
+difficulty: 2
*/
option = {
series: [{
type: 'gauge',
- startAngle: 180,
- endAngle: 0,
- min: 0,
- max: 240,
- splitNumber: 12,
- itemStyle: {
- color: '#58D9F9',
- shadowColor: 'rgba(0,138,255,0.45)',
- shadowBlur: 10,
- shadowOffsetX: 2,
- shadowOffsetY: 2
- },
progress: {
show: true,
- roundCap: true,
width: 18
},
- pointer: {
- icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2 [...]
- length: '75%',
- width: 16,
- offsetCenter: [0, '5%']
- },
axisLine: {
- roundCap: true,
lineStyle: {
width: 18
}
},
axisTick: {
- splitNumber: 2,
- lineStyle: {
- width: 2,
- color: '#999'
- }
+ show: false
},
splitLine: {
- length: 12,
+ length: 15,
lineStyle: {
- width: 3,
+ width: 2,
color: '#999'
}
},
axisLabel: {
- distance: 30,
+ distance: 25,
color: '#999',
fontSize: 20
},
+ anchor: {
+ show: true,
+ showAbove: true,
+ size: 25,
+ itemStyle: {
+ borderWidth: 10
+ }
+ },
title: {
show: false
},
detail: {
- backgroundColor: '#fff',
- borderColor: '#999',
- borderWidth: 2,
- width: '60%',
- lineHeight: 40,
- height: '15%',
- borderRadius: 8,
- offsetCenter: [0, '35%'],
valueAnimation: true,
- formatter: function (value) {
- return '{value|' + value.toFixed(0) + '}{unit|km/h}';
- },
- rich: {
- value: {
- fontSize: 50,
- fontWeight: 'bolder',
- color: '#777'
- },
- unit: {
- fontSize: 20,
- color: '#999',
- padding: [0, 0, -20, 10]
- }
- }
+ fontSize: 80,
+ offsetCenter: [0, '70%']
},
data: [{
- value: 100
+ value: 70
}]
}]
};
\ No newline at end of file
diff --git a/public/data/gauge-stage.js b/public/data/gauge-stage.js
index 9886d96..021edad 100644
--- a/public/data/gauge-stage.js
+++ b/public/data/gauge-stage.js
@@ -1,6 +1,6 @@
/*
-title: Gauge Stage chart
-titleCN: 阶段仪表盘
+title: Stage Speed Gauge
+titleCN: 阶段速度仪表盘
category: gauge
difficulty: 3
*/
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org