<template>
? <div class="gauge">
? ? <div class="gauge__bottom" ref="bottomGauge"></div>
? ? <div class="gauge__top" ref="topGauge"></div>
? ? <div class="gauge__label">數(shù)據(jù)占比</div>
? ? <div class="gauge__title">{{ this.gaugeData.gaugeTitle }}</div>
? </div>
</template>

<script>
import echarts from "echarts";
export default {
? name: "gauge",
? props: ["gaugeData"],//傳入的數(shù)據(jù)
? 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,
? ? ? ? ? ? ? ? ? ? ? ? // 結(jié)束顏色
? ? ? ? ? ? ? ? ? ? ? ? color: "#707089",
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ]),
? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ],
? ? ? },
? ? ? topOption: {
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "業(yè)務(wù)指標(biāo)",
? ? ? ? ? ? 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>