hyyfScreen/src/views/Zoology/charts/ChartLine.vue

<!--
 * @Author: your name
 * @Date: 2021-10-25 16:13:34
 * @LastEditTime: 2021-12-17 08:46:16
 * @LastEditors: Please set LastEditors
 * @Description: 折线图
 * @FilePath: \hyyfScreen\src\views\Zoology\charts\ChartLine.vue
-->
<template>
  <div :id="'chartLine' + id" class="chart-line"></div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    init() {
      let start = this.data.xAxisData.length - 7;
      let end = this.data.xAxisData.length - 1;
      let options = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "8%",
          left: "15%",
          bottom: "20%",
          right: "10%",
        },
        dataZoom: [{
          type: 'inside',
          startValue: start,
          endValue: end,
          show: false
        }],
        xAxis: [
          {
            type: "category",
            // name: this.data.xAxisName,
            data: this.data.xAxisData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(0, 255, 255)",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        //[
        yAxis: {
          type: "value",
          // name: this.data.yAxisName,
          nameTextStyle: {
            color: "red",
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            formatter: "{value}" + this.data.yAxisName,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(0, 255, 255)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        //],
        series: [
          {
            name: this.data.xAxisName,
            type: "line",
            smooth: false,
            data: this.data.yAxisData,
            itemStyle: {
              normal: {
                color: "#3aa0ff",
                lineStyle: {
                  color: "#3aa0ff",
                },
                label: {
                  show: true,
                }
              },
            },
          },
        ],
      };
      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById("chartLine" + this.id)
    );
    this.init();
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.myChart.clear();
          this.init();
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.chart-line {
  width: 100%;
  height: 100%;
}
</style>