vue-cli3+echarts实现渐变色仪表盘组件封装

Welcome ·

更新时间:2024-11-10

· 363 次阅读

本文实例为大家分享了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>

VUE 仪表盘 Echarts 渐变色封装 vue-cli

1024 个赞