美文网首页
2-echart(折线图)在element表格渲染

2-echart(折线图)在element表格渲染

作者: 懒羊羊3号 | 来源:发表于2018-08-20 18:37 被阅读0次

渲染不出来,可以用settimeout延时一点点时间

 getChart (i) {
        let myChart = echarts.init(document.getElementById('main' + i))
        let key = this.chartRows[0].cells.map((x) => {
          return x.key
        })
        let value = this.chartRows[i].cells.map((x) => {
          return x.value
        })
        let option = {
          xAxis: {
            type: 'category',
            data: key,
            axisLabel: {
              interval: 0,                    //坐标轴太长,全部显示标签
              fontSize: 10,
              showMinLabel: true,     //起始标签
              showMaxLabel: true     //结束标签
            },
            axisLine: {
              lineStyle: {
                width: 0                       //隐藏轴线
              }
            },
            axisTick: {
              show: false                    //隐藏刻度线
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          },
          series: [{
            data: value,
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }
        myChart.setOption(option)
      },
      getAllChart () {
        for (let i = 0; i < 5; i++) {
          this.getChart(i)
        }
      },

在element表格中渲染

    <el-table :data="chartRows" style="width: 100%" >
    <el-table-column label="统计项(平均/合计)" prop="name" width="180">
      <template slot-scope="scope">
        {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column label="趋势图" prop="chart" header-align="center">
      <template slot-scope="scope">
        <div :id="`main${scope.$index}`" style="width: 1300px;height:250px;"></div>
      </template>
    </el-table-column>
    </el-table>

相关文章