hb_sis_zhfx/src/components/chart/other/Dashboard2.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%",
    },
    name: {
      type: String,
      default: "万KWH",
    },
    value: {
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  computed: {},
  methods: {
    initChart() {
		let themeName = '';
		this.$store.state.themeName === "dark" ? themeName = true : themeName = false;
		 
      let chart = echarts.init(this.$el);
      let value = this.value;
      let option = {
        grid: {
          top: 8,
          bottom: -16,
          left: 8,
          right: 8,
        },
        series: [
          {
            type: "gauge", //刻度轴表盘
            radius: "115%", //刻度盘的大小
            center: ["50%", "75%"],
            startAngle: 180, //开始刻度的角度
            endAngle: 0, //结束刻度的角度
            axisLine: {
              show: true,
              lineStyle: {
                width: 8,
                color: [
                  [0, partten.getColor("gray") + "33"],
                  [value / 100,themeName ? partten.getColor("green") : partten.getColor("blue")],
                  [1, partten.getColor("gray") + "33"],
                ],
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            title: {
              show: true,
              offsetCenter: [0, "-40%"],
              textStyle: {
                color: partten.getColor("gray"),
                fontSize: util.vh(12),
              },
            },
            detail: {
              show: true,
              offsetCenter: [0, "0%"],
              color: "#ffffff",
              formatter: function(params) {
                return params;
              },
              textStyle: {
                color: themeName ? partten.getColor("green") : partten.getColor("blue"),
                fontSize: util.vh(16),
              },
            },
            data: [
              {
                name: "万KWh",
                value: value,
              },
            ],
          },
          {
            type: "gauge",
            radius: "115%",
            center: ["50%", "75%"],
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [
                  [this.value / 100, themeName ? partten.getColor("green") : partten.getColor("blue")],
                  [1, "#fff5"],
                ],
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            detail: { show: false },
          },
        ],
      };

      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();
    });
  },
  watch: {
      "$store.state.themeName"() {
        this.initChart();
      },
    },
};
</script>

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