sis_zhfx/src/views/HealthControl/healthLineChart.vue

<template>
  <div class="pageBox">
    <simple-line-chart :height="'100px'" v-for="(item, index) in chartData" :key="index" :title="item.title" :data="item.data" :color="item.color" :lineTitle="item.lineTitle" />
  </div>
</template>

<script>
import SimpleLineChart from "../../components/chart/line/simple-line-chart.vue";
export default {
  setup() {},
  components: { SimpleLineChart },
  data() {
    return {
      chartData:[]
    };
  },

  created() {
    this.wtId = this.$route.params.wtId;
    this.wpId = this.$route.params.wpId;
    this.requestData();
  },
  
  methods:{
    requestData(){
      let that=this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/hsFjValueIndex",
        data:{
          wtId: that.wtId
        },
        success(res) {

          const color=["green","yellow","purple","blue","orange"];
          let chartData=[];
          let lineTitle=[];

          res.data.xData.forEach(ele=>{
            lineTitle.push(new Date(ele).formatDate("hh:mm"));
          });

          res.data.datasets.forEach((ele,index)=>{
            chartData.push({
              title:ele.name,
              data:ele.data,
              color:color[index],
              lineTitle
            });
          });
          that.chartData=chartData;
        },
      });
    }
  }
};
</script>

<style lang="less" scoped>
.pageBox {
  width: 100%;
  height:calc(100% - 1.481vh * 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin:1.481vh 0;

  .chart{
    width: 100%;
    height:25%;
  }
}
</style>