sis_zhfx/src/components/chart/bar/percent-bar.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";

export default {
  name: "dsah-pie",
  componentName: "dsah-pie",
  props: {
    width: {
      type: String,
      default: "7.407vh",
    },
    height: {
      type: String,
      default: "7.407vh",
    },
    // 传入数据
    value: {
      type: Number,
      default: 25,
    },
    // 颜色 green yellow (partten中支持的颜色)
    color: {
      type: String,
      default: "green",
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  computed: {
    colorValue() {
      return partten.getColor(this.color);
    },
    text() {
      return this.value + "%";
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  methods: {
    initChart() {
      let chart = echarts.init(this.$el);

      let option = {
        title: [
          {
            text: this.text,
            x: "45%",
            y: "32%",
            textAlign: "center",
            textStyle: {
              fontSize: 14,
              fontFamily: "Bicubik",
              fontWeight: "600",
              color: partten.getColor(this.colors),
              textAlign: "center",
            },
          },
        ],
        polar: {
          radius: ["100%", "85%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
          startAngle: 180,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            z: "3",
            type: "bar",
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
              color: partten.getColor(this.colors) + "30",
            },
            data: [this.value],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: partten.getColor(this.colors),
                //    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                //     {
                //       offset: 0,
                //       color: "#0ff",
                //     },
                //     {
                //       offset: 1,
                //       color: "#02aeff",
                //     },
                //   ]),
              },
            },
          },
          {
            type: "pie",
            radius: ["100%", "97%"],
            startAngle: 180,
            center: ["50%", "50%"],
            data: [
              {
                hoverOffset: 1,
                value: 100,
                name: "",
                itemStyle: {
                  color: partten.getColor(this.colors),
                },
                label: {
                  show: false,
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                hoverAnimation: false,
              },
              {
                label: {
                  show: false,
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                value: 0,
                hoverAnimation: false,
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
          },
        ],
      };

      chart.setOption(option);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$el.style.height = this.height;
      this.initChart();
    });
  },
  updated() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
}
</style>