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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。