本文实例为大家分享了vue-cli3+echarts实现封装一个渐变色仪表盘组件，供大家参考，具体内容如下
效果预览
思路
1、使用两个仪表盘叠加，起始角度一样，底部仪表盘结束角度固定不变
2、通过props传入数据
3、计算在上层的仪表盘的结束角度并赋值
代码
<template>
<div class="gauge">
<div class="gauge__bottom" ref="bottomGauge"></div>
<div class="gauge__top" ref="topGauge"></div>
<div class="gauge__label">数据占比</div>
<div class="gauge__title">{{ this.gaugeData.gaugeTitle }}</div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "gauge",
props: ["gaugeData"],//传入的数据
data() {
return {
bottomOption: {
series: [
{
name: "",
type: "gauge",
startAngle: "225",
endAngle: "-45",
data: [{ value: 100, name: "" }],
splitNumber: 10,
detail: {
show: false,
},
splitLine: {
show: false,
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: { show: false },
axisLine: {
lineStyle: {
width: 10,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
// 起始颜色
color: "#707089",
},
{
offset: 1,
// 结束颜色
color: "#707089",
},
]),
],
],
},
},
},
],
},
topOption: {
series: [
{
name: "业务指标",
type: "gauge",
startAngle: "225",
endAngle: "",
detail: {
formatter: "{value}%",
color: "#01F9FF",
fontSize: 18,
fontFamily: "ZhenyanGB-Regular",
offsetCenter: [0, 0],
},
data: [{ value: "", name: "" }],
splitNumber: 10,
splitLine: {
show: false,
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: { show: false },
axisLine: {
lineStyle: {
width: 10,
color: "",
},
},
},
],
},
};
},
mounted() {
this.getTopGauge();
this.getBottomGauge();
},
methods: {
getTopGauge() {
const chart = this.$refs.topGauge;
if (chart) {
const myChart = this.$echarts.init(chart, null, { renderer: "svg" });
this.$once("hook:beforeDestroy", function () {
echarts.dispose(myChart);
});
this.topOption.series[0].data[0].value = this.gaugeData.gaugePercent;
this.topOption.series[0].axisLine.lineStyle.color = this.gaugeData.guageColor;
let tmp = 225 - 270 * (this.gaugeData.gaugePercent / 100);
this.topOption.series[0].endAngle = tmp;
const option = this.topOption;
myChart.setOption(option);
}
},
getBottomGauge() {
const chart = this.$refs.bottomGauge;
if (chart) {
const myChart = this.$echarts.init(chart, null, { renderer: "svg" });
this.$once("hook:beforeDestroy", function () {
echarts.dispose(myChart);
});
const option = this.bottomOption;
myChart.setOption(option);
}
},
},
};
</script>
<style lang="less">
.gauge {
width: 150px;
height: 165px;
position: relative;
&__top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
}
&__bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
}
&__label {
position: absolute;
height: 21px;
width: 64px;
background: #0547c9;
border: 1px solid #1e92ff;
border-radius: 11.5px;
border-radius: 11.5px;
bottom: 35px;
left: 50%;
transform: translate(-50%, 0);
font-family: PingFangSC-Regular;
font-size: 8px;
color: #ffffff;
text-align: center;
line-height: 21px;
}
&__title {
font-family: PingFangSC-Medium;
font-size: 14px;
color: #52f9cb;
text-align: center;
position: absolute;
bottom: 5px;
left: 50%;
transform: translate(-50%, 0);
}
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
