js 折线图

最新推荐文章于 2024-01-09 15:01:39 发布

星星~笑笑

最新推荐文章于 2024-01-09 15:01:39 发布

阅读量855

点赞数

分类专栏： js 文章标签： js 折线图重叠

本文链接：https://blog.csdn.net/u014724048/article/details/82115433

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参考地址：http://echarts.baidu.com/examples/index.html

Html---代码：

	   
<!doctype html>
<html style="height: 100%">
<head>
	<meta charset="utf-8">
	<!-- <meta name="renderer" content="webkit"> -->
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->


	<!-- <link href="__PUBLIC__/simpleboot/themes/{:C('SP_ADMIN_STYLE')}/theme.min.css" rel="stylesheet"> -->
    <!-- <link href="__PUBLIC__/simpleboot/css/simplebootadmin.css" rel="stylesheet"> -->
    <!-- <link href="__PUBLIC__/js/artDialog/skins/default.css" rel="stylesheet" /> -->
    <!-- <link href="__PUBLIC__/simpleboot/font-awesome/4.4.0/css/font-awesome.min.css"  rel="stylesheet" type="text/css"> -->
    <!-- <style> -->
		<!-- .length_3{width: 180px;} -->
		<!-- form .input-order{margin-bottom: 0px;padding:3px;width:40px;} -->
		<!-- .table-actions{margin-top: 5px; margin-bottom: 5px;padding:0px;} -->
		<!-- .table-list{margin-bottom: 0px;} -->
	<!-- </style> -->

<!-- <script type="text/javascript"> -->
<!-- //全局变量 -->
<!-- var GV = { -->
    <!-- DIMAUB: "__ROOT__/", -->
    <!-- JS_ROOT: "public/js/", -->
    <!-- TOKEN: "" -->
<!-- }; -->
<!-- </script> -->

    <!-- <script src="__PUBLIC__/js/jquery.js"></script> -->
    <!-- <script src="__PUBLIC__/js/wind.js"></script> -->
    <!-- <script src="__PUBLIC__/simpleboot/bootstrap/js/bootstrap.min.js"></script> -->
<!-- <if condition="APP_DEBUG"> -->
	<!-- <style> -->
		<!-- #think_page_trace_open{ -->
			<!-- z-index:9999; -->
		<!-- } -->
	<!-- </style> -->

<!-- </if>	 -->

</head>
   <body style="height: 100%; margin: 0">
		<div class="wrap"   style="height: 100%">
			<ul class="nav nav-tabs">
				<li class="active"><a >登录趋势图</a></li>
			</ul>
			<form class="well form-search" name="form1"  method="post" action="{:U('Channel/loginlineindex')}">
				
				登录时间：
				<input type="text" name="start_time" class="js-date date" value="{$formget.start_time}" style="width: 80px;" autocomplete="off">-
				<input type="text" class="js-date date" name="end_time" value="{$formget.end_time}" style="width: 80px;" autocomplete="off"> &nbsp; &nbsp;
				<input type="submit" class="btn btn-primary" value="搜索">
				<input type="button" class="btn btn-primary" style="background-color: #1dccaa;" value="三个月" onclick="form1.action='{:U('Channel/loginlineindex',array('type'=>'1'))}';form1.submit();"/>
				<input type="button" class="btn btn-primary" style="background-color: #1dccaa;" value="一年" onclick="form1.action='{:U('Channel/loginlineindex',array('type'=>'2'))}';form1.submit();"/>
			</form>
       <div id="container" style="height: 100%"></div>
	   </div>
       <script type="text/javascript" src="__PUBLIC__/home/line/echarts.min.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/echarts-gl.min.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/ecStat.min.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/dataTool.min.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/china.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/world.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/bmap.min.js"></script>
       <script type="text/javascript" src="__PUBLIC__/home/line/simplex.js"></script>
	   <script src="__PUBLIC__/js/common.js"></script>
       <script type="text/javascript">

var tab_lists = {$tab_lists};
var ioscount_lists = {$ioscount_lists};
var andoridcount_lists = {$andoridcount_lists};
var pccount_lists = {$pccount_lists};

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '多 X 轴示例';

var colors = ['#5793f3', '#d14a61', '#58d776'];


option = {
    color: colors,

    
    legend: {
        data:['IOS', 'Android', 'PC']
    },
     grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '登录量  ' + params.value;
                    }
                }
            },
            data: tab_lists
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
           
            data: ""
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[2]
                }
            },
           
            data: ""
        }
      
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name:'IOS',
            type:'line',
            <!-- xAxisIndex: 1, -->
            smooth: true,
            <!---data:['2', '2', '1']--->
            data: ioscount_lists
        },
        {
            name:'Android',
            type:'line',
            smooth: true,
            data: andoridcount_lists
        }
        ,
        {
            name:'PC',
            type:'line',
            smooth: true,
            data: pccount_lists
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

js：下载地址：

需要的原文件的可留言。