echarts 折线图设置y轴最小刻度_flask+layui+echarts实现前端动态图展示数据-程序员宅基地

技术标签： layui table动态选中 echarts 折线图设置y轴最小刻度 layui 如何动态加载局部页面 layui 表格加载动画后台实现echarts双折线图 layui treeselect 动态赋值

效果图：

该效果主要实现一个table展示数据，并在下方生成一个折线图。

实现方式：

1、首先需要对表格进行一个数据加载，这里用到了layui的table.render，具体用法可以参考

https://www.layui.com/doc/modules/table.html

html部分：

js部分：

此时已经基本实现了表格从后台抓取数据实现动态渲染表格。接下来需要实现的是，将表格里面的数据渲染成折线图

2、首先html中写一个放折线图的div，具体的html代码如下：

2

报表统计

3

4

6

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

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

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

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

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

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

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

 1 /** 2 * 报表功能 3 */ 4 var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); 5 // 显示标题，图例和空的坐标轴 6 echartsRecords.setOption({ 7 title: { 8 text: 'appCrash' 9 },10 tooltip: {11 trigger: 'axis'12 },13 legend: {14 data: ['ios_owner', 'ios_bus', 'ios_oa', 'android_owner', 'android_bus', 'android_oa']15 },16 grid: {17 left: '3%',18 right: '4%',19 bottom: '3%',20 containLabel: true21 },22 toolbox: {23 feature: {24 saveAsImage: {}25 }26 },27 xAxis: {28 type: 'category',29 boundaryGap: false,30 data: []31 },32 yAxis: [33 {34 //设置类别35 type: 'value',36 //y轴刻度37 axisLabel: {38 //设置y轴数值为%39 formatter: '{value} %',40 },41 }42 ],43 });

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

7、渲染数据。

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

1 //渲染折线图2 echartsRecords.setOption({3 xAxis: {4 data: resu.Xtitle5 },6 series: resu.appCrashZhexiantu7 });

Xtitle代表的是折线图的横坐标，appCrashZhexiantu代表的是具体的数据。数据格式为：

OK，此时所有功能已经完成，界面上已经可以完美的展示出折线图。

综上的所有js：

本文链接：https://blog.csdn.net/weixin_39642981/article/details/110108523

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios