flask+layui+echarts实现前端动态图展示数据效果(2)

日期：2020-05-12 栏目：破解天下浏览：次

3、然后在表格渲染完成后，渲染一个折线图出来，这个时候需要在table.render()后添加一个回调函数 done: function ，具体用法如下：

table.render({ //其它参数在此省略
 done: function(res, curr, count){
 //如果是异步请求数据方式，res即为你接口返回的信息。
 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
 console.log(res);
 
 //得到当前页码
 console.log(curr); 
 
 //得到数据总量
 console.log(count);
 }
});

4、然后我们需要将done: function添加到我们已经写到的table.render()中去。

5、此时的resu就是你渲染表格时，拿到的后台返回的数据，但是这个地方需要注意的是，因为表格渲染数据的格式和折线图渲染数据的格式，是不一样的，所以后台需要返回两种格式的数据，以便于一种用于table展示，一种用于折线图展示。

上图中就是在查询接口的最后添加一个操作把数据在转换一份用于折线图展示，并且动态生成横坐标Xtitle

6、此时后台的数据已经准备完毕，需要在前端渲染折线图，具体的echarts的用法，请参考https://www.echartsjs.com/examples/zh/index.html，此处只是描述如何应用折线图。

此处我用的方法是先行在界面上渲染一个横坐标和纵坐标出来，然后在渲染数据进去。代码如下：

/**
 * 报表功能
 */
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
// 显示标题，图例和空的坐标轴
echartsRecords.setOption({
 title: {
 text: 'appCrash'
 },
 tooltip: {
 trigger: 'axis'
 },
 legend: {
 data: ['ios_owner', 'ios_bus', 'ios_oa', 'android_owner', 'android_bus', 'android_oa']
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 toolbox: {
 feature: {
  saveAsImage: {}
 }
 },
 xAxis: {
 type: 'category',
 boundaryGap: false,
 data: []
 },
 yAxis: [
 {
  //设置类别
  type: 'value',
  //y轴刻度
  axisLabel: {
  //设置y轴数值为%
  formatter: '{value} %',
  },
 }
 ],
});

此处因为我需要的纵坐标是百分比类型的，所以添加了百分号，不需要的可以去掉。此时没有数据的坐标已经渲染好了，然后就是渲染数据

7、渲染数据。

前面在done: function函数中我们得到三个返回值，其中第一个返回值resu就是接口的返回值，我们需要拿到其中的渲染数据进行渲染，代码如下：

//渲染折线图
echartsRecords.setOption({
 xAxis: {
 data: resu.Xtitle
 },
 series: resu.appCrashZhexiantu
});

转载注明出处：http://www.heiqu.com/1551.html

flask+layui+echarts实现前端动态图展示数据效果(2)

相关推荐