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 09:26:01 UTC
[incubator-echarts-examples] branch next updated: Modify code fomat
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 00e5f6f Modify code fomat about gauge chart example
00e5f6f is described below
commit 00e5f6f5c032ed1530847e81b4b213ae38186470
Author: Wdingding <wa...@gmail.com>
AuthorDate: Fri Oct 23 17:25:49 2020 +0800
Modify code fomat about gauge chart example
---
public/data/gauge-clock.js | 373 +++++++++++++++---------------
public/data/gauge-grade.js | 23 +-
public/data/gauge-multi-title.js | 56 ++---
public/data/gauge-progress.js | 8 +-
public/data/gauge-ring.js | 68 +++---
public/data/gauge-speed-simple.js | 4 +-
public/data/gauge-speed.js | 6 +-
public/data/gauge-stage.js | 2 +-
public/data/{gauge-simple.js => gauge.js} | 2 +-
9 files changed, 270 insertions(+), 272 deletions(-)
diff --git a/public/data/gauge-clock.js b/public/data/gauge-clock.js
index be17e07..f143a7e 100644
--- a/public/data/gauge-clock.js
+++ b/public/data/gauge-clock.js
@@ -8,200 +8,195 @@ difficulty: 7
option = {
series: [{
- name: 'hour',
- type: 'gauge',
- startAngle: 90,
- endAngle: -270,
- min: 0,
- max: 12,
- splitNumber: 12,
- axisLine: {
- lineStyle: {
- width: 15,
- color: [
- [1, 'rgba(0,0,0,0.7)']
- ],
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- shadowBlur: 15
- }
- },
- splitLine: {
- lineStyle: {
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 3,
- shadowOffsetX: 1,
- shadowOffsetY: 2
- }
- },
- axisLabel: {
- fontSize: 50,
- distance: 25,
- formatter: function(value) {
- if (value === 0) {
- return '';
- }
- return value;
- }
- },
- anchor: {
- show: true,
- icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346. [...]
- showAbove: false,
- offsetCenter: [0, '-35%'],
- size: 120,
- keepAspect: true,
- itemStyle: {
- color: '#707177'
- }
- },
- pointer: {
- icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
- width: 12,
- length: '55%',
- offsetCenter: [0, '8%'],
- itemStyle: {
- color: '#C0911F',
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 8,
- shadowOffsetX: 2,
- shadowOffsetY: 4
- }
- },
- detail: {
- show: false
- },
- title: {
- offsetCenter: [0, '30%']
- },
- data: [{
- value: 0,
- name: ''
- }]
- },
- {
- name: 'minute',
- type: 'gauge',
- startAngle: 90,
- endAngle: -270,
- min: 0,
- max: 60,
- axisLine: {
- show: false
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: false
- },
- pointer: {
- icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
- width: 8,
- length: '70%',
- offsetCenter: [0, '8%'],
- itemStyle: {
- color: '#C0911F',
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 8,
- shadowOffsetX: 2,
- shadowOffsetY: 4
- }
- },
- anchor: {
- show: true,
- size: 20,
- showAbove: false,
- itemStyle: {
- borderWidth: 15,
- borderColor: '#C0911F',
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 8,
- shadowOffsetX: 2,
- shadowOffsetY: 4
- }
- },
- detail: {
- show: false
- },
- title: {
- offsetCenter: ['0%', '-40%']
- },
- data: [{
- value: 0,
- name: ''
- }]
- },
- {
- name: 'second',
- type: 'gauge',
- startAngle: 90,
- endAngle: -270,
- min: 0,
- max: 60,
- animationEasingUpdate: 'bounceOut',
- axisLine: {
- show: false
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: false
- },
- pointer: {
- icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
- width: 4,
- length: '85%',
- offsetCenter: [0, '8%'],
- itemStyle: {
- color: '#C0911F',
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 8,
- shadowOffsetX: 2,
- shadowOffsetY: 4
- }
- },
- anchor: {
- show: true,
- size: 15,
- showAbove: true,
- itemStyle: {
- color: '#C0911F',
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 8,
- shadowOffsetX: 2,
- shadowOffsetY: 4
+ name: 'hour',
+ type: 'gauge',
+ startAngle: 90,
+ endAngle: -270,
+ min: 0,
+ max: 12,
+ splitNumber: 12,
+ axisLine: {
+ lineStyle: {
+ width: 15,
+ color: [
+ [1, 'rgba(0,0,0,0.7)']
+ ],
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ shadowBlur: 15
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ shadowBlur: 3,
+ shadowOffsetX: 1,
+ shadowOffsetY: 2
+ }
+ },
+ axisLabel: {
+ fontSize: 50,
+ distance: 25,
+ formatter: function(value) {
+ if (value === 0) {
+ return '';
}
- },
- detail: {
-
- show: false
- },
- title: {
- offsetCenter: ['0%', '-40%']
- },
- data: [{
- value: 0,
- name: ''
- }]
- }
- ]
+ return value;
+ }
+ },
+ anchor: {
+ show: true,
+ icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92 [...]
+ showAbove: false,
+ offsetCenter: [0, '-35%'],
+ size: 120,
+ keepAspect: true,
+ itemStyle: {
+ color: '#707177'
+ }
+ },
+ pointer: {
+ icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+ width: 12,
+ length: '55%',
+ offsetCenter: [0, '8%'],
+ itemStyle: {
+ color: '#C0911F',
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ shadowBlur: 8,
+ shadowOffsetX: 2,
+ shadowOffsetY: 4
+ }
+ },
+ detail: {
+ show: false
+ },
+ title: {
+ offsetCenter: [0, '30%']
+ },
+ data: [{
+ value: 0
+ }]
+ },
+ {
+ name: 'minute',
+ type: 'gauge',
+ startAngle: 90,
+ endAngle: -270,
+ min: 0,
+ max: 60,
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ pointer: {
+ icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+ width: 8,
+ length: '70%',
+ offsetCenter: [0, '8%'],
+ itemStyle: {
+ color: '#C0911F',
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ shadowBlur: 8,
+ shadowOffsetX: 2,
+ shadowOffsetY: 4
+ }
+ },
+ anchor: {
+ show: true,
+ size: 20,
+ showAbove: false,
+ itemStyle: {
+ borderWidth: 15,
+ borderColor: '#C0911F',
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ shadowBlur: 8,
+ shadowOffsetX: 2,
+ shadowOffsetY: 4
+ }
+ },
+ detail: {
+ show: false
+ },
+ title: {
+ offsetCenter: ['0%', '-40%']
+ },
+ data: [{
+ value: 0
+ }]
+ },
+ {
+ name: 'second',
+ type: 'gauge',
+ startAngle: 90,
+ endAngle: -270,
+ min: 0,
+ max: 60,
+ animationEasingUpdate: 'bounceOut',
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ pointer: {
+ icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+ width: 4,
+ length: '85%',
+ offsetCenter: [0, '8%'],
+ itemStyle: {
+ color: '#C0911F',
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ shadowBlur: 8,
+ shadowOffsetX: 2,
+ shadowOffsetY: 4
+ }
+ },
+ anchor: {
+ show: true,
+ size: 15,
+ showAbove: true,
+ itemStyle: {
+ color: '#C0911F',
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
+ shadowBlur: 8,
+ shadowOffsetX: 2,
+ shadowOffsetY: 4
+ }
+ },
+ detail: {
+ show: false
+ },
+ title: {
+ offsetCenter: ['0%', '-40%']
+ },
+ data: [{
+ value: 0
+ }]
+ }]
};
-const timeUpdatedStatus = {
+var timeUpdatedStatus = {
second: false,
minute: false,
hour: false
}
function updateSeries(time, series, type) {
- let isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1);
+ var isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1);
if (isCritical && timeUpdatedStatus[type] === true) {
timeUpdatedStatus[type] = false;
series.data[0].value = 0
@@ -218,10 +213,10 @@ function updateSeries(time, series, type) {
}
setInterval(function() {
- let date = new Date();
- let second = date.getSeconds();
- let minute = date.getMinutes() + second / 60;
- let hour = date.getHours() % 12 + minute / 60;
+ var date = new Date();
+ var second = date.getSeconds();
+ var minute = date.getMinutes() + second / 60;
+ var hour = date.getHours() % 12 + minute / 60;
updateSeries(second, option.series[2], 'second');
updateSeries(minute, option.series[1], 'minute');
diff --git a/public/data/gauge-grade.js b/public/data/gauge-grade.js
index 013af75..602c6f1 100644
--- a/public/data/gauge-grade.js
+++ b/public/data/gauge-grade.js
@@ -21,7 +21,7 @@ option = {
[0.25, '#FF6E76'],
[0.5, '#FDDD60'],
[0.75, '#58D9F9'],
- [1, '#7CFFB2'],
+ [1, '#7CFFB2']
]
}
},
@@ -52,15 +52,18 @@ option = {
color: '#464646',
fontSize: 20,
distance: -60,
- formatter: function(value) {
+ formatter: function (value) {
if (value === 0.875) {
- return '优'
- } else if (value === 0.625) {
- return '中'
- } else if (value === 0.375) {
- return '良'
- } else if (value === 0.125) {
- return '差'
+ return '优';
+ }
+ else if (value === 0.625) {
+ return '中';
+ }
+ else if (value === 0.375) {
+ return '良';
+ }
+ else if (value === 0.125) {
+ return '差';
}
}
},
@@ -72,7 +75,7 @@ option = {
fontSize: 50,
offsetCenter: [0, '0%'],
valueAnimation: true,
- formatter: function(value) {
+ formatter: function (value) {
return Math.round(value * 100) + '分';
},
color: 'auto'
diff --git a/public/data/gauge-multi-title.js b/public/data/gauge-multi-title.js
index 800c1bb..524dfe7 100644
--- a/public/data/gauge-multi-title.js
+++ b/public/data/gauge-multi-title.js
@@ -32,35 +32,35 @@ option = {
roundCap: true
},
data: [{
- value: 20,
- name: '完成率',
- title: {
- offsetCenter: ['-40%', '80%']
- },
- detail: {
- offsetCenter: ['-40%', '95%']
- }
+ value: 20,
+ name: '完成率',
+ title: {
+ offsetCenter: ['-40%', '80%']
},
- {
- value: 40,
- name: '达标率',
- title: {
- offsetCenter: ['0%', '80%']
- },
- detail: {
- offsetCenter: ['0%', '95%']
- }
+ detail: {
+ offsetCenter: ['-40%', '95%']
+ }
+ },
+ {
+ value: 40,
+ name: '达标率',
+ title: {
+ offsetCenter: ['0%', '80%']
+ },
+ detail: {
+ offsetCenter: ['0%', '95%']
+ }
+ },
+ {
+ value: 60,
+ name: '优秀率',
+ title: {
+ offsetCenter: ['40%', '80%']
},
- {
- value: 60,
- name: '优秀率',
- title: {
- offsetCenter: ['40%', '80%']
- },
- detail: {
- offsetCenter: ['40%', '95%']
- }
+ detail: {
+ offsetCenter: ['40%', '95%']
}
+ }
],
title: {
fontSize: 14
@@ -73,11 +73,11 @@ option = {
backgroundColor: 'auto',
borderRadius: 3,
formatter: '{value}%'
- },
+ }
}]
};
-setInterval(function() {
+setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
option.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
option.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
diff --git a/public/data/gauge-progress.js b/public/data/gauge-progress.js
index 0a79cad..be73f3f 100644
--- a/public/data/gauge-progress.js
+++ b/public/data/gauge-progress.js
@@ -9,10 +9,10 @@ option = {
series: [{
type: 'gauge',
pointer: {
- show: false,
+ show: false
},
progress: {
- show: true,
+ show: true
},
data: [{
value: 20,
@@ -20,11 +20,11 @@ option = {
}],
detail: {
formatter: '{value}%'
- },
+ }
}]
};
-setInterval(function() {
+setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
}, 2000);
diff --git a/public/data/gauge-ring.js b/public/data/gauge-ring.js
index 86c9ad5..04bcc4b 100644
--- a/public/data/gauge-ring.js
+++ b/public/data/gauge-ring.js
@@ -11,7 +11,7 @@ option = {
startAngle: 90,
endAngle: -270,
pointer: {
- show: false,
+ show: false
},
progress: {
show: true,
@@ -20,57 +20,57 @@ option = {
clip: false,
itemStyle: {
borderWidth: 1,
- borderColor: "#464646"
+ borderColor: '#464646'
}
},
axisLine: {
lineStyle: {
- width: 40,
+ width: 40
}
},
splitLine: {
show: false,
distance: 0,
- length: 10,
+ length: 10
},
axisTick: {
- show: false,
+ show: false
},
axisLabel: {
show: false,
- distance: 50,
+ distance: 50
},
data: [{
- value: 20,
- name: 'Perfect',
- title: {
- offsetCenter: ['0%', '-30%']
- },
- detail: {
- offsetCenter: ['0%', '-20%']
- }
+ value: 20,
+ name: 'Perfect',
+ title: {
+ offsetCenter: ['0%', '-30%']
+ },
+ detail: {
+ offsetCenter: ['0%', '-20%']
+ }
+ },
+ {
+ value: 40,
+ name: 'Good',
+ title: {
+ offsetCenter: ['0%', '0%']
},
- {
- value: 40,
- name: 'Good',
- title: {
- offsetCenter: ['0%', '0%']
- },
- detail: {
- offsetCenter: ['0%', '10%']
- }
+ detail: {
+ offsetCenter: ['0%', '10%']
+ }
+ },
+ {
+ value: 60,
+ name: 'Commonly',
+ title: {
+ offsetCenter: ['0%', '30%']
},
- {
- value: 60,
- name: 'Commonly',
- title: {
- offsetCenter: ['0%', '30%']
- },
- detail: {
- offsetCenter: ['0%', '40%']
- }
+ detail: {
+ offsetCenter: ['0%', '40%']
}
+ }
],
title: {
fontSize: 14
@@ -84,11 +84,11 @@ option = {
borderRadius: 20,
borderWidth: 1,
formatter: '{value}%'
- },
+ }
}]
};
-setInterval(function() {
+setInterval(function () {
option.series[0].pointer.show = false;
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
option.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
diff --git a/public/data/gauge-speed-simple.js b/public/data/gauge-speed-simple.js
index 7fbccee..59d6005 100644
--- a/public/data/gauge-speed-simple.js
+++ b/public/data/gauge-speed-simple.js
@@ -46,10 +46,10 @@ option = {
detail: {
valueAnimation: true,
fontSize: 80,
- offsetCenter: [0, '70%'],
+ offsetCenter: [0, '70%']
},
data: [{
- value: 70,
+ value: 70
}]
}]
};
\ No newline at end of file
diff --git a/public/data/gauge-speed.js b/public/data/gauge-speed.js
index 61aa091..f27471c 100644
--- a/public/data/gauge-speed.js
+++ b/public/data/gauge-speed.js
@@ -70,7 +70,7 @@ option = {
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
- formatter: function(value) {
+ formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|km/h}';
},
rich: {
@@ -83,11 +83,11 @@ option = {
fontSize: 20,
color: '#999',
padding: [0, 0, -20, 10]
- },
+ }
}
},
data: [{
- value: 100,
+ value: 100
}]
}]
};
\ No newline at end of file
diff --git a/public/data/gauge-stage.js b/public/data/gauge-stage.js
index dd91ccc..9886d96 100644
--- a/public/data/gauge-stage.js
+++ b/public/data/gauge-stage.js
@@ -54,7 +54,7 @@ option = {
}]
};
-setInterval(function() {
+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-simple.js b/public/data/gauge.js
similarity index 89%
rename from public/data/gauge-simple.js
rename to public/data/gauge.js
index a25d57a..7123128 100644
--- a/public/data/gauge-simple.js
+++ b/public/data/gauge.js
@@ -7,7 +7,7 @@ difficulty: 1
option = {
tooltip: {
- formatter: "{a} <br/>{b} : {c}%"
+ formatter: '{a} <br/>{b} : {c}%'
},
series: [{
name: 'Pressure',
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org