前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Echarts统计图自适应

Echarts统计图自适应

作者头像
王小婷
发布于 2025-05-19 06:51:23
发布于 2025-05-19 06:51:23
6800
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

之前做折线图的时候,y轴数据都是写成固定了的,如果是统计步数的话,y轴坐标就要根据走了多少步来自适应了,如果没写的话,就会出现以下的这种情况,折线超出了整个坐标抽,就是一个bug了,只要修改一下属性即可,今天写一下Echarts统计图自适应。

5640239-357a8a0cb3cb7122.png
5640239-357a8a0cb3cb7122.png

主要属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
min:0, //就是这两个 最小值
max:'dataMax', //最大值

参考demo

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
        <script>
            // 折线图
            $.ajax({
                url: "data.json",
                data: {},
                type: 'GET',
                success: function(data) {
                    console.log(JSON.stringify(data))
                    hrFun(data.echatX, data.echatY);

                },
            });
            // 心率
            var hrChart = echarts.init(document.getElementById("main"));
            function hrFun(x_data, y_data) {
                hrChart.setOption({
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['步数值']
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: x_data,
                    }],
                    yAxis: [{ // 纵轴标尺固定
                        type: 'value',
                        scale: true,
                        name: '步数值',
                        min:0, //就是这两个 最小值
                        max:'dataMax', //最大值
                        splitNumber: 20,
                        boundaryGap: [0.2, 0.2]
                    }],
                    series: [{
                        name: '步数',
                        type: 'line',
                        data: y_data
                    }]
                }, true);
            }
        </script>
    </body>
</html>

json数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        0,
        10000,3,43,5,47,8,39,0,1
    ],
    "echatY2": [
        0
    ]
}

就算一天走一万步或者更多,折线图都能根据最大数据来进行相对于的自适应啦。

5640239-cb9f7af128c63368.png
5640239-cb9f7af128c63368.png
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
ppt导出pdf后非矢量图图片失真的解决办法
#背景 明明有了高清的图片,为什么导入PPT后图像反而模糊了?导出pdf后图片更是惨不忍睹?今天为了解决这个问题,我又折腾了一会儿。(如果是matlab或者origin画的数据图,直接复制到ppt转pdf即可。体积小而且是矢量) #准备
全栈程序员站长
2022/09/06
4K0
ppt导出pdf后非矢量图图片失真的解决办法
java利用 aspose-words Word或Excel 转Pdf(无水印、页数限制)
word转pdf需要引入 aspose-words-15.8.0-jdk16.jar
全栈程序员站长
2022/09/01
7.3K0
java利用 aspose-words Word或Excel 转Pdf(无水印、页数限制)
word转pdf的java实现_java实现word转pdf
目前发现可用的实现方式有两种,一种是使用e-iceblue的免费版api,此方法最为简单但存在限制,导出页数不能超过三页。
全栈程序员站长
2022/06/27
5.3K0
PDF转Word提示页数太多转换失败怎么办?
将PDF转换成Word是我们日常工作中经常会用到的,但有些时候转换时却提示页数太多无法转换,强行转换也总是失败,这是怎么回事呢?要怎么才能转换呢?
全栈程序员站长
2022/06/27
2.9K1
PDF转Word提示页数太多转换失败怎么办?
PDF技术 -Java实现Html转PDF文件
综合:使用WKHtmlToPdf效果(样式)最好。但速度较慢(对于文件来说)。其余均有大大小小的失真问题。
用户1518699
2022/05/09
13.3K0
PDF技术 -Java实现Html转PDF文件
pdf转word文档总结
这里介绍的方法分为两种,一种是直接转为图片版的word,也就是不可编辑的;另一种就是转为可编辑的word,目前很多软件都是要收费的~
全栈程序员站长
2022/09/06
3K0
pdf转word文档总结
怎样免费完美的把PDF转Word?
PDF可以分为文字型PDF和图片型PDF,文字型PDF即可以选中文字内容的PDF,反之图片型PDF即无法选中文字的PDF,其内容实际上是图片。
全栈程序员站长
2022/08/24
2.9K0
怎样免费完美的把PDF转Word?
XPS文件转换成PDF[通俗易懂]
XPS是XML PaperSpecification(XML文件规格书)的简称,是一种电子文件格式, 它是微软公司开发的一种文档保存与查看的规范,关联的阅读器是XPS Viewer。
全栈程序员站长
2022/09/05
2.1K0
java实现在线预览–poi实现word、excel、ppt转html
###简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服务就可以了,例如永中office、office web 365(http://www.officeweb365.com/)他们都有云在线预览服务,就是要钱0.0 如果想要免费的,可以用openoffice,还需要借助其他的工具(例如swfTools、FlexPaper等)才行,可参考这篇文章http://blog.csdn.net/z69183787/article/details/17468039,写的挺细的,实现原理就是: 1.通过第三方工具openoffice,将word、excel、ppt、txt等文件转换为pdf文件; 2.通过swfTools将pdf文件转换成swf格式的文件; 3.通过FlexPaper文档组件在页面上进行展示。 当然如果装了Adobe Reader XI,那把pdf直接拖到浏览器页面就可以直接打开预览,这样就不需要步骤2、3了,前提就是客户装了Adobe Reader XI这个pdf阅读器。 我这里介绍通过poi实现word、excel、ppt转html,这样就可以放在页面上了。
全栈程序员站长
2022/09/06
2.3K0
.net pdf转word_pdf to word
文件的详细路径: pdfToDoc(String pdfPath, String docPath) 输入流: pdfToDoc(InputStream pdfPathInputStream, String docPath)
全栈程序员站长
2022/11/17
7.6K0
.net pdf转word_pdf to word
PDF如何导出成图片,操作教程[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134963.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/06
1.8K0
PDF如何导出成图片,操作教程[通俗易懂]
如何将XPS转成PDF?XPS转PDF的免费方法「建议收藏」
你还不知道XPS是什么?不懂这种文档要怎么打开?其实这些都不重要,只要你知道PDF就可以,教你几种将XPS转成PDF的方法,还有免费使用哦。
全栈程序员站长
2022/09/05
2.1K0
这2个PDF转Word免费不限页数工具很多人没用过
很多人在搜索下载过PDF转换器的小伙伴都会有一个灵魂拷问:难道就没有免费还没页数限制的PDF转Word的工具吗?小编经过不断的对比和试用,找到以下两款好用免费的工具,相信总有一个你能用上。
全栈程序员站长
2022/08/10
3.5K1
这2个PDF转Word免费不限页数工具很多人没用过
pdf格式的图片如何插入到word中
1,在R中将图片保存为pdf格式 2,通过在线网站,将pdf转为png 3,将png粘贴到word中即可
邓飞
2020/12/15
4.6K0
解决java中html转word文档,转成功后的word文档在断网情况下无法显示图片问题「建议收藏」
前一段时间遇到一个问题,就是将html转成word文档,里面有图片,表格,和各种形式的文字。刚开始的做法是将html代码取出来,然后以留的形式进行保存,后缀名为.doc。当我转成之后发现一切完美,但是图片出现了问题:
全栈程序员站长
2022/11/07
6.4K0
解决java中html转word文档,转成功后的word文档在断网情况下无法显示图片问题「建议收藏」
如何免费的、完整的把 PDF 转换为 Word?
我们都知道PDF是一种不能编辑的文件,如果要将pdf文件转换成word文件又该怎样转换呢?其实我们可以借助工具实现pdf转换成word的操作哦。
全栈程序员站长
2022/07/01
2.7K0
如何免费的、完整的把 PDF 转换为 Word?
如何在线将XPS转换成Word文档?
怎么将XPS转成Word?这个比较难,xps是通过虚拟打印机生成的电子文件,与PDF文件类似,但是却不支持直接编辑,要转换只能借助工具。那么什么工具可以转换,不下载软件有没有在线转换的方法?
全栈程序员站长
2022/09/05
2.3K0
如何在线将XPS转换成Word文档?
java导出pdf模板_java模板导出PDF[通俗易懂]
一对一,点对点的给对应的地方写值,比如模板里面放了个name标识,在程序里把“张三”赋给name,那么输出的pdf里面name的地方就变成了张三,准确方便快捷
全栈程序员站长
2022/08/25
2.8K0
java导出pdf模板_java模板导出PDF[通俗易懂]
java将Word转换成PDF
网上有很多将Word转换成PDF的方式,这里找了两种比较简单的工具:jacob和aspose。
全栈程序员站长
2022/09/02
2.5K0
【教程】如何批量图片文字识别软件,批量图片文字识别OCR软件系统,批量图片压缩,PDF批量转文字转图片
前段时间有人跟我讲说要批量图片(批量名片识别、批量照片识别等)识别,然后就下来研究了一下
全栈程序员站长
2022/09/07
45.9K0
【教程】如何批量图片文字识别软件,批量图片文字识别OCR软件系统,批量图片压缩,PDF批量转文字转图片
推荐阅读
相关推荐
ppt导出pdf后非矢量图图片失真的解决办法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档