由于可视化项目数据庞大,使用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()

关于折线图、散点图、柱状图和堆叠柱状图表的使用及部分配置项在其余篇章中讲解

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐