Echart學習

時間 2020-06-08

標籤 echart 學習简体版

原文原文鏈接

（一）初步入門javascript

　　1，可視化經典案例：http://www.storagelab.org.cn/zhangdi/2015/10/27/css

（二）準備工做：導入的jar包：https://blog.csdn.net/weixin_43209201/article/details/86305569html

　　　　　　　　導入的js文件：echarts.main.js jquary-x.x.x.main.jshtml5

　　　　　　　　Echarts的官網文檔：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartsjava

（三）使用後臺數據繪製圖表jquery

　　1，點擊頁面，跳轉連接設爲圖表頁面的url <a href="chart-1.html">統計圖</a>web

　　2，servlet中接受從數據庫查到的數據並轉爲json類型ajax

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        QueryFromMySql queryFromMySql=new QueryFromMySql();
        ArrayList<LeiXinTj> leiXinTjs=queryFromMySql.QueryByTypet();
　　　　　　數據庫讀取的數據：
　　　　　　
        response.setContentType("text/html; charset=utf-8");
        System.out.println("**************************************");
        JSONArray jsonArray=JSONArray.fromObject(leiXinTjs);  //即將數據轉爲json類型
        System.out.println(jsonArray.toString());
        PrintWriter writer = response.getWriter();
        writer.println(jsonArray);
        writer.flush();
        writer.close();
        
    }

　　3，在展現圖表頁面用Ajax將數據傳給圖表：chrome

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>統計圖</title>
</head>
<!--_footer 做爲公共模版分離出去-->
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 做爲公共模版分離出去-->

<!--請在下方寫此頁面業務相關的腳本-->
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.onload=function(){
    //將數據傳到圖表： function loadData(option) {
        $.ajax({
            type : 'post',    //傳輸類型
            async : false,    //同步執行
            url : '../QueryByTypet',    //Servlet的路徑
            data : {},
            dataType : 'json', //返回數據形式爲json
            success : function(result) {
                if (result) {
                    //初始化xAxis[0]的data
                    option.xAxis[0].data = [];
                    for (var i=0; i<result.length; i++) {
                        option.xAxis[0].data.push(result[i].name);
                    }
                    //初始化series[0]的data
                    option.series[0].data = [];
                    for (var i=0; i<result.length; i++) {
                        option.series[0].data.push(result[i].num);
                    }
                }
            },
            error : function(errorMsg) {
                alert("加載數據失敗");
            }
        });//AJAX
    }//loadData()
    
    var dom = document.getElementById("container");
    var nav=document.getElementById("nav");
　　nav.innerHTML='<i class="Hui-iconfont">&#xe67f;</i> 首頁 <span class="c-gray en">&gt;</span> 信件類型統計<span class="c-gray en">&gt;</span> 統計圖 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>';
    //繪製圖表：var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['信件類型']
        },
        xAxis: [
            {
                type: 'category',
                
            }
        ],
        yAxis: [
            {
                type: 'value',
                
            }
        ],
        series: [
            {
                name: '信件類型',
                type: 'bar',
               
            }
        ]
    };
    ;
    loadData(option);
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}
</script>
<body>
<nav class="breadcrumb" id="nav">
</nav>
<div class="page-container">
    <div id="container" style="min-width:700px;height:400px"></div>
</div>
<footer class="footer mt-20">
    <div class="container">
        <p>感謝大家的使用 &copy;2020 北京信件統計<br>
            本後臺系統由<a href="" target="_blank" title="">石家莊鐵道大學軟件工程</a>提供技術支持</p>
            
    </div>
</footer>
</body>
</html>