HTML 绘制曲线图

最新推荐文章于 2024-05-14 02:27:52 发布

モザイクカケラ

最新推荐文章于 2024-05-14 02:27:52 发布

阅读量1.5w

点赞数 1

分类专栏：嵌入式linux-web 嵌入式系统开发文章标签： html 曲线图

本文链接：https://blog.csdn.net/xfeng20/article/details/86534202

版权

嵌入式linux-web 同时被 2 个专栏收录

23 篇文章 2 订阅

订阅专栏

嵌入式系统开发

18 篇文章 0 订阅

订阅专栏

先上链接资源

非常漂亮的HTML5数据曲线走势图表样式代码
 10款绚丽实用的HTML5图表动画应用
 优秀的图表JS插件

复制粘贴删库跑路

一点题外话

过去钟繇评价荀攸：我每有所行，反复思惟，自谓无以易；以咨公达，辄复过人意。
身边总有人在某些方面比自己强，本当にうれしい

开发总结

Echart开发总结：
Echart所绘制的区域及其父类，包括html、body都必须指定style=“height: xxx%”
如果不指定会报告Echart Can’t get dom width or height错误。网上有很多帖子都不解决问题，坑人的,就这么一个简单的前段框架，baidu还不至于蠢到兼容性很差
上我移植好的代码，注意从html中的 style=“height: 100%”

<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8">
    <title>用户参数配置</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    
    <link rel="stylesheet" type="text/css" href="../stylesheets/theme.css">
    <link rel="stylesheet" href="../lib/font-awesome/css/font-awesome.css">

    <script src="../lib/jquery-1.7.2.min.js" type="text/javascript"></script>
	<!-- Demo page code -->
	
    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../../assets/ico/apple-touch-icon-57-precomposed.png">
  </head>	

<body style="height: 100%; margin: 0">

    <div class="navbar">
        <div class="navbar-inner">
                <ul class="nav pull-right">
                    
                    <li><a href="#" class="hidden-phone visible-tablet visible-desktop" role="button">Settings</a></li>
                    <li id="fat-menu" class="dropdown">
                        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-user"></i> 用户
                            <i class="icon-caret-down"></i>
                        </a>

                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="">我的账号</a></li>
                            <li class="divider"></li>
                            <li><a tabindex="-1" class="visible-phone" href="">Settings</a></li>
                            <li class="divider visible-phone"></li>
                            <li><a tabindex="-1" href="../index.html">退出</a></li>
                        </ul>
                    </li>
                    
                </ul>
        </div>
    </div>
	
	
    <div class="sidebar-nav">
        <a href="#legal-menu" class="nav-header" data-toggle="collapse"><i class="icon-legal"></i>记录信息</a>
        <ul id="legal-menu" class="nav nav-list collapse">
            <li ><a href="hisRecord.html">历史记录</a></li>
			<li ><a href="alamRecord.html">告警记录</a></li>		
        </ul>
    </div>


    <div class="content" style="height: 100%">
        
        <div class="header">

            <h1 class="page-title">用户参数</h1>
        </div>
        
                <ul class="breadcrumb">
            <li><a href="">策略配置</a> <span class="divider">/</span></li>
            <li class="active">用户参数</li>
        </ul>
	

       <div id="container" style="height: 80%"></div>
	   <script type="text/javascript" src="../js/echarts.js"></script>
       <script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'line',
					areaStyle: {}
				}]
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
       </script>
	</div>   
   </body>  
</html>