动态生成echarts和el-table

Vue 动态生成echarts 和表格数据

通过select框和日期选择条件进行搜索

initCharts() {

      // 初始化echarts实例
      var myChartline = this.$echarts.init(this.$refs.line)
      window.onresize = function() {
        myChartline.resize()
      }
      //随外层div的大小变化自适应
      const _this = this
      let erd = elementResizeDetectorMaker()
      erd.listenTo(this.$refs.line, (element) => {
        _this.$nextTick(() => {
          let height = element.parentNode.offsetHeight
          console.log(height)
          this.$refs.line.style.height = height  + 'px'
          myChartline.resize()
        })
      })
      // 指定图表的配置项和数据
      console.log(this.data)
      const legendData = this.data.map(item => item.name)
      const xAxisData = this.tableColumn.filter(item => item.prop !== 'loopName').map(item =>item.label)
      console.log(xAxisData)
      const seriesData = []
      this.data.forEach(item => {
        seriesData.push({
          name: item.name,
          type: 'bar',
          data: item.value
          // barWidth: '30%'
        })
      })
      myChartline.setOption({
        legend: {
          data: legendData,
          // orient: 'vertical',
          left: 10, // 调整左侧间距
          top: 10 // 调整顶部间距
        },
        grid: {
          left: 50, // 调整图表的左边距
          right: 10, // 调整图表的右边距
          top: 100, // 调整图表的上边距
          bottom: 40 // 调整图表的下边距
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            let content = `<div>${params[0].axisValue}</div>`
            params.forEach(item => {
              content += `<div>${item.seriesName}: ${item.value}</div>`
            })
            return content
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          name:'kWh',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999',
              // type: "dashed"
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          nametextStyle: {
            borderType: 'dashed'
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#333"
          },
        },
        series: seriesData
      })
    }

这边是拿到echarts数据进行处理展示

 <el-table :data="tableData" style="width: 100%" border :height="tableHeight">
          <el-table-column
            v-for="(hour, index) in tableColumn"
            :key="index"
            :prop="hour.prop"
            :label="hour.label">
            <template slot-scope="scope">
              {{ scope.row[hour.prop] || '-' }}
            </template>
          </el-table-column>
        </el-table>

这里是通过tableColumn数据进行循环加载