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

2024-01-15 19:47:34

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

码农公寓

相关文章