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/11/04 08:34:23 UTC
[incubator-echarts-examples] branch next updated: add gauge-car
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 2338153 add gauge-car example
2338153 is described below
commit 23381536ea0c0102bde3a81d37713a013b3b843c
Author: Wdingding <wa...@gmail.com>
AuthorDate: Wed Nov 4 16:34:00 2020 +0800
add gauge-car example
---
public/data/gauge-car.js | 644 ++++++++++++++++++++++++++++++++++++-----------
1 file changed, 499 insertions(+), 145 deletions(-)
diff --git a/public/data/gauge-car.js b/public/data/gauge-car.js
index 8068ef4..6d40025 100644
--- a/public/data/gauge-car.js
+++ b/public/data/gauge-car.js
@@ -2,228 +2,582 @@
title: Gauge Car
category: gauge
titleCN: Gauge Car
+difficulty: 8
*/
option = {
+ backgroundColor: '#000',
tooltip: {
- formatter: "{a} <br/>{c} {b}"
+ formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
- show: true,
feature: {
- restore: {show: true},
- saveAsImage: {show: true}
+ restore: {},
+ saveAsImage: {}
}
},
- series : [
+ series: [
+ // left
+ // 0
{
- name: '速度',
+ name: 'PORSCHE',
type: 'gauge',
- z: 3,
- min: 0,
- max: 220,
- splitNumber: 11,
- radius: '50%',
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- width: 10
+ min: -200,
+ max: 250,
+ startAngle: -30,
+ endAngle: -315,
+ splitNumber: 9,
+ radius: '35%',
+ center: ['21%', '55%'],
+ axisLine: {
+ lineStyle: {
+ color: [
+ [1, '#AE96A6']
+ ],
}
},
- axisTick: { // 坐标轴小标记
- length: 15, // 属性length控制线长
- lineStyle: { // 属性lineStyle控制线条样式
- color: 'auto'
- }
+ splitLine: {
+ show: false
},
- splitLine: { // 分隔线
- length: 20, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- color: 'auto'
- }
+ axisTick: {
+ show: false
},
axisLabel: {
- backgroundColor: 'auto',
- borderRadius: 2,
- color: '#eee',
- padding: 3,
- textShadowBlur: 2,
- textShadowOffsetX: 1,
- textShadowOffsetY: 1,
- textShadowColor: '#222'
+ show: false
},
- title: {
- // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- fontWeight: 'bolder',
- fontSize: 20,
- fontStyle: 'italic'
+ anchor: {},
+ pointer: {
+ show: false
},
detail: {
- // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- formatter: function (value) {
- value = (value + '').split('.');
- value.length < 2 && (value.push('00'));
- return ('00' + value[0]).slice(-2)
- + '.' + (value[1] + '00').slice(0, 2);
- },
- fontWeight: 'bolder',
- borderRadius: 3,
- backgroundColor: '#444',
- borderColor: '#aaa',
- shadowBlur: 5,
- shadowColor: '#333',
- shadowOffsetX: 0,
- shadowOffsetY: 3,
- borderWidth: 2,
- textBorderColor: '#000',
- textBorderWidth: 2,
- textShadowBlur: 2,
- textShadowColor: '#fff',
- textShadowOffsetX: 0,
- textShadowOffsetY: 0,
- fontFamily: 'Arial',
- width: 100,
- color: '#eee',
- rich: {}
- },
- data: [{value: 40, name: 'km/h'}]
+ show: false
+ },
+ title: {
+ fontSize: 12,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff',
+ offsetCenter: [0, '-60%']
+ },
+ progress: {
+ show: true,
+ width: 3,
+ itemStyle: {
+ color: '#fff'
+ }
+ },
+ data: [{
+ value: 250,
+ name: 'km/h'
+ }]
},
+ // 1
{
- name: '转速',
+ name: 'PORSCHE',
type: 'gauge',
- center: ['20%', '55%'], // 默认全局居中
- radius: '35%',
min: 0,
- max: 7,
- endAngle: 45,
- splitNumber: 7,
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- width: 8
+ max: 250,
+ startAngle: -140,
+ endAngle: -305,
+ splitNumber: 5,
+ radius: '35%',
+ center: ['21%', '55%'],
+ axisLine: {
+ lineStyle: {
+ color: [
+ [1, '#AE96A6']
+ ],
}
},
- axisTick: { // 坐标轴小标记
- length: 12, // 属性length控制线长
- lineStyle: { // 属性lineStyle控制线条样式
- color: 'auto'
+ splitLine: {
+ distance: -7,
+ length: 12,
+ lineStyle: {
+ color: '#fff',
+ width: 4
}
},
- splitLine: { // 分隔线
- length: 20, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- color: 'auto'
+ axisTick: {
+ distance: -8,
+ length: 8,
+ lineStyle: {
+ color: '#fff',
+ width: 2
}
},
+ axisLabel: {
+ distance: 20,
+ fontSize: 20,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff'
+ },
+ anchor: {},
pointer: {
- width: 5
+ icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+ width: 5,
+ length: '40%',
+ offsetCenter: [0, '-58%'],
+ itemStyle: {
+ color: '#f00',
+ shadowColor: 'rgba(255, 0, 0)',
+ shadowBlur: 5,
+ shadowOffsetY: 2
+ }
},
title: {
- offsetCenter: [0, '-30%'], // x, y，单位px
+ color: '#fff',
+ fontSize: 15,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ offsetCenter: [0, 0]
},
detail: {
- // 其余属性默认使用全局文本样式，详见TEXTSTYLE
- fontWeight: 'bolder'
+ show: false
},
- data: [{value: 1.5, name: 'x1000 r/min'}]
+ data: [{
+ value: 0,
+ name: '当前位置：\n \n 中科路'
+ }]
},
+
+ // middle
+ // 2
{
- name: '油表',
+ name: 'PORSCHE',
type: 'gauge',
- center: ['77%', '50%'], // 默认全局居中
- radius: '25%',
min: 0,
- max: 2,
- startAngle: 135,
- endAngle: 45,
- splitNumber: 2,
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- width: 8
+ max: 8,
+ z: 10,
+ startAngle: 210,
+ endAngle: -30,
+ splitNumber: 8,
+ radius: '50%',
+ center: ['50%', '50%'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 0,
+ color: [
+ [0.825, '#fff'],
+ [1, '#f00']
+ ]
}
},
- axisTick: { // 坐标轴小标记
- splitNumber: 5,
- length: 10, // 属性length控制线长
- lineStyle: { // 属性lineStyle控制线条样式
- color: 'auto'
+ splitLine: {
+ distance: 20,
+ length: 15,
+ lineStyle: {
+ color: 'auto',
+ width: 4,
+ shadowColor: 'rgba(255, 255, 255, 0.5)',
+ shadowBlur: 15,
+ shadowOffsetY: -10
+ }
+ },
+ axisTick: {
+ distance: 20,
+ length: 8,
+ lineStyle: {
+ color: 'auto',
+ width: 2,
+ shadowColor: 'rgba(255, 255, 255)',
+ shadowBlur: 10,
+ shadowOffsetY: -10,
}
},
axisLabel: {
- formatter: function (v){
- switch (v + '') {
- case '0' : return 'E';
- case '1' : return 'Gas';
- case '2' : return 'F';
- }
+ distance: 10,
+ fontSize: 35,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff'
+ },
+ anchor: {},
+ pointer: {
+ icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
+ width: 10,
+ offsetCenter: [0, '-10%'],
+ length: '75%',
+ itemStyle: {
+ color: '#f00',
+ shadowColor: 'rgba(255, 0, 0)',
+ shadowBlur: 5,
+ shadowOffsetY: 3
}
},
- splitLine: { // 分隔线
- length: 15, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- color: 'auto'
+ title: {
+ color: '#fff',
+ fontSize: 12,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ offsetCenter: [0, '-50%']
+ },
+ data: [{
+ value: 0.6,
+ name: '1/min x 1000'
+ }],
+ detail: {
+ show: false
+ }
+ },
+ // 3
+ {
+ name: 'PORSCHE',
+ type: 'gauge',
+ min: 0,
+ max: 8,
+ z: 10,
+ splitNumber: 8,
+ radius: '50%',
+ axisLine: {
+ lineStyle: {
+ width: 14,
+ color: [
+ [1, '#000']
+ ],
}
},
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ anchor: {},
pointer: {
- width: 2
+ show: false
},
title: {
show: false
},
detail: {
+ offsetCenter: ['25%', '50%'],
+ formatter: '{a|{value}}{b|km/h}',
+ rich: {
+ a: {
+ fontSize: 60,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff',
+ align: 'center',
+ padding: [0, 5, 0, 0]
+ },
+ b: {
+ fontSize: 14,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff',
+ rotate: 30,
+ padding: [0, 0, 20, 0]
+ }
+ }
+ },
+ // value is speed
+ data: [{
+ value: 0,
+ name: ''
+ }]
+ },
+ // right
+ // 4
+ {
+ name: 'PORSCHE',
+ type: 'gauge',
+ min: 0,
+ max: 8,
+ startAngle: 135,
+ endAngle: -150,
+ splitNumber: 8,
+ radius: '35%',
+ center: ['79%', '55%'],
+ axisLine: {
+ lineStyle: {
+ color: [
+ [1, '#AE96A6']
+ ],
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
show: false
},
- data: [{value: 0.5, name: 'gas'}]
+ axisLabel: {
+ show: false
+ },
+ anchor: {},
+ pointer: {
+ show: false
+ },
+ title: {},
+ detail: {
+ offsetCenter: ['-15%', 0],
+ formatter: [
+ '{a| 00:00}',
+ '{a|行驶时间 0:00}{b| h}',
+ '{a|行驶距离 0.0}{b| km}',
+ '{a|平均耗能 ---}{b| 1/100km}',
+ '{a|平均速度 ---}{b| km/h}'
+ ].join('\n'),
+ rich: {
+ a: {
+ fontSize: 14,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ lineHeight: 22,
+ color: '#fff',
+ align: 'left'
+ },
+ b: {
+ fontWeight: 600,
+ fontFamily: "Arial",
+ lineHeight: 22,
+ color: '#fff',
+ align: 'left'
+ }
+ }
+ },
+ progress: {
+ show: true,
+ width: 3,
+ itemStyle: {
+ color: '#fff'
+ }
+ },
+ data: [{
+ value: 250,
+ name: ''
+ }]
},
+ // 5
{
- name: '水表',
+ name: 'PORSCHE',
type: 'gauge',
- center: ['77%', '50%'], // 默认全局居中
- radius: '25%',
min: 0,
- max: 2,
- startAngle: 315,
- endAngle: 225,
+ max: 1,
+ startAngle: 125,
+ endAngle: 55,
splitNumber: 2,
- axisLine: { // 坐标轴线
- lineStyle: { // 属性lineStyle控制线条样式
- width: 8
+ radius: '34%',
+ center: ['79%', '55.3%'],
+ axisLine: {
+ lineStyle: {
+ width: 9,
+ color: [
+ [0.15, '#f00'],
+ [1, 'rgba(255, 0, 0, 0)']
+ ],
}
},
- axisTick: { // 坐标轴小标记
- show: false
+ splitLine: {
+ distance: -14,
+ length: 16,
+ lineStyle: {
+ color: '#fff',
+ width: 4
+ }
+ },
+ axisTick: {
+ distance: -14,
+ length: 10,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
},
axisLabel: {
- formatter: function(v){
- switch (v + '') {
- case '0' : return 'H';
- case '1' : return 'Water';
- case '2' : return 'C';
+ distance: 20,
+ fontSize: 20,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff',
+ formatter: function(value) {
+ if (value === 0.5) {
+ return '2/4';
+ }
+ if (value === 1) {
+ return '4/4';
}
+ return value;
}
},
- splitLine: { // 分隔线
- length: 15, // 属性length控制线长
- lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
- color: 'auto'
+ progress: {
+ show: true,
+ width: 5,
+ itemStyle: {
+ color: '#fff'
}
},
- pointer: {
- width:2
+ anchor: {
+ show: true,
+ itemStyle: {},
+ offsetCenter: ['-22%', '-57%'],
+ size: 18,
+ icon: 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.8 [...]
},
- title: {
+ pointer: {
show: false
},
+ title: {},
+ detail: {
+ offsetCenter: ['10%', '-56%'],
+ formatter: '{a|831}{b| km}',
+ rich: {
+ a: {
+ fontSize: 15,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff'
+ },
+ b: {
+ fontWeight: 600,
+ fontFamily: "Arial",
+ color: '#fff'
+ }
+ }
+ },
+ data: [{
+ value: 0.85,
+ name: ''
+ }]
+ },
+ // 6
+ {
+ name: 'PORSCHE',
+ type: 'gauge',
+ min: -120,
+ max: -60,
+ startAngle: 230,
+ endAngle: 310,
+ clockwise: false,
+ splitNumber: 2,
+ radius: '35%',
+ center: ['79%', '55%'],
+ axisLine: {
+ lineStyle: {
+ color: [
+ [1, '#AE96A6'],
+ [1.1, '#f00']
+ ],
+ }
+ },
+ splitLine: {
+ distance: -8,
+ length: 12,
+ lineStyle: {
+ color: '#fff',
+ width: 4
+ }
+ },
+ axisTick: {
+ splitNumber: 3,
+ length: 8,
+ distance: -8,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ axisLabel: {
+ distance: 20,
+ fontSize: 20,
+ fontWeight: 800,
+ fontFamily: "Arial",
+ color: '#fff',
+ formatter: function(value) {
+ return -value
+ }
+ },
+ anchor: {
+ show: true,
+ itemStyle: {},
+ offsetCenter: [0, '55%'],
+ size: 20,
+ icon: 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2 [...]
+ },
+ 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: 15,
+ length: '4',
+ offsetCenter: [0, '-90%'],
+ itemStyle: {
+ color: '#f00'
+ }
+ },
+ title: {},
detail: {
show: false
},
- data: [{value: 0.5, name: 'gas'}]
+ data: [{
+ value: -120,
+ name: ''
+ }]
}
]
};
-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,true);
-},2000);
\ No newline at end of file
+myChart.setOption(option, true);
+
+function generateRandom(lower, upper, fixed) {
+ return (Math.random() * (upper - lower + 1) + lower).toFixed(fixed) - 0;
+}
+
+function createFormatter(moveTime, moveDistance, avgEnergy, avgSpeed) {
+ console.log();
+ const date = new Date();
+ let hour = date.getHours();
+ let minite = date.getMinutes()
+ let time = (hour < 10 ? '0' + hour : hour) + ':' + (minite < 10 ? '0' + minite : minite);
+ moveTime < 10 && (moveTime = '0' + moveTime);
+ return [
+ `{a| ${time}}`,
+ `{a|行驶时间 ${'0:' + moveTime}}{b| h}`,
+ `{a|行驶距离 ${moveDistance}}{b| km}`,
+ `{a|平均耗能 ${avgEnergy}}{b| 1/100km}`,
+ `{a|平均速度 ${avgSpeed}}{b| km/h}`
+ ].join('\n');
+}
+
+const interval = 2;
+let moveTime = 0;
+let moveDistance = 0;
+let avgEnergy = 0;
+let avgSpeed = 0;
+let minite = 0;
+setInterval(function() {
+ let speed = generateRandom(70, 80, 0);
+ option.series[1].data[0].value = speed;
+ option.series[3].data[0].value = speed;
+ let rotatingSpeed = generateRandom(2.5, 3, 1);
+ option.series[2].data[0].value = rotatingSpeed;
+ option.series[6].data[0].value = -generateRandom(105, 115, 0);
+
+ moveTime += interval;
+ if (moveTime % 60 === 0) {
+ minite++;
+ if (minite > 30) {
+ moveTime = 2;
+ moveDistance = 0;
+ avgEnergy = 0;
+ avgSpeed = 0;
+ minite = 0;
+ // oil
+ if (option.series[5].data[0].value > 0.3) {
+ option.series[5].data[0].value -= 0.1;
+ } else {
+ option.series[5].data[0].value = 1;
+ }
+ }
+ }
+ // mock value
+ moveDistance += interval / 3600 * speed;
+ avgSpeed = moveDistance / (moveTime / 3600);
+ avgEnergy = 85 * avgSpeed;
+ option.series[4].detail.formatter = createFormatter(minite, moveDistance.toFixed(1), avgEnergy.toFixed(0), avgSpeed.toFixed(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