学习图表框架-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()

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