博客

效果图

<template>
<!-- 报表 -->
  <div v-for="(statementItem, index) in statementData" :key="index">
    <div class="chartContainer">
      <div class="lefttoday_tit height ht"><p class="fl"></p></div>
      <div :id="'myChart' + index" :ref="'myChart' + index" :style="{width: '100%', height: '300px'}">
      </div>
    </div>
    <a-divider />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        statementData: [],
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.statementStart()
      })
    },
    methods: {
     //statementData数据为调用借口返回的数据，本处不多做展示，数据结构如下方图
      statementStart () {
        this.statementData.forEach((item, index) => {
          this.drawDevice(index, item.sample_names, item.test_dates, item.test_records, item.unit)
        })
      },
      drawDevice (index, sampleList, XData, series, unit) {
        var seriesArray = []
        //处理数据
        series.forEach(element => {
          const seriesItem = {
            name: element.name,
            type: 'line',
            data: element.data
          }
          seriesArray.push(seriesItem)
        })
        // 基于准备好的dom，初始化echarts实例
        this.$nextTick(function () {
          const myChart = this.$echarts.init(document.getElementById('myChart' + index))
          myChart.setOption({
            tooltip: {
              //坐标轴触发类型
              trigger: 'axis',
              //十字虚线
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              data: sampleList
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: XData
              }
            ],
            yAxis: {
              name: unit,
              type: 'value'
            },
            series: seriesArray
          })
        })
      },
    }
  }
</script>

表格数据结构如下