zoukankan      html  css  js  c++  java
  • 如何动态渲染多个echart图表小结(vue)

    需求: 需要在一个列表里 动态渲染多个echart图表;

    前提: 本人使用的是vue框架

    分析:

    1、vue框架获取dom结构  可以用官方指定的ref, 或者创建一个id document.getElementById() 方式获取(我这里用的是第二种方式 根据id来获取)

    2、id也需要动态获取,然后根据动态id在JS里循环遍历找到单个item的dom,如下图

    PS:这里我是用“item+索引”来组成每个echart图表的id,最终生成html结构如下:

    3、在JS里采用循环方式获取每个item的id,然后动态渲染每个图表,如下图:

    PS:上面我标注了1,2,3步,分别意思是:
    (1)、由于我这个图表是要复用的弹窗,所以我做成了组件形式,而在进入到主页面时候,点击这个组件时候,DOM更新会涉及打异步更新(因为数据是动态后台获取),而后弹出

    这个错误,所以必须要用vue专门提供的钩子$nextTick来处理,在这个钩子进行echart渲染,具体可以戳这里:https://cn.vuejs.org/v2/api/#Vue-nextTick

    (2): 这个是我从后台获取的列表数组数据,需要对这个数组进行处理,然后得到每个item,然后每个item的echart初始化

    (3):这是单个eachrt图表的生成方案 其中 name的值就是每个item的id  然后实现动态渲染。

    这就是每个动态多个渲染echart的方法之一,当然方法是多样的 还有其他方法实现,欢迎大家留言。

    最终成型如下:

    都是测试数据  哈哈

    
    
  • 相关阅读:
    TensorFlow进行简单的图像处理
    Python Numpy
    Python描述性统计
    对文件和文件夹操作的简单函数
    Tensorflow最简单的图像搭建识别系统
    Python大数据处理模块Pandas
    redis 小结
    datatable 和list 互转
    List集合去重的一种方法
    C#中TransactionScope的使用方法和原理
  • 原文地址:https://www.cnblogs.com/gong-ping/p/12524282.html
Copyright © 2011-2022 走看看