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>

　　具体流程：数据库

　　　　1，引入echart.js文件在script中

　　　　2，建立DOM元素

　　　　3，配置图表属性