方向盘的动画特效
const options = {
// backgroundColor: '#0E1327', // 画布背景
title: [ // 标题
{
text: '当前功率(KW)',
left: 'center',
top: '64%',
textStyle: {
color: '#999',
fontSize: 12,
// fontFamily: 'cuhei',
fontWeight: 400,
}
}
],
series: [ // 圆环的色调
{
type: 'gauge',
startAngle: 180, // 半圆的设置
endAngle: 0, // 半圆的设置
radius: '66',
// 底部进度条 - 圆弧 添加轴线背景
axisLine: {
show: true,
roundCap: true,
// 底部圆弧的背景 start
lineStyle: {
width: 15,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#04B138',
},
{
offset: 0.5,
color: '#378CF1',
},
{
offset: 1,
color: '#378CF1',
},
]),
],
[1, '#378CF1'],
],
// color: [[0.2, '#378CF1'],[0.8, '#378CF1'],[1, '#02B331']],
// color: [[1, '#3383a2']],
},
// 底部圆弧的背景 end
show: true,
width: 15, // 圆弧的宽度
// itemStyle: {
// color: {
// type: 'linear',
// x: 1, // 从右侧开始
// y: 0.5, // 垂直居中
// x2: 0, // 到左侧结束
// y2: 0.5, // 垂直居中
// colorStops: [
// // {offset: 0, color: '#378CF1'}, // 180度(左侧) - 蓝色
// {offset: 0, color: 'red'}, // 180度(左侧) - 蓝色
// {offset: 0.5, color: '#378CF1'}, // 90度(顶部) - 蓝色
// {offset: 1, color: '#02B331'}, // 0度(右侧) - 绿色
// ]
// },
// borderWidth: '2',
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// opacity: 1
// }
},
// 顶部进度条 - 圆弧
// progress: {
// roundCap: true,
// show: true,
// width: 15, // 圆弧的宽度
// itemStyle: {
// color: {
// type: 'linear',
// x: 1, // 从右侧开始
// y: 0.5, // 垂直居中
// x2: 0, // 到左侧结束
// y2: 0.5, // 垂直居中
// colorStops: [{
// offset: 0,
// color: '#378CF1'
// }, // 180度(左侧) - 蓝色
// {
// offset: 0.5,
// color: '#378CF1'
// }, // 90度(顶部) - 蓝色
// {
// offset: 1,
// color: '#02B331'
// }, // 0度(右侧) - 绿色
// ]
// },
// borderWidth: '2',
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// opacity: 1
// }
// },
radius: '70', // 圆的半径
markPoint: { // 针中心的圆
// 仪表盘指针圆
animation: false,
silent: true,
data: [{
x: '50%',
y: '50%',
symbol: 'circle',
symbolSize: 31,
itemStyle: {
color: '#06B040',
},
}, {
x: '50%',
y: '50%',
symbol: 'circle',
symbolSize: 14,
itemStyle: {
color: 'white'
},
}],
},
pointer: { // 指针
// 仪表盘指针
icon: 'path://M 3 0 L 3 45 L 5 45 L 5 0 Z',
width: 5,
length: "50%",
itemStyle: {
color: '#00B42A'
},
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 0, y2: 1,
// colorStops: [
// {offset: 0, color: '#4AFF80'},
// {offset: 0.5, color: '#06B040'},
// {offset: 1, color: '#047D2E'}
// ]
// },
// borderType: 'solid',
// borderColor: '#06B040',
// borderWidth: 0.5,
// borderRadius: 2 // 添加圆角效果
// }
},
axisTick: { // 齿轮
distance: 0,
length: 5,
lineStyle: {
color: 'auto',
width: 0
}
},
splitLine: { // 圆环内部刻度
distance: 0,
length: 15,
lineStyle: {
color: '#2B94C8',
width: 0
}
},
axisLabel: { // 内部刻度对应的数值
show: false, // 直接隐藏所有轴标签
color: '#3488db',
distance: 12,
fontSize: 12,
},
detail: {
offsetCenter: ['0%', '78%'], // 数值的底部位置
valueAnimation: true,
formatter: '{value}',
color: '#111',
fontSize: 18 // 添加此行设置字体大小（单位：px）
},
data: [{
value: 50,
}]
},
]
};
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。