echarts 分时

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">   
    .datagrid-header {
    position: absolute; visibility: hidden;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="basejs.jsp" %>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<title>Insert title here</title>
</head>
<body>
    <div id="main" style="width: 1000px;height:400px;"></div>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {                
                xAxis: [{
                    data: ['0935','0940','0945','0950','1455','1500','0935','0940','0945','0950','1455','1500']
                },
                {
                    data: ['','','','2016/03/16','','','','','','','2016/03/17','','','']
                }],
                yAxis: {},
                series: [{
                    type: 'k',
                    data: [
                        [20, 30, 10, 35],
                        [40, 35, 30, 55],
                        [33, 38, 33, 40],
                        [40, 40, 32, 42],
                        [34, 46, 55, 42],
                        [40, 40, 32, 42],
                        [40, 40, 32, 42],                        
                        [20, 30, 10, 35],
                        [40, 35, 30, 55],
                        [33, 38, 33, 40],
                        [40, 40, 32, 42],
                        [34, 46, 55, 42],
                        [40, 40, 32, 42],
                        [40, 40, 32, 42]
                    ]
                }]
            };

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

猜你喜欢

转载自my.oschina.net/hfq/blog/1619261