仪表盘 类 钟表 demo
用仪表盘做个 demo 玩玩
代码：
import { Pieces } from "./share/pieces";
/**
* 通过对仪表盘样式的整理
* 做个钟表 demo 验证掌握情况
* 文档：https://echarts.apache.org/zh/option.html#series-gauge.axisLine
* demo：https://echarts.apache.org/examples/zh/editor.html?c=gauge-stage
*/
export class ClockTick {
hour = 0;
minute = 0;
second = 0;
constructor(myChart) {
this.getTime();
myChart.setOption(this.getOptions());
this.doTick(myChart);
}
// 设置出值
getTime() {
let current = new Date();
// 秒针值
this.second = current.getSeconds() * (12 / 60);
// 分针值 + 秒针已走步数
this.minute = current.getMinutes() * (12 / 60) + (this.second / 60);
// 时针值 + 分针已走步数 + 秒针已走步数
this.hour = current.getHours();
this.hour > 12 && (this.hour -= 12);
this.hour = this.hour + (this.minute / 12);
}
/**
* 自增
*/
doTick(myChart) {
let self = this;
setInterval(function () {
self.calTime(self);
myChart.setOption({
series: [
{
data: self.getData([ self.hour, self.minute, self.second ]),
}
]
});
}, 1000);
}
calTime(self) {
// 秒针自增
self.second += 12 / 60;
if (self.second >= 12) {
self.second = 0;
}
// 分针自增
self.minute += 12 / 60 / 60
if (self.minute >= 12) {
self.minute = 0;
}
// 时针自增
self.hour += 12 / 60 / 60 / 60;
if (self.hour >= 12) {
self.hour = 0;
}
}
getData(arr) {
return [
{
value: arr[0],
itemStyle: { // 数据项的指针样式。
color: '#C9FF92', // 图形的颜色。
borderWidth: 10, // 描边线宽。为 0 时无描边。
borderColor: '#C9FF92',
}
},
{
value: arr[1],
itemStyle: { // 数据项的指针样式。
color: '#63A9FF', // 图形的颜色。
borderWidth: 5, // 描边线宽。为 0 时无描边。
borderColor: '#63A9FF',
}
},
{
value: arr[2],
itemStyle: { // 数据项的指针样式。
color: '#FFD385', // 图形的颜色。
borderWidth: 1, // 描边线宽。为 0 时无描边。
borderColor: '#FFD385',
}
},
];
}
getOptions() {
return {
series: [
{
type: 'gauge',
center: [ 400, 400 ], // 的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
radius: 240, // 仪表盘半径
startAngle: 90, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。默认 225
endAngle: -270, // 仪表盘结束角度。默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长。 默认 true
splitNumber: 12, // 刻度的分割段数。
min: 0, // 最小的数据值，映射到 minAngle。
max: 12, // 最大的数据值，映射到 maxAngle。
axisLine: { // 仪表盘轴线相关配置。
lineStyle: { // 仪表盘轴线样式。 { color , width , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
width: 30,
color: [
[ 0.166, 'red' ],
[ 0.332, 'orange' ],
[ 0.499, 'yellow' ],
[ 0.666, 'green' ],
[ 0.833, 'blue' ],
[ 1, 'purple' ],
], // 颜色区间设置
}
},
pointer: { // 仪表盘指针。
show: true, // 是否显示指针。
showAbove: true, // 指针是否显示在标题和仪表盘详情上方。
length: '65%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比。
width: 15, // 指针宽度。
},
anchor: { // 表盘中指针的固定点。跟仪表盘指针配置差不多
show: true,
size: 10,
showAbove: true, // 固定点是否显示在指针上面。
icon: 'circle', // ECharts 提供的标记类型包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
offsetCenter: [ 0, 0 ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: '#fff'
}
},
splitLine: { // 分隔线样式。
show: true, // 是否显示分隔线。
distance: -30, // 分隔线与轴线的距离。
length: 35, // 分隔线线长。支持相对半径的百分比。
lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: '#ddd',
width: 4
}
},
axisTick: { // 刻度样式。
show: true, // 是否显示刻度。
splitNumber: 5, // 分隔线之间分割的刻度数。默认 5
distance: -30, // 分隔线与轴线的距离。
length: 8, // 刻度线长。支持相对半径的百分比。
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
fontStyle: 'normal', // 文字字体的风格。 normal|italic|oblique
fontWeight: 'bold', // 文字字体的粗细。 normal|bold|bolder|lighter
distance: 45, // 标签与刻度线的距离。
fontSize: 30, // 字体样式相关
formatter: function (value) {
if (value) { // 0 与 12 重合，过滤掉 0
return value;
}
},
},
detail: { // 仪表盘详情，用于显示数据。
show: false, // 是否显示详情
},
data: this.getData([ this.hour, this.minute, this.second ]),
// data: [
// {
// // 时
// value: this.hour,
// itemStyle: { // 数据项的指针样式。
// color: '#C9FF92', // 图形的颜色。
// borderWidth: 10, // 描边线宽。为 0 时无描边。
// borderColor: '#C9FF92',
// }
// }, {
// // '分',
// value: this.minute,
// itemStyle: { // 数据项的指针样式。
// color: '#63A9FF', // 图形的颜色。
// borderWidth: 5, // 描边线宽。为 0 时无描边。
// borderColor: '#63A9FF',
// }
// }, {
// // '秒',
// value: this.second,
// itemStyle: { // 数据项的指针样式。
// color: '#FFD385', // 图形的颜色。
// borderWidth: 1, // 描边线宽。为 0 时无描边。
// borderColor: '#FFD385',
// }
// }
// ]
}
]
};
}
}
bug 的一点是：指针从 60 到 0 时，反方向归零，而不是直接下一步到0 ...
