hyyfScreen/src/views/Production/board/IndicatorChart.vue

<!--
 * @Author: your name
 * @Date: 2021-11-22 15:10:07
 * @LastEditTime: 2022-01-06 10:07:04
 * @LastEditors: Please set LastEditors
 * @Description: 指标图
 * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorChart.vue
-->
<template>
  <div :id="id + 'indicator'" class="indicator-chart"></div>
</template>
<script>
export default {
  props: {
    ifPositive: {
      type: Boolean,
      required: true,
    },
    id: {
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    init() {
      let color1 = "rgba(0, 255, 0, 0.7)";
      let color2 = "rgba(64, 218, 26, 0.5)";
      let color3 = "rgba(88, 165, 69, 0.3)";
      if (this.ifPositive) {
        color1 = "rgba(255, 0, 0, 0.7)";
        color2 = "rgba(216, 52, 52, 0.5)";
        color3 = "rgba(201, 85, 85, 0.3)";
      }
      let options = {
        grid: {
          top: "2%",
          left: "0",
          right: "0",
          bottom: "-20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.data.timeList,
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: this.data.dataList,
            type: "line",
            symbol: "none", // 隐藏拐点
            color: color1,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color1, // 100% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: color2, // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: color3, //   0% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      this.myChart.setOption(options, true);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById(this.id + "indicator")
    );
    this.init();
  },
  watch: {
    data: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.indicator-chart {
  width: 100%;
  height: 100%;
}
</style>