echarts折线图

废话不多说直接上代码

在这里插入代码片
这是主页面 html部分 echid 生成图标 type类型  title是图标标题 yname y轴名 niuName x轴单位 下面的shijiantrl 直接传时间数组就行 时间太长排不开可以.substring(11, 16);截取一下 只要 08-30 手动/滑稽/
    <Echart
            ref="nyref6"
            echid="ec_id6"
            type="line"
            title="土壤湿度"
            yname="%"
            niuName="%"
          />
//这是方法格式
    TuRngsd() {
      var result = [
        {
          data: [],
          name: '土壤湿度',
          type: 'line',
        },
      ];

     
      //result就是这样的[]
      var result = [12,15,16,15]
      var shijiantrl =['2023-08-30','2023-08-30','2023-08-30','2023-08-30']
      result[0].data = result;
      this.$refs.nyref6.showData(result, shijiantrl); //ref传值到组件showData
    },

在这里插入代码片
这是封了个echarts 组件
<template>
  <div
    :id="echid"
    class="ec_char"
    v-loading="ecLoading"
  ></div>
</template>
<script>
export default {
  name: 'Echart',
  props: ['echid', 'type', 'title', 'xname', 'yname', 'niuName'],
  components: {},
  data() {
    return {
      xAxis: [],
      ser: undefined,
      yAxis: [],
      ecLoading: false,
      sttime: [],
    };
  },
  created() {},
  mounted() {
    this.drawChart();
  },
  methods: {
    //传入数据
    showData(data, time) {
      let _this = this;
      this.ecLoading = true;
      this.$nextTick(() => {
        let times = setTimeout(() => {
          _this.ecLoading = false;
          _this.ser = data;
          _this.sttime = time;

          console.log(time);
          //图表初始化
          _this.drawChart();
          clearTimeout(times);
        }, 1000);
      });
    },
    // 初始化图表
    drawChart() {
      let _this = this;
      document.getElementById(`${this.echid}`).setAttribute('_echarts_instance_', '');
      let chartDom = document.getElementById(`${this.echid}`);
      let Comparative = this.$echarts.init(chartDom);
      this.option = {
        title: [
          {
            top: '6%',
            left: 'center',
            text: this.title,
          },
        ],

        tooltip: {
          valueFormatter: value => {
            return value + this.niuName;
          },
        },
        grid: {
          top: '22%',
          left: '3%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        legend: {
          show: false,
          // selected: this.selectSel,
          // top: 450
          // top: "bottom",
          // x: 'center',
          // y: 'bottom',
          // padding: [80, 80, 0, 0],
        },
        xAxis: {
          data: this.sttime.map(item => item),
          name: this.xname,
          nameTextStyle: {
            color: '#333',
            fontSize: 10,
            padding: [0, 0, 2, -8], // 四个数字分别为上右下左与原位置距离
          },
        },
        yAxis: {
          name: this.yname,
          nameTextStyle: {
            color: '#333',
            fontSize: 10,
            padding: [0, 0, -5, 0], // 四个数字分别为上右下左与原位置距离
          },
          type: 'value',
        },
        series: this.ser,
      };

      Comparative.clear();
      Comparative.setOption(this.option);
    },
  },
};
</script>
<style scoped>
.ec_char {
  width: 100%;
  height: 360px;
  display: block;
  background-color: #fff;
}
</style>

最后就是这个熊样