一篇文章教会你在 iview 的表格中动态生成图表-白红宇

一篇文章教会你在 iview 的表格中动态生成图表

阅读量：4095 次

发布时间：2019-05-25

本文共 2332 字，大约阅读时间需要 7 分钟。

iview 是一套基于 Vue.js 的高质量 UI 组件库，它使用便捷，常用于后台开发，是很多前端小伙伴的最爱。今天我来记录一下如何在 iview 中插入 echharts 图表：

难点

因为 iview 的表格是组件化的，我们获取表格中的某一个 DOM 元素去插入图表是个比较棘手的问题

解决方案

利用 vue 的 render 函数动态生成 DOM元素，及合理使用生命周期钩子完成可视化图表。以下为基础知识普及。

render 函数用法
描述：render 的函数的核心功能就是为了实现 template 模板，本质就是 js 语言构建 DOM 对象。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h, vm中有一个方法 _c, 也是这个函数的别名。

参数：
（1）标签参数，必填项。类型可以为 String 、 Object 、Function（createElement ），可以是 HTML 标签字符串、组件对象或者async 异步函数；
（2）context ，可选项。通过 context 可以访问组件中data、props、slots、children 以及 parent 中的数据
返回值：VNode（虚拟节点），类型可以是String 、Array。

动态生成图表方法

利用 render 函数在表格中动态创建 canvas，设置id

{
             title: "比例",          align: "center",          key: "rate",          render: (h, params) => {
               return [              h("div", {
                   style: {
                     width: "100%",                  height: "50px"                },                attrs: {
                     id: "pieChart" + params.index                }              })            ];          }        }

在 methods 中写明图表生成的方法（根据自己的实际设置对应参数）

drawEchart(i, params) {
         let myChart = echarts.init(document.getElementById("pieChart" + i));      myChart.setOption({
           color: ["#0069D6", "#00AAF3", "#88D3F7"],        series: [          {
               name: "比例",            type: "pie",            radius: ["0", "60%"],            center: ["50%", "50%"],            hoverAnimation: false,            label: {
                 show: false            },            silent: true,            data: [              {
    value: params.wechat, name: "wechat" },              {
    value: params.sms, name: "sms" },              {
    value: params.app, name: "app" }            ]          }        ]      });      window.addEventListener("resize", function() {
           myChart.resize();      });    },

在 created 钩子函数中获取图表数据，一般使用 axios。

因为接口不同，使用的方法可能不同，没有代表性，所以这里不做具体代码展示，刚开始做时，可以自己写挡板数据实现正确效果。

在 updated 钩子函数中初始化图表方法。
划重点: 因为 render 的工作原理，由于 render 是动态生成虚拟 DOM，当 mounted 页面挂在成功时，无法获取 render 创建的虚拟 DOM，所以可以在 updated 页面更新后获取。

updated() {
       //动态循环生成饼图    var h = this.params.length;    for (let i = 0; i < h; i++) {
         this.drawEchart(i, this.params[i]);    }  },

到这里，在 iview 中动态生成图表的功能就完全实现了。由于文中代码截取自实际项目，直接复制粘贴不能实现，需要完全理解整个逻辑后自己动手实现。关于文章或开发过程有任何问题，欢迎关注共同讨论。

转载地址：http://ptvii.baihongyu.com/

你可能感兴趣的文章