sis_zhfx/src/components/chart/other/Dashboard.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: "Dashboard-chart",
  componentName: "Dashboard-chart",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    value: {
      type: Number,
      default: 50,
    },
    max: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  computed: {},
  methods: {
    initChart() {
      let chart = echarts.init(this.$el);
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "内部进度条",
            type: "gauge",
            // center: ['50%', '50%'],
            radius: "80%",
            z: 4,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [this.value / 100, partten.getColor("green")],
                  [1, partten.getColor("gray")],
                ],
                width: 8,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter: function(value) {
                if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0) + "";
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, "75%"],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 20,
                fontWeight: "700",
                color: partten.getColor("green"),
              },
            },
            title: {
              show: false,
            },
            data: [
              {
                name: this.value,
                value: this.value,
              },
            ],
            pointer: {
              show: true,
              length: "70%",
              radius: "20%",
              width: 2, //指针粗细
              itemStyle: {
                color: partten.getColor("green"),
              },
            },
            animationDuration: 1500,
          },
          // 内圆
          {
            name: "内圆",
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            radius: "8%",
            z: 4,
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 0,
              },
              {
                value: 10,
                itemStyle: {
                  normal: {
                    color: "#161f1e",
                  },
                  emphasis: {
                    color: "#161f1e",
                  },
                },
              },
            ],
          },
          // 圆环
          {
            name: "小圆形",
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ["8%", "5%"],
            z: 5,
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 0,
              },
              {
                value: 10,
                itemStyle: {
                  normal: {
                    color: partten.getColor("green"),
                  },
                },
              },
            ],
          },
          {
            name: "外部刻度",
            type: "gauge",
            radius: "94%",
            min: 0, //最小刻度
            max: this.max, //最大刻度
            splitNumber: 4, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
            },
            //仪表盘轴线
            axisLabel: {
              show: true,
              distance: 16,
              fontSize: 12,
            },
            //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 4,
              lineStyle: {
                color: partten.getColor("gray"), //用颜色渐变函数不起作用
                width: 1,
              },
              length: 4,
            },
            //刻度样式
            splitLine: {
              show: false,
            },
            //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: true,
            },
          },
        ],
      };

      chart.setOption(option);
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  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">
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>