sis_zhfx/src/components/chart/other/thermometer-v-chart.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: "thermometer-chart",
  componentName: "thermometer-chart",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "60px",
    },
    value: {
      type: Number,
      default: 80,
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  computed: {
    barValue() {
      return [this.value * 0.8 + 16];
    },
  },
  methods: {
    hexToRgba(hex, opacity) {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    },
    initChart() {
      var mercuryColor = "#05BB4C";
      var borderColor = "#B3BDC0";

      let option = {
        grid: {
          top: 0,
          bottom: 24,
          left: 16,
          right: 16,
        },
        xAxis: [
          {
            show: false,
            position: "left",
          },
          {
            show: false,
            data: [],
            min: 0,
            max: 9,
          },
        ],
        yAxis: [
          {
            show: false,
            data: [],
            max: 0,
          },
          {
            show: false,
            data: [],
            max: 0,
          },
          {
            show: false,
            data: [],
            max: 0,
          },
          {
            show: false,
            min: -5, //根据容器大小调整此处最小值和最大值，以正常显示刻度
            max: 100,
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: this.barValue,
            barWidth: 16,
            itemStyle: {
              normal: {
                color: mercuryColor,
                barBorderRadius: 100,
                borderWidth: 8,
                borderType: "dashed",
                borderColor: "transparent",
              },
            },
            z: 2,
          },
          {
            name: "外框",
            type: "bar",
            yAxisIndex: 2,
            barGap: "-100%",
            data: [100],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "transparent",
                barBorderRadius: 50,
                borderWidth: 2,
                borderColor: borderColor,
              },
            },
            z: 0,
          },
          {
            name: "刻度",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 3,
            label: {
              normal: {
                show: true,
                position: "bottom",
                distance: 8,
                color: borderColor,
                fontSize: 12,
                formatter: function(params) {
                  if (params.dataIndex == 1) {
                    return "0%";
                  } else if (params.dataIndex == 5) {
                    return "50%";
                  } else if (params.dataIndex == 9) {
                    return "100%";
                  } else {
                    return "";
                  }
                },
              },
            },
            barGap: "-100%",
            data: [0, 10, 5, 10, 5, 10, 5, 10, 5, 10, 5],
            barWidth: 2,
            itemStyle: {
              normal: {
                color: borderColor,
                barBorderRadius: 10,
              },
            },
            z: 0,
          },
        ],
      };

      this.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.chart = echarts.init(this.$el);
      this.initChart();
    });
  },
  updated() {
    this.initChart();
  },
};
</script>

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