Highcharts+Vuejs 动态获取数据生成图表

最近在做大数据管理系统用到了Highcharts,其中需要获取后台数据动态渲染呈现出来,让数据可视化更简单。

其实在Highcharts中文网上有相应的演示

https://www.hcharts.cn/demo/highcharts/line-ajax

但是我这次做的是比较多,使用官网的相对应的演示,那开发量将会大大的增加,做的过程还是引用了 Vuejs大大减少了工作量,为了纪念,把过程记录一下:

首先,是引入HIghcharts绘图相关的js文件和jQuery.js以及vue.min.js。

接着定义oChart的布局环境

Highcharts+Vuejs 动态获取数据生成图表_第1张图片

使用VUEJS动态获取数据

Highcharts+Vuejs 动态获取数据生成图表_第2张图片

源码地址:https://github.com/cinoliu/Highcharts-vuejs

你可能感兴趣的:(Highcharts+Vuejs 动态获取数据生成图表)