学习图表框架-uPlot(vue项目)第一篇
·
由于可视化项目数据庞大,使用echarts卡顿事件较久,转而研究其他框架,发现uplot十分快速,目前研究了uplot的散点图,折线图,柱状图和堆叠柱状图
uPlot仓库地址如下:https://github.com/leeoniya/uPlot
研究uplot的不便之处在与文档描述不够清晰,建议研究部分demo源码
下面简单介绍一下uplot如何使用
安装
在/public/index.html中引入两个文件即可使用,如下
<link rel="stylesheet" href="./uPlot.min.css">
<script src="./uPlot.iife.js"></script>
其中,这两个文件可以在uplot的仓库中得到
使用(安装之后直接在组件中new uPlot即可)
<div id='hi'></div>
this.myChart=new uPlot(opts, data, document.getElementById('hi'))
其中,this.myChart是存放图表实例的全局变量,opts是图表的配置项,data是生成图表的数据,第三个参数是图表容器
销毁
uplot图表实例销毁直接调用destroy方法即可
this.myChart.destroy()
关于折线图、散点图、柱状图和堆叠柱状图表的使用及部分配置项在其余篇章中讲解
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)