最近项目上要写一个仪表盘,这是效果图,个人觉得还是挺好看的
封装的组件
<template>
<div>
<div class="left" :ref="id"></div>
</div>
</template>
<script>
export default {
data() {
return {
myChart: null,
max:0,
good:0,
target:0
};
},
mounted() {
this.$nextTick(()=>{
this.initQuanProgress(this.id);
})
},
props:{
id:{
type:String
},
text:{
type:String
},
showData:{
type:Object,
}
},
watch: {
showData:{
deep: true,
handler(newVal, oldValue) {
console.log(newVal);
this.max = newVal.max;
this.good = newVal.good;
this.target = newVal.target;
this.$nextTick(()=> {
this.initQuanProgress(this.id)
})
}
}
},
created() {
this.$nextTick(()=> {
this.initQuanProgress(this.id)
})
},
methods: {
initQuanProgress: function (id) {
if (!this.$refs[id]) return;
this.myChart = this.$echarts.init(this.$refs[id]);
this.myChart.clear()
this.setQuanProgress();
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize();
}
});
},
setQuanProgress() {
let option = {
title: {
text:this.text,
left: "center",
y: "65%",
textStyle: {
fontSize: 12,
fontStyle: "normal",
fontWeight: "bolder",
color: "#000",
},
},
series: [
{
type: "gauge", //类型
radius: "80%", //大小
center: ["50%", "48%"],
startAngle: 220, //弧度
endAngle: -40, //结束弧度
min: 0, //最大值
max:this.max, //最大值
splitNumber: 10, //多少个大的刻度
itemStyle: {
color: "#56e033", //第一项数据的默认颜色
},
progress: {
show: true, //显示进度
width: 10, //当前进度条的宽度值
roundCap: true, //是否是圆角
},
pointer: {//指针项
show: true, //是否显示指针
offsetCenter: [2, -25], //指针的位置
showAbove: true,
length: "20%", //指针的长度
width: 1, //指针的宽度
keepAspect: false,
},
axisLine: {//主轴
lineStyle: {//主轴线的样式
width: 10, //最底下默认线的宽度
},
roundCap: true, //主轴圆角样式
},
axisTick: {//小刻度轴
distance: -20, //小刻度离进度条的距离
splitNumber: 5, //每个大刻度显示几个小刻度
length: 1, //小刻度轴的长度
lineStyle: {//小刻度轴线的样式
width: 1, //小刻度线的宽度
color: "#999", //小刻度线的颜色
},
},
splitLine: {//大刻度轴
distance: -22, //大刻度离进度条的距离
length: 3, //大刻度的长度
lineStyle: {//大刻度线的样式
width: 1, //大刻度线的宽度
color: "#999", //大刻度线的颜色
},
},
axisLabel: {//大刻度数字
//show:true,//是否显示数字
distance: -10, //大刻度数字离大刻度的距离
color: "#999", //大刻度数字的颜色
fontSize: 10, //大刻度数字的字体大小
formatter: (value)=> {//过滤器只显示最大最小值
if (value == 0 || value == this.max ) {
return value;
}
},
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 20,
barGap: "-100%",
borderRadius: 8,
offsetCenter: [0, "0%"],
fontSize: 14,//字体样式
fontWeight: "bolder",//加粗
//formatter: "{value}",//中间的数字
color: "#000",//颜色
formatter: (value) =>{
if(value == '0.01' && this.target == 0){
return '--'
}else{
return parseInt(value)
}
}
},
data: [
{
value:this.good + '' === '0' ? '0.01' : this.good + '',
},
],
},
{
type: "gauge",
center: ["50%", "48%"],
radius: "80%",
startAngle: 220,
endAngle: -40,
min: 0,
max:this.max,
itemStyle: {
color: "#219cf9",
},
progress: {
show: true,
width: 10,
roundCap: true,
},
pointer: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
detail: {
show: false,
},
data: [
{
value:this.target + '' === '0' ? '0.1' : this.target + '',
},
],
},
],
};
this.myChart.setOption(option);
},
},
};
</script>
<style lang="less" scoped>
.left{
width: 125px;
height: 115px;
}
</style>
使用
<gauge-chart :id="'bbb'" :showData="pmobj" :text="'μg/m³'"></gauge-chart>
<gauge-chart :id="'ccc'" :showData="othreeobj" :text="'μg/m³'"></gauge-chart>
