🌟 关于我 🌟
你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。同时也虚心求取前辈们的指点， 我会努力，努力，在努力！！！！
💼 服务承接 💼
如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。
欢迎关注微信公众号：自学PS转前端
UI设计图的页面样式如下：
业务：值低于30%的时候仪表盘渐变为偏红色，高于30%仪表盘渐变色为偏蓝色
1.首先搭建简易版的仪表盘
①安装echarts插件
npm install echarts --save
②在项目中引用
import * as echarts from 'echarts';
③准备好Dom
<div ref="chart" style="width:220px;height:220px;"></div>
④初始化echarts实例
initChart(val){
var percent = 82.55; //百分数
const chartDom = this.$refs.chart;
this.myChart = echarts.init(chartDom);
var option = {
series:[
{
type: 'gauge',
radius:'80%',
progress: {
show: true,
width: 18,
roundCap: true
},
color: 'rgba(61, 127, 255, 1)',
axisLine: {
lineStyle: {
width: 18
},
roundCap: true
},
axisTick: {
show: false,
distance: -25,
length: 5,
splitNumber:3
},
splitLine: {
show:false,
length: 10,
distance: -30,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: -25,
color: '#999',
fontSize: 20,
show:false
},
anchor: {
show: false,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: true,
offsetCenter: ['0', '85%'],
fontSize: 20
},
pointer: {
show: false
},
detail: {
formatter: '{value}%',
},
data: [
{
value: percent,
}
]
}
]
};
this.myChart.setOption(option);
},
⑤调整仪表盘中间值的位置与样式
detail: {
valueAnimation: true,
formatter: '{a|{value}}\n{b|%}',
offsetCenter: [0, '10%'],
rich:{
a: {
color: color,
fontSize: 36,
fontWeight: 'bolder'
},
b: {
color: color,
fontSize: 20
}
}
},
⑥添加标题，并调整标题样式
title: {
"x": '48%',
"y": '50%',
textAlign: "center",
top: '78%',//字体的位置
'text': 'xx材料',
"textStyle": {
"fontWeight": 'normal',
color: 'rgba(61, 127, 255, 1)',
"fontSize": 20
}
},
⑦调整渐变色
封装一个改变颜色的函数
calculateDot(data) {
if (data <= 30) {
color_percent1 = 'rgba(7, 186, 116, 1)'
color_percent2 = 'rgba(255, 190, 68, 1)'
color_percent3 = 'rgba(224, 32, 32, 1)'
color = 'rgba(212, 48, 48, 1)'
}else if (data > 30) {
color_percent1 = 'rgba(102, 255, 255, 1)'
color_percent2 = 'rgba(89, 216, 255, 1)'
color_percent3 = 'rgba(61, 127, 255, 1)'
color = 'rgba(42, 130, 228, 1)'
}
}
将颜色放到图表里
{
type: 'gauge',
radius:'80%',
progress: {
show: true,
width: 18,
roundCap: true
},
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: color_percent1 // 0% 处的颜色
},
{
offset: 0.5,
color: color_percent2 // 0% 处的颜色
},
{
offset: 1,
color: color_percent3 // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}, 'none'],
axisLine: {
lineStyle: {
width: 18
},
roundCap: true
},
axisTick: {
show: false,
distance: -25,
length: 5,
splitNumber:3
},
splitLine: {
show:false,
length: 10,
distance: -30,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: -25,
color: '#999',
fontSize: 20,
show:false
},
anchor: {
show: false,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: true,
offsetCenter: ['0', '85%'],
fontSize: 20
},
pointer: {
show: false
},
detail: {
valueAnimation: true,
formatter: '{a|{value}}\n{b|%}',
offsetCenter: [0, '10%'],
rich:{
a: {
color: color,
fontSize: 36,
fontWeight: 'bolder'
},
b: {
color: color,
fontSize: 20
}
}
},
data: [
{
value: percent,
}
]
}
⑧在原本的仪表盘外再加一圈刻度的样式
{
name: '刻度',
type: 'gauge',
radius: '106%',
splitNumber: 10, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
show: false
},//仪表盘轴线
axisLabel: {
show: true,
color:'#fff',
distance:30
},//刻度标签。
axisTick: {
show: true,
lineStyle: {
width: 1,
color: [
[0, color_percent3],
[0.5, color_percent2],
[1, color_percent1],
],
},
length: -4
},//刻度样式
splitLine: {
show: true,
length: -8,
lineStyle: {
color: 'rgba(61, 127, 255, 1)',
width: 1
},
},//分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
⑨给外圈的刻度添加渐变色
splitLine: {
show: true,
length: -8,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: color_percent3 // 0% 处的颜色
},
{
offset: 0.5, color: color_percent2 // 0% 处的颜色
},
{
offset: 1, color: color_percent1 // 100% 处的颜色
}
],
global: false // 缺省为 false
},
width: 1
},
},
这样就OK了，再展示一下变化颜色的
