动态生成echarts和el-table

qq_42189147

已于 2024-04-26 17:55:48 修改

阅读量580

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript vue.js echarts elementui

于 2024-04-26 17:54:41 首次发布

本文链接：https://blog.csdn.net/qq_42189147/article/details/138226068

文章详细描述了如何在Vue应用中，通过select框和日期选择条件筛选数据，动态生成Echarts柱状图，并配合表格展示数据。内容涉及Echarts实例初始化、图表配置、数据处理以及响应式设计的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>