sis_zhfx/src/components/chart/bar/thermometer.vue

<template>
  <div class="thermometer"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  // 名称
  name: "thermometer",
  // 使用组件
  components: {},
  // 传入参数
  props: {
    width: {
      type: String,
      default: "9.259vh",
    },
    height: {
      type: String,
      default: "11.111vh",
    },
    min: {
      type: Number,
      default: -20,
    },
    max: {
      type: Number,
      default: 100,
    },
    value: {
      type: Number,
      default: 36.6,
    },
    title: {
      type: String,
      default: "温度",
    },
  },
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {
      option: {},
    };
  },
  // 函数
  methods: {
    initChart: function() {
      const chart = echarts.init(this.$el);
      let kd = []; // 刻度
      for (var i = 0, len = 135; i <= len; i++) {
        if (i < 30 || i > 130) {
          kd.push("");
        } else {
          if ((i - 30) % 20 === 0) {
            kd.push("-3");
          } else if ((i - 30) % 4 === 0) {
            kd.push("-1");
          } else {
            kd.push("");
          }
        }
      }
      let width = this.$el.offsetWidth;
      this.option = {
        backgroundColor: "transparent",
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "45%",
        },
        yAxis: [
          {
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            show: false,
            data: [],
            min: 0,
            max: 135,
            axisLine: {
              show: false,
            },
          },
        ],
        xAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: 0,
            data: [this.title],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#606769",
                fontSize: "14",
              },
              lineHeight: 40,
            },
            splitLine: {
              show: false,
            },
          },
          {
            axisTick: "none",
            axisLabel: {
              show: false,
            },
            data: [0],
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            name: "单位：件",
            nameGap: "50",
            data: [],
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
              color: "#ffffff",
            },
          },
          {
            show: false,
            min: 0 - width * 0.35,
            max: width * 0.5,
          },
        ],
        series: [
          {
            name: "℃",
            type: "bar",
            yAxisIndex: 0,
            xAxisIndex: 0,
            label: {
              show: true,
              position: "top",
              formatter: "{back|" + "{c}" + "}",
              rich: {
                back: {
                  align: "right",
                  lineHeight: 14,
                  fontSize: 14,
                  fontFamily: "微软雅黑",
                  color: "#05bb4c",
                },
              },
              offset: [25, 15],
            },
            data: [this.value],
            barWidth: 5,
            itemStyle: {
              normal: {
                color: "#05bb4c",
              },
            },
            z: 2,
          },
          {
            name: "温度背景框",
            type: "bar",
            yAxisIndex: 0,
            xAxisIndex: 1,
            barGap: "-100%",
            data: [99],
            barWidth: 8,
            itemStyle: {
              normal: {
                color: "#040c0b",
                barBorderRadius: 5,
              },
            },
            z: 1,
          },
          {
            name: "外框",
            type: "bar",
            yAxisIndex: 0,
            xAxisIndex: 2,
            barGap: "-100%",
            data: [100],
            barWidth: width * 0.1,
            itemStyle: {
              normal: {
                color: "#606769",
                barBorderRadius: width * 0.5,
              },
            },
            z: 0,
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            yAxisIndex: 0,
            xAxisIndex: 2,
            symbolSize: width * 0.15,
            itemStyle: {
              normal: {
                color: "#05bb4c",
                opacity: 1,
              },
            },
            z: 2,
          },
          {
            name: "白圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            yAxisIndex: 0,
            xAxisIndex: 1,
            symbolSize: width * 0.2,
            itemStyle: {
              normal: {
                color: "#040c0b",
                opacity: 1,
              },
            },
            z: 1,
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            yAxisIndex: 0,
            xAxisIndex: 2,
            symbolSize: width * 0.23,
            itemStyle: {
              normal: {
                color: "#606769",
                opacity: 1,
              },
            },
            z: 0,
          },
          {
            name: "刻度",
            type: "bar",
            yAxisIndex: 1,
            xAxisIndex: 3,
            label: {
              normal: {
                show: false,
              },
            },
            barGap: "100%",
            data: kd,
            barWidth: 1,
            itemStyle: {
              normal: {
                color: "#606769",
                barBorderRadius: width * 1.2,
              },
            },
            z: 0,
          },
        ],
      };
      chart.setOption(this.option);
    },
    setValue: function() {
      this.option.series[0].data[0] = this.value;
      const chart = echarts.getInstanceByDom(this.$el);
      chart.setOption(this.option);
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$el.style.height = this.height;
      this.initChart();
    });
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
    this.setValue();
  },
};
</script>

<style lang="less">
.thermometer {
}
</style>