android加载本地html实现图表，Echarts宽度100%变为100px

最新推荐文章于 2021-08-11 11:44:27 发布
最新推荐文章于 2021-08-11 11:44:27 发布
阅读量193 收藏
点赞数
分类专栏： 随记 文章标签： js jquery javascript android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq734048504/article/details/107616968
版权

html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery-1.7.1.min.js"></script>
</head>
<body style="background-color:#425DFF;">

    <div style="position:relative;width: 100%;height:200px;background-color:#fff;border-radius:10px;">

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="position:absolute;z-index:2;height:100%;"></div>

        <!--<div id="myDiv" style="position:absolute;z-index:3;color:#3571FE; top:5px;right:10px;font-size:14px" onclick="init()">查看详情</div>-->
    </div>

    <script type="text/javascript">

        var width;
        var height;
        var myChart;
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                height = document.body.clientHeight
                width = document.body.clientWidth
                // alert(height)
                $("#main").css("width",width);
                $("#main").css("height",height);
                setEcharts();
                $(window).resize(function() {
                    width = document.body.clientWidth
                    height = document.body.clientHeight
                    $("#main").css("width",width);
                    $("#main").css("height",height);
                });

            } else {
                alert("pc");
                //自适应设置
                width = $(window).width();
                height = $(window).height();
                // alert(height)
                $("#main").css("width",width-35);
                $("#main").css("height",height-360);
                setEcharts();
                $(window).resize(function() {
                    width = $(window).width();
                    height = $(window).height();
                    $("#main").css("width",width-35);
                    $("#main").css("height",height-360);
                });
            }
        }

        window.onload=function(){
            browserRedirect()
        }

        function setEcharts(){


            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'));

            //自适应
            window.onresize = myChart.resize;

            var data = myHtmlTestBean.getData().split(",").map(Number);
            var data2 = myHtmlTestBean.getTime();


            var aar2 = data2.split(",");

            var markLineOpt = {
                animation: false,
                symbol: ['none', 'none'],//去掉箭头
                lineStyle: {
                    type: 'solid'
                },
                data: [{
                    name: 'Y 轴值为 500 的水平线',
                    yAxis: 500
                }]
            };

            // 指定图表的配置项和数据
            var option = {

                title: {
                    text: '配件统计(月)',
                    show:true,
                    textAlign :'auto',
                    left: 'center',
                    top:'5px',
                    textStyle:{
                        fontWeight:'normal'
                    }
                },

                legend: {
                    data:['配件维修','配件更换','直接维修'],
                    //取消图例点击事件
                    selectedMode:false,
                    icon:'roundRect',
                    top:25
                },
                xAxis: {
                    type: 'category',


                    //从0开始
                    boundaryGap:false,
                    //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    data:aar2
                },
                yAxis: {

                    type: 'value'
                },
                dataZoom: [
                    //缩放
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0],
                        start: 1,
                        end: 100
                    }
                ],
                grid: {
                    left:'5%',
                    right:'10%',
                    bottom:'5%',
                    containLabel:true
                },
                series: [{

                    name:'配件维修',
                    //取消图表点击事件
                    clickable:false,
                    //data: [820, 932, 901, 934, 1290, 1330, 1320],
                    data:data,
                    type: 'line',
                    //是否平滑曲线显示
                    smooth: true,
                    //线条颜色
                    itemStyle: {
                            color: 'rgb(255, 0, 0)',
                            //显示数值
                            <!--normal: {label : {show: true}}-->
                        },

                    //警戒线
                    <!--markLine: markLineOpt,-->

                    //填充颜色
                    <!--areaStyle:{-->
                        //填充渐变颜色
                        <!--color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{-->
                                <!--offset: 0,-->
                                <!--color: 'rgb(255, 158, 68)'-->
                            <!--}, {-->
                                <!--offset: 1,-->
                                <!--color: 'rgb(255, 70, 131)'-->
                            <!--}])-->
                    <!--}-->
                }
                ,{

                    name:'配件更换',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    //data:data,
                    type: 'line',
                    //是否平滑曲线显示
                    smooth: true,
                    //线条颜色
                    itemStyle: {
                            color: 'rgb(0, 255, 0)'
                        },

                    //警戒线
                    <!--markLine: markLineOpt,-->
                    //填充颜色
                    <!--areaStyle:{-->
                        //填充渐变颜色
                        <!--color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{-->
                                <!--offset: 0,-->
                                <!--color: 'rgb(255, 158, 68)'-->
                            <!--}, {-->
                                <!--offset: 1,-->
                                <!--color: 'rgb(255, 70, 131)'-->
                            <!--}])-->
                    <!--}-->
                },{

                    name:'直接维修',
                    data: [150, 550, 160, 514, 1290, 830, 120],
                    //data:data,
                    type: 'line',
                    //是否平滑曲线显示
                    smooth: true,
                    //线条颜色
                    itemStyle: {
                            color: 'rgb(0, 0, 255)'
                        },

                    //警戒线
                    <!--markLine: markLineOpt,-->
                    //填充颜色
                    <!--areaStyle:{-->
                        //填充渐变颜色
                        <!--color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{-->
                                <!--offset: 0,-->
                                <!--color: 'rgb(255, 158, 68)'-->
                            <!--}, {-->
                                <!--offset: 1,-->
                                <!--color: 'rgb(255, 70, 131)'-->
                            <!--}])-->
                    <!--}-->
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }

    </script>
</body>
</html>

 

低调滴开发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Echarts图表能够跟随网页大小自适应缩放
zjh_hhh的博客
03-13 1966
关于Echarts图表能够跟随网页大小自适应缩放 最近在做项目的时候遇到了一个问题，做的Echarts图表不能跟随页面大小自适应，然后公司的一位大佬给出了一个方法，使用过后感觉很舒服，所以记录一下，直接看代码吧 首先先说一下这个方法 esresize.js 这个在GitHub上面应该是有的 然后先引入方法 import { EleResize } from '@/utils/esresize' 然后使用的话很简单，直接看代码吧 myCharts () { let myChart = ec
Echarts笔记——echarts图表自适应屏幕大小
XIATWO
03-31 3721
Echarts笔记——echarts图表自适应屏幕大小 <div id="main" style="height: 800px"></div> <!-- 只保留盒子的高度 --> window.onresize = function (ec) { // 监听窗口大小变化 // console.log(ec) myChart1.resize() // 自适应大小变化 } <!DOCTYPE...
echarts图表宽度设置100%，结果echarts宽度只有100px，解决图表自适应宽度问题
时间在飞飞的博客
08-11 8495
问题 我的echarts在tab选项卡中显示，为了自适应，用来渲染图表的div的宽度为100%，但是charts渲染出来以后默认设置为了100px。 原因 图表的父容器 li 是隐藏的，我默认设置 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px 解决方法有两种（一种是切换tab以后，li显示以后再初始化图表，二是给li中渲染图表的div提前设置好width 宽度） 第一种可以把图表的实例...
html里柱状图怎么设置宽度,echarts设置柱状图柱状图粗细大小
weixin_30765637的博客
06-23 1013
主要属性：javascript//设置柱状图大小barWidth: 20,demo:css 柱状图大小// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({title: {text: '柱状图'},tooltip: {...
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制图表及异步加载数据】 在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型...
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
微信小程序中使用ECharts 异步加载数据实现图表功能
10-18
本教程将详细解释如何在微信小程序中使用ECharts 异步加载数据来实现图表功能。 首先，我们需要在页面的结构中引入ECharts的组件。以下是一个简单的例子： ```html ...
Echarts数据可视化dataZoom详解
dff407787736的专栏
02-08 2006
dataZoom=[//区域缩放 { id:'dataZoomX', show:true,//是否显示组件。如果设置为false，不会显示，但是数据过滤的功能还存在。 ...
Echarts-android适配
baidu_33512336的博客
08-19 1086
前言 对于图例展示，大家有很多不同的用法。
第三方组件—百度Echart基本应用（本地H5与客户端相互调用）
喵咪妮的博客
04-11 1027
第一次接触图表这种东西，最开始呢说的是对用MPAndroid，各种图表，什么条形图、折线图、饼图、散点图、组合图等等，组长说，好好写这个图表以后项目会用到，然而给我项目的时候，公司规定统一echart，那个心理真刺激，好了，开始我的第一篇博客之旅；Echart基本介绍及相应的属性这里我就不一一介绍了，贴官网（http://echarts.baidu.com/）；Html页面编写：1、在head中引...
echart图表设置宽度100%，结果显示100px问题解决
qq_45949366的博客
08-07 3139
echarts结合tab时，初次渲染组件moutnted的时候，未显示tab内的组件display为none，echarts无法获取父组件的高度100%，而转换成100px显示； 有网友通过 mounted的时候获取window.innerWidth，根据innerwidth设置echarts的宽幅，如：domBugChart.style.width = window.innerWidth * 0.8 + ‘px’; 但这也相当于写死，如果window.innerWidth发生改变，echarts无法自适.
解决echarts图宽度自适应问题，设置100%宽度显示100px
热门推荐
李瑞清的博客
06-05 1万+
问题 我的echarts在卡片里面，为了自适应，我设置.stat图表div的宽度为100%，但是默认设置为了100px。 <nz-card [ngStyle]="{display:statShow}" class="statInfo" [nzExtra]="statTemplate"> <div #statInfo class="stat"></div> </nz-card> 原因 图表的父容器statInfo是隐藏的，我默认设置 displ
android:加载html，太宽，适配解决方案。
Pumpkin's Blog
08-25 867
android:加载html，太宽，适配解决方案。 首先改的话必须的改html，所以我们直接在代码里插入html，设置他自动适配手机屏幕的宽度。 String css = "<style type=\"text/css\"> " + "img {" + "width:100%;" +//图片宽度填充屏幕 "height:auto;" +//图片高度自动 "}" +
Android使用Echart实现统计图
迟到的微笑
08-29 4680
今天给大家分享的是：如何在android端使用echart实现统计图 我们来看一下实现效果 首界面 折线图 柱状图 下面再看一下我们的工程截图，最核心的两个文件我已经标注出来了。 下面来看实现过程 首先需要在Echarts官网下载echarts.min.js文件 这里直接贴出下载地址 然后将下载的放到我们项目的assets目录下 接着编写我们的html文件 ...
Android 使用Echarts
qq_2790289459的博客
06-12 9333
官网：https://www.echartsjs.com/index.html 参考：https://www.jianshu.com/p/c2b589170379 在官网上我们可以获取我们所需要的js Android 使用： 上面的依赖是为了使用定义好的etcharts图表中展示的各个js代码节点的属性，设置好后转变为json，然后调用展示，将数据传入，在上面的html代码中会将json转...
关于Android加载HTML页面中的图片显示问题的解决办法
Kris_Liu
12-21 3934
这是一个很简单的问题，但是遇到了好些人也会百度找解决的办法，如果你只会Java对HTML不太了解的话可以参考，但是在webviewsetting中一定要设置支持图片加载，下图便是studio中解决方法 这是显示后的效果图
vue使用echarts 宽度设置100% 却只有100px
最新发布
05-11
如果你想让 echarts 图表的宽度设置为 100% 却只有 100px 的问题，一般有以下两种原因： 1. 父元素宽度不足 可能是因为 echarts 所在的父元素宽度不够，导致 echarts 图表只能继承父元素的宽度，最终导致 echarts ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值