web_sh_audit/src/components/chart/LineChart.vue

<template>
  <div id="lineChart" ref="line"></div>
</template>
<script>
export default {
  name: "LineChart",
  data() {
    return {
      lineChart: null
    };
  },
  props: {
    categoryData: {
      type: Array,
      default() {
        return [];
      }
    },
    valueData: {
      type: Array,
      default() {
        return [];
      }
    },
    unit: {
      type: String,
      default() {
        return "";
      }
    },
    title: {
      type: String,
      default() {
        return "";
      }
    }
  },
  watch: {
    valueData: {
      handler(val) {
        this.$nextTick(() => {
          if (this.valueData) {
            this.initEchart(this.categoryData, this.valueData);
          }
        });
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.valueData) {
        this.initEchart(this.categoryData, this.valueData);
      }
    });
  },
  methods: {
    initEchart(xData, seriesData) {
      if (!this.lineChart) {
        this.lineChart = this.$Echarts.init(this.$refs.line);
      }
      let unit = this.unit;
      let title = this.title;
      let dataMin = Math.min(...seriesData);
      let dataMax = Math.max(...seriesData);
      let homeSpecialTown = this.$store.state.homeSpecialTown;
      let option = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: function (params) {
            return (
              params[0].marker +
              params[0].name +
              "年" +
              "(" +
              homeSpecialTown +
              ")" +
              "<br />" +
              title +
              ":" +
              (unit == "条" || unit == "个" ? parseFloat(params[0].data).toFixed(0) : parseFloat(params[0].data).toFixed(2)) +
              unit
            );
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "20px",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: xData,
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            color: "rgba(219,225,255,1)"
          }
        },
        yAxis: {
          min:
            dataMax === dataMin
              ? dataMax
              : parseFloat(dataMin - (dataMax - dataMin) / 2).toFixed(2) < 0
              ? 0
              : unit == "条" || unit == "个"
              ? dataMin
              : parseFloat(dataMin - (dataMax - dataMin) / 2).toFixed(2),
          max: unit == "条" || unit == "个" ? parseFloat(dataMax).toFixed(0) : parseFloat(dataMax).toFixed(2),
          interval:
            dataMax === dataMin
              ? parseFloat(dataMax).toFixed(0)
              : parseFloat(dataMax - dataMin).toFixed(2) < 0
              ? 0
              : unit == "条" || unit == "个"
              ? parseFloat(dataMax - dataMin).toFixed(0)
              : parseFloat(dataMax - dataMin).toFixed(2),
          type: "value",
          scale: true,
          splitLine: {
            show: false // 不显示网格线
          },
          axisLine: {
            show: false // 不显示坐标轴线
          },
          axisLabel: {
            //y轴文字的配置
            color: "rgba(219,225,255,1)",
            margin: 15
          }
        },
        series: [
          {
            data: seriesData,
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#00aaff"
            },
            areaStyle: {
              color: new this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00aaff"
                },
                {
                  offset: 1,
                  color: "#00aaff00"
                }
              ])
            }
          }
        ]
      };
      this.lineChart.setOption(option);
    }
  }
};
</script>
<style>
#lineChart {
  width: 100%;
  height: 100%;
}
</style>