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

渲染不出来,可以用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>
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,513评论 25赞 708
  • *文章来自榕树下“蒙面故事王”故事创意大赛 *“蒙面歌王”节目官方授权 文/婴宁应宁 (一) 你知道吗,最早变脸是...
    榕小树阅读 2,353评论 0赞 8
  • 大提顿国家公园是进入黄石国家公园南门的必经之路,以雪山、湖泊和冰川为主要景致:高耸入云的连绵巍峨雪山,广阔草原、纯...
    AMIGO616阅读 904评论 0赞 1

友情链接更多精彩内容