<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>