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/22 12:51:29 UTC
[incubator-echarts-examples] branch next updated: add gauge chart
examples
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 8dd481a add gauge chart examples
8dd481a is described below
commit 8dd481a55ff09555c76f73f50f9d4e28f49956a2
Author: Wdingding <wa...@gmail.com>
AuthorDate: Thu Oct 22 20:51:13 2020 +0800
add gauge chart examples
---
public/data/gauge-barometer.js | 118 ++++++++++++++++
public/data/gauge-car-dark.js | 284 --------------------------------------
public/data/gauge-clock.js | 232 +++++++++++++++++++++++++++++++
public/data/gauge-grade.js | 84 +++++++++++
public/data/gauge-level.js | 126 -----------------
public/data/gauge-multi-title.js | 85 ++++++++++++
public/data/gauge-progress.js | 30 ++++
public/data/gauge-ring.js | 97 +++++++++++++
public/data/gauge-simple.js | 118 +++-------------
public/data/gauge-speed-simple.js | 55 ++++++++
public/data/gauge-speed.js | 232 +++++++++++--------------------
public/data/gauge-stage.js | 60 ++++++++
12 files changed, 860 insertions(+), 661 deletions(-)
diff --git a/public/data/gauge-barometer.js b/public/data/gauge-barometer.js
new file mode 100644
index 0000000..f5ac519
--- /dev/null
+++ b/public/data/gauge-barometer.js
@@ -0,0 +1,118 @@
+/*
+title: Gauge Barometer chart
+titleCN: 气压表
+category: gauge
+difficulty: 5
+*/
+
+option = {
+ series: [{
+ type: 'gauge',
+ min: 0,
+ max: 100,
+ splitNumber: 10,
+ radius: '80%',
+ axisLine: {
+ lineStyle: {
+ color: [
+ [1, '#f00']
+ ],
+ width: 3
+ }
+ },
+ splitLine: {
+ distance: -18,
+ length: 18,
+ lineStyle: {
+ color: '#f00'
+ }
+ },
+ axisTick: {
+ distance: -12,
+ length: 10,
+ lineStyle: {
+ color: '#f00'
+ }
+ },
+ axisLabel: {
+ distance: -50,
+ color: '#f00',
+ fontSize: 25
+ },
+ anchor: {
+ show: true,
+ size: 20,
+ itemStyle: {
+ borderColor: '#000',
+ borderWidth: 2
+ }
+ },
+ pointer: {
+ offsetCenter: [0, '10%'],
+ 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.1940 [...]
+ length: '115%',
+ itemStyle: {
+ color: '#000'
+ }
+ },
+ title: {
+ offsetCenter: [0, '-50%']
+ },
+ data: [{
+ value: 58.46,
+ name: 'PLP低压计'
+ }]
+ },
+ {
+ type: 'gauge',
+ min: 0,
+ max: 60,
+ splitNumber: 6,
+ axisLine: {
+ lineStyle: {
+ color: [
+ [1, '#000']
+ ],
+ width: 3
+ }
+ },
+ splitLine: {
+ distance: -3,
+ length: 18,
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ axisTick: {
+ distance: 0,
+ length: 10,
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ axisLabel: {
+ distance: 10,
+ fontSize: 25,
+ color: '#000'
+ },
+ pointer: {
+ show: false
+ },
+ title: {
+ show: false
+ },
+ anchor: {
+ show: true,
+ size: 14,
+ itemStyle: {
+ color: '#000',
+ }
+ },
+
+ }
+ ]
+};
+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-car-dark.js b/public/data/gauge-car-dark.js
deleted file mode 100644
index 72d7d64..0000000
--- a/public/data/gauge-car-dark.js
+++ /dev/null
@@ -1,284 +0,0 @@
-/*
-title: Gauge Car Dark
-category: gauge
-titleCN: Gauge Car Dark
-*/
-
-option = {
- backgroundColor: '#1b1b1b',
- tooltip: {
- formatter: '{a} <br/>{c} {b}'
- },
- toolbox: {
- show: true,
- feature: {
- mark: {show: true},
- restore: {show: true},
- saveAsImage: {show: true}
- }
- },
- series: [
- {
- name: '速度',
- type: 'gauge',
- min: 0,
- max: 220,
- splitNumber: 11,
- radius: '50%',
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
- width: 3,
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- axisLabel: { // 坐标轴小标记
- fontWeight: 'bolder',
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- },
- axisTick: { // 坐标轴小标记
- length: 15, // 属性length控制线长
- lineStyle: { // 属性lineStyle控制线条样式
- color: 'auto',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- splitLine: { // 分隔线
- length: 25, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- width: 3,
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- pointer: { // 分隔线
- shadowColor: '#fff', //默认透明
- shadowBlur: 5
- },
- title: {
- textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- fontWeight: 'bolder',
- fontSize: 20,
- fontStyle: 'italic',
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- detail: {
- backgroundColor: 'rgba(30,144,255,0.8)',
- borderWidth: 1,
- borderColor: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 5,
- offsetCenter: [0, '50%'], // x, y，单位px
- textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- fontWeight: 'bolder',
- color: '#fff'
- }
- },
- data: [{value: 40, name: 'km/h'}]
- },
- {
- name: '转速',
- type: 'gauge',
- center: ['25%', '55%'], // 默认全局居中
- radius: '30%',
- min: 0,
- max: 7,
- endAngle: 45,
- splitNumber: 7,
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
- width: 2,
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- axisLabel: { // 坐标轴小标记
- fontWeight: 'bolder',
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- },
- axisTick: { // 坐标轴小标记
- length: 12, // 属性length控制线长
- lineStyle: { // 属性lineStyle控制线条样式
- color: 'auto',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- splitLine: { // 分隔线
- length: 20, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- width: 3,
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- pointer: {
- width: 5,
- shadowColor: '#fff', //默认透明
- shadowBlur: 5
- },
- title: {
- offsetCenter: [0, '-30%'], // x, y，单位px
- textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- fontWeight: 'bolder',
- fontStyle: 'italic',
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- detail: {
- //backgroundColor: 'rgba(30,144,255,0.8)',
- // borderWidth: 1,
- borderColor: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 5,
- width: 80,
- height: 30,
- offsetCenter: [25, '20%'], // x, y，单位px
- textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- fontWeight: 'bolder',
- color: '#fff'
- }
- },
- data: [{value: 1.5, name: 'x1000 r/min'}]
- },
- {
- name: '油表',
- type: 'gauge',
- center: ['75%', '50%'], // 默认全局居中
- radius: '30%',
- min: 0,
- max: 2,
- startAngle: 135,
- endAngle: 45,
- splitNumber: 2,
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
- width: 2,
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- axisTick: { // 坐标轴小标记
- length: 12, // 属性length控制线长
- lineStyle: { // 属性lineStyle控制线条样式
- color: 'auto',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- axisLabel: {
- fontWeight: 'bolder',
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10,
- formatter: function (v){
- switch (v + '') {
- case '0': return 'E';
- case '1': return 'Gas';
- case '2': return 'F';
- }
- }
- },
- splitLine: { // 分隔线
- length:15, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- width:3,
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- pointer: {
- width:2,
- shadowColor: '#fff', //默认透明
- shadowBlur: 5
- },
- title: {
- show: false
- },
- detail: {
- show: false
- },
- data: [{value: 0.5, name: 'gas'}]
- },
- {
- name: '水表',
- type: 'gauge',
- center: ['75%', '50%'], // 默认全局居中
- radius: '30%',
- min: 0,
- max: 2,
- startAngle: 315,
- endAngle: 225,
- splitNumber: 2,
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
- width: 2,
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- axisTick: { // 坐标轴小标记
- show: false
- },
- axisLabel: {
- fontWeight: 'bolder',
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10,
- formatter: function(v){
- switch (v + '') {
- case '0': return 'H';
- case '1': return 'Water';
- case '2': return 'C';
- }
- }
- },
- splitLine: { // 分隔线
- length: 15, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- width: 3,
- color: '#fff',
- shadowColor: '#fff', //默认透明
- shadowBlur: 10
- }
- },
- pointer: {
- width: 2,
- shadowColor: '#fff', //默认透明
- shadowBlur: 5
- },
- title: {
- show: false
- },
- detail: {
- show: false
- },
- data:[{value: 0.5, name: 'gas'}]
- }
- ]
-};
-
-setInterval(function (){
- option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
- option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
- option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
- option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
- myChart.setOption(option);
-},2000);
diff --git a/public/data/gauge-clock.js b/public/data/gauge-clock.js
new file mode 100644
index 0000000..96e48fb
--- /dev/null
+++ b/public/data/gauge-clock.js
@@ -0,0 +1,232 @@
+/*
+title: Gauge Clock chart
+titleCN: 时钟仪表盘
+category: gauge
+difficulty: 6
+*/
+
+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
+ }
+ },
+ detail: {
+
+ show: false
+ },
+ title: {
+ offsetCenter: ['0%', '-40%']
+ },
+ data: [{
+ value: 0,
+ name: ''
+ }]
+ }
+ ]
+};
+
+const timeUpdatedStatus = {
+ second: false,
+ minute: false,
+ hour: false
+}
+
+function updateSeries(time, series, type) {
+ let isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1);
+ if (isCritical && timeUpdatedStatus[type] === true) {
+ timeUpdatedStatus[type] = false;
+ series.data[0].value = 0
+ series.clockwise = true;
+ option.animationDurationUpdate = 0;
+ myChart.setOption(option, true);
+ }
+ series.data[0].value = time;
+ series.clockwise = true;
+ if (time === 0) {
+ timeUpdatedStatus[type] = true;
+ series.clockwise = false;
+ }
+}
+
+setInterval(function() {
+ let date = new Date();
+ let second = date.getSeconds();
+ let minute = date.getMinutes() + second / 60;
+ let hour = date.getHours() % 12 + minute / 60;
+
+ updateSeries(second, option.series[2], 'second');
+ updateSeries(minute, option.series[1], 'minute');
+ updateSeries(hour, option.series[0], 'hour');
+
+ option.animationDurationUpdate = 300;
+ myChart.setOption(option, true);
+ date = null;
+}, 1000);
\ No newline at end of file
diff --git a/public/data/gauge-grade.js b/public/data/gauge-grade.js
new file mode 100644
index 0000000..5a69551
--- /dev/null
+++ b/public/data/gauge-grade.js
@@ -0,0 +1,84 @@
+/*
+title: Gauge Grade chart
+titleCN: 等级划分仪表盘
+category: gauge
+difficulty: 4
+*/
+
+option = {
+ series: [{
+ type: 'gauge',
+ startAngle: 180,
+ endAngle: 0,
+ min: 0,
+ max: 1,
+ splitNumber: 8,
+ axisLine: {
+ lineStyle: {
+ width: 6,
+ color: [
+ [0.25, '#FF6E76'],
+ [0.5, '#FDDD60'],
+ [0.75, '#58D9F9'],
+ [1, '#7CFFB2'],
+ ]
+ }
+ },
+ pointer: {
+ icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+ length: '12%',
+ width: 20,
+ offsetCenter: [0, '-60%'],
+ itemStyle: {
+ color: 'auto'
+ }
+ },
+ axisTick: {
+ length: 12,
+ lineStyle: {
+ color: 'auto',
+ width: 2
+ }
+ },
+ splitLine: {
+ length: 20,
+ lineStyle: {
+ color: 'auto',
+ width: 5
+ }
+ },
+ axisLabel: {
+ color: '#464646',
+ fontSize: 20,
+ distance: -60,
+ 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 '差'
+ }
+ }
+ },
+ title: {
+ offsetCenter: [0, '-20%'],
+ fontSize: 30
+ },
+ detail: {
+ fontSize: 50,
+ offsetCenter: [0, '0%'],
+ valueAnimation: true,
+ formatter: function(value) {
+ return Math.round(value * 100) + '分';
+ },
+ color: 'auto'
+ },
+ data: [{
+ value: 0.70,
+ name: '成绩评定'
+ }]
+ }]
+};
\ No newline at end of file
diff --git a/public/data/gauge-level.js b/public/data/gauge-level.js
deleted file mode 100644
index 9d255f9..0000000
--- a/public/data/gauge-level.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
-title: Gauge level
-category: gauge
-titleCN: 分级仪表盘
-*/
-
-option = {
- tooltip: {
- formatter: '{b}{c}'
- },
- series: [{
- type: 'gauge',
- radius: '83%',
- center: ['50%', '60%'],
- startAngle: 180,
- endAngle: 0,
- tooltip: {
- show: false
- },
- detail: {
- show: false
- },
- axisLine: {
- lineStyle: {
- width: 5,
- color: [
- [0.2, '#FF6E76'],
- [0.5, '#FDDD60'],
- [0.8, '#58D9F9'],
- [1, '#7CFFB2'],
- ]
- }
- },
- axisLabel: {
- show: false
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- }, {
- type: 'gauge',
- radius: '80%',
- min: 0,
- max: 100,
- center: ['50%', '60%'],
- splitNumber: 10,
- startAngle: 180,
- endAngle: 0,
- data: [{
- value: 75,
- name: '完成率',
- }],
- title: {
- offsetCenter: ['0', '-60%'],
- fontSize: 40,
- fontWeight: 'bolder',
- },
- detail: {
- formatter: function(value) {
- return value + '%'
- },
- fontSize: 50,
- fontWeight: 'bolder',
- offsetCenter: ['0%', '-40%']
- },
- axisLine: {
- lineStyle: {
- width: 0,
- color: [
- [0.2, '#FF6E76'],
- [0.5, '#FDDD60'],
- [0.8, '#58D9F9'],
- [1, '#7CFFB2'],
- ]
- }
- },
- axisLabel: {
- color: '#464646',
- fontSize: 20,
- distance: -70,
- formatter: function(value) {
- if (value >= 80) {
- return '优'
- }
- else if (value >= 50) {
- return '中'
- }
- else if (value >= 20) {
- return '良'
- }
- else if (value >= 0) {
- return '差'
- }
- }
- },
- axisTick: {
- splitNumber: 10,
- show: true,
- lineStyle: {
- color: 'auto',
- width: 2
- },
- length: 15,
- },
- splitLine: {
- show: true,
- length: 20,
- lineStyle: {
- color: 'auto',
- width: 5
- }
- },
- itemStyle: {
- normal: {
- color: 'auto'
- }
- },
- pointer: {
- width: 10,
- length: '80%'
- }
- }]
-};
\ No newline at end of file
diff --git a/public/data/gauge-multi-title.js b/public/data/gauge-multi-title.js
new file mode 100644
index 0000000..800c1bb
--- /dev/null
+++ b/public/data/gauge-multi-title.js
@@ -0,0 +1,85 @@
+/*
+title: Gauge Multi Title chart
+titleCN: 多标题仪表盘
+category: gauge
+difficulty: 4
+*/
+
+option = {
+ series: [{
+ type: 'gauge',
+ anchor: {
+ show: true,
+ showAbove: true,
+ size: 18,
+ itemStyle: {
+ color: '#FAC858'
+ }
+ },
+ 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: '80%',
+ offsetCenter: [0, '8%']
+ },
+
+ progress: {
+ show: true,
+ overlap: true,
+ roundCap: true
+ },
+ axisLine: {
+ roundCap: true
+ },
+ data: [{
+ value: 20,
+ name: '完成率',
+ title: {
+ offsetCenter: ['-40%', '80%']
+ },
+ detail: {
+ offsetCenter: ['-40%', '95%']
+ }
+ },
+ {
+ value: 40,
+ name: '达标率',
+ title: {
+ offsetCenter: ['0%', '80%']
+ },
+ detail: {
+ offsetCenter: ['0%', '95%']
+ }
+ },
+ {
+ value: 60,
+ name: '优秀率',
+ title: {
+ offsetCenter: ['40%', '80%']
+ },
+ detail: {
+ offsetCenter: ['40%', '95%']
+ }
+ }
+ ],
+ title: {
+ fontSize: 14
+ },
+ detail: {
+ width: 40,
+ height: 14,
+ fontSize: 14,
+ color: '#fff',
+ backgroundColor: 'auto',
+ borderRadius: 3,
+ formatter: '{value}%'
+ },
+ }]
+};
+
+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;
+ myChart.setOption(option, true);
+}, 2000);
\ No newline at end of file
diff --git a/public/data/gauge-progress.js b/public/data/gauge-progress.js
new file mode 100644
index 0000000..0a79cad
--- /dev/null
+++ b/public/data/gauge-progress.js
@@ -0,0 +1,30 @@
+/*
+title: Gauge Basic progress chart
+titleCN: 基础仪表盘
+category: gauge
+difficulty: 2
+*/
+
+option = {
+ series: [{
+ type: 'gauge',
+ pointer: {
+ show: false,
+ },
+ progress: {
+ show: true,
+ },
+ data: [{
+ value: 20,
+ name: '完成率'
+ }],
+ detail: {
+ formatter: '{value}%'
+ },
+ }]
+};
+
+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
new file mode 100644
index 0000000..86c9ad5
--- /dev/null
+++ b/public/data/gauge-ring.js
@@ -0,0 +1,97 @@
+/*
+title: Gauge Ring chart
+titleCN: 得分环
+category: gauge
+difficulty: 5
+*/
+
+option = {
+ series: [{
+ type: 'gauge',
+ startAngle: 90,
+ endAngle: -270,
+ pointer: {
+ show: false,
+ },
+ progress: {
+ show: true,
+ overlap: false,
+ roundCap: true,
+ clip: false,
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "#464646"
+ }
+ },
+ axisLine: {
+
+ lineStyle: {
+ width: 40,
+ }
+ },
+ splitLine: {
+ show: false,
+ distance: 0,
+ length: 10,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ distance: 50,
+ },
+ data: [{
+ value: 20,
+ name: 'Perfect',
+ title: {
+ offsetCenter: ['0%', '-30%']
+ },
+ detail: {
+ offsetCenter: ['0%', '-20%']
+ }
+ },
+ {
+ value: 40,
+ name: 'Good',
+ title: {
+ offsetCenter: ['0%', '0%']
+ },
+ detail: {
+ offsetCenter: ['0%', '10%']
+ }
+ },
+ {
+ value: 60,
+ name: 'Commonly',
+ title: {
+ offsetCenter: ['0%', '30%']
+ },
+ detail: {
+ offsetCenter: ['0%', '40%']
+ }
+ }
+ ],
+ title: {
+ fontSize: 14
+ },
+ detail: {
+ width: 50,
+ height: 14,
+ fontSize: 14,
+ color: 'auto',
+ borderColor: 'auto',
+ borderRadius: 20,
+ borderWidth: 1,
+ formatter: '{value}%'
+ },
+ }]
+};
+
+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;
+ option.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
+ myChart.setOption(option, true);
+}, 2000);
diff --git a/public/data/gauge-simple.js b/public/data/gauge-simple.js
index 719a94b..a25d57a 100644
--- a/public/data/gauge-simple.js
+++ b/public/data/gauge-simple.js
@@ -1,109 +1,23 @@
/*
-title: Simple Gauge
+title: Gauge Basic chart
+titleCN: 基础仪表盘
category: gauge
-titleCN: 仪表盘简单示例
+difficulty: 1
*/
-var value = 70;
option = {
+ tooltip: {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
series: [{
- type: 'gauge',
- startAngle: 225,
- endAngle: -45,
- min: 0,
- max: 100,
- radius: '67%',
- detail: {
- offsetCenter: [0, '80%'],
- formatter: function(value) {
- return value
- },
- fontSize: 100,
- fontWeight: 800,
- },
- axisLine: {
- lineStyle: {
- color: '#999',
- }
- },
- axisLabel: {
- color: '#999',
- fontSize: 20,
- },
- axisTick: {
- show: false
- },
- splitLine: {
- length: 20,
- lineStyle: {
- color: '#999'
- }
- },
- itemStyle: {
- color: '#5470C6',
- },
- pointer: {
- width: 8,
- length: '70%'
- },
- markPoint: {
- animation: false,
- data: [{
- x: '50%',
- y: '50%',
- symbol: 'circle',
- symbolSize: 40,
- itemStyle: {
- color: '#5470C6',
- },
- }, {
- x: '50%',
- y: '50%',
- symbol: 'circle',
- symbolSize: 15,
- itemStyle: {
- color: '#fff'
- },
- }]
- },
- data: [{
- value: value,
- }]
+ name: 'Pressure',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}'
},
- {
- type: 'gauge',
- radius: '75%',
- startAngle: 225,
- endAngle: -45,
- min: 0,
- max: 100,
- title: {
- show: false
- },
- detail: {
- show: false
- },
- axisLine: {
- lineStyle: {
- width: 18,
- color: [
- [value / 100, '#5470C6'],
- [1, 'rgba(210,219,238,0.3)']
- ],
- }
- },
- axisLabel: {
- show: false
- },
- axisTick: {
- show: false
- },
- splitLine: {
- show: false
- },
- pointer: {
- show: false,
- },
- }
- ]
-}
\ No newline at end of file
+ data: [{
+ value: 50,
+ name: 'SCORE'
+ }]
+ }]
+};
diff --git a/public/data/gauge-speed-simple.js b/public/data/gauge-speed-simple.js
new file mode 100644
index 0000000..7fbccee
--- /dev/null
+++ b/public/data/gauge-speed-simple.js
@@ -0,0 +1,55 @@
+/*
+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 0b4cc48..6891b10 100644
--- a/public/data/gauge-speed.js
+++ b/public/data/gauge-speed.js
@@ -1,158 +1,92 @@
/*
-title: Gauge Speed
-category: gauge
+title: Gauge Speed chart
titleCN: 速度仪表盘
+category: gauge
+difficulty: 3
*/
-var value = 70;
-var color = new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [{
- offset: 0,
- color: "#58D9F9",
- },
- {
- offset: 1,
- color: "#4992FF",
- }
- ]
-);
option = {
- backgroundColor: '#fff',
series: [{
- type: 'gauge',
- startAngle: 180,
- endAngle: 0,
- min: 0,
- max: 100,
- radius: '60%',
- axisLine: {
- show: true,
- lineStyle: {
- color: [
- [1, '#999']
- ],
- width: 1,
- opacity: 1
- }
- },
- title: {
- show: false
- },
- detail: {
- backgroundColor: '#fff',
- borderColor: '#999',
- borderWidth: 2,
- width: '80%',
- borderRadius: 4,
- offsetCenter: [0, '50%'],
- formatter: function(value) {
- return '{value|' + value.toFixed(0) + '}{unit|km/h}';
+ 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
+ },
+ 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'
},
- rich: {
- value: {
- fontSize: 60,
- fontWeight: 'bolder',
- color: '#777'
- },
- unit: {
- fontSize: 20,
- color: '#999',
- padding: [0, 0, 15, 6]
- },
- }
- },
- axisLine: {
- show: false
- },
- axisTick: {
- length: 10,
- lineStyle: {
- color: '#999'
- }
- },
- splitLine: {
- length: 15,
- lineStyle: {
+ unit: {
+ fontSize: 20,
color: '#999',
- width: 3
- }
- },
- axisLabel: {
- color: '#999'
- },
- pointer: {
- width: 10,
- length: '70%'
- },
- itemStyle: {
- color: color,
- shadowColor: 'rgba(0,138,255,0.45)',
- shadowBlur: 10,
- shadowOffsetX: 2,
- shadowOffsetY: 2
- },
- markPoint: {
-
- data: [{
- x: "50%",
- y: "50%",
- symbol: 'circle',
- symbolSize: 8,
- itemStyle: {
- color: "#fff"
- },
- }]
- },
- data: [{
- value: value,
- }, ]
+ padding: [0, 0, -20, 10]
+ },
+ }
},
- {
- type: 'gauge',
- radius: '70%',
- startAngle: 180,
- endAngle: 0,
- min: 0,
- max: 100,
- title: {
- show: false
- },
- detail: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- width: 16,
- color: [
- [
- value / 100, color
- ],
- [
- 1, 'rgba(225,225,225,0.4)'
- ]
- ],
- }
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false
- },
- pointer: {
- show: false,
- },
- itemStyle: {
- normal: {
- color: '#54F200',
- }
- },
- }
- ]
-
-}
\ No newline at end of file
+ data: [{
+ value: 100,
+ }]
+ }]
+};
\ No newline at end of file
diff --git a/public/data/gauge-stage.js b/public/data/gauge-stage.js
new file mode 100644
index 0000000..dd91ccc
--- /dev/null
+++ b/public/data/gauge-stage.js
@@ -0,0 +1,60 @@
+/*
+title: Gauge Stage chart
+titleCN: 阶段仪表盘
+category: gauge
+difficulty: 3
+*/
+
+option = {
+ series: [{
+ type: 'gauge',
+ axisLine: {
+ lineStyle: {
+ width: 30,
+ color: [
+ [0.3, '#67e0e3'],
+ [0.7, '#37a2da'],
+ [1, '#fd666d']
+ ]
+ }
+ },
+ pointer: {
+ itemStyle: {
+ color: 'auto'
+ }
+ },
+ axisTick: {
+ distance: -30,
+ length: 8,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ splitLine: {
+ distance: -30,
+ length: 30,
+ lineStyle: {
+ color: '#fff',
+ width: 4
+ }
+ },
+ axisLabel: {
+ color: 'auto',
+ distance: 40,
+ fontSize: 20
+ },
+ detail: {
+ formatter: '{value} km/h',
+ color: 'auto'
+ },
+ data: [{
+ value: 70
+ }]
+ }]
+};
+
+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
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org