1. 程式人生 > >Web前端高階報表工具的使用:ECharts圖表工具

Web前端高階報表工具的使用:ECharts圖表工具

ECharts是由國人開發的在HTML中可以顯示圖表,並通過js可以對圖表進行操作的一個開源元件。

但ECharts是基於HTML5來開發出的圖表工具,因此必須保證瀏覽器支援HTML5才可以使用這個工具,也就是說IE8-的版本對這個的支援並不是很好。

更多瞭解可以登入http://echarts.baidu.com/

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/esl.js"></script>
	<script type="text/javascript">
		function init() {
			// 初始化所有的echarts和zrender的js檔案
			require.config({
	            paths: {
	                'js': 'js/js'
	            },
	            packages: [
	                {
	                    name: 'echarts',
	                    location: 'echarts',
	                    main: 'echarts'
	                },
	                {
	                    name: 'zrender',
	                    location: 'zrender',
	                    main: 'zrender'
	                }
	            ]
	        });
			
			// 初始化資料, 該資料可以通過AJAX返回JSON來拼寫。
			var option = {
    tooltip : {
        trigger: 'item',
        formatter: '{a} : {b}'
    },
    legend: {
        x: 'left',
        data:['家人','朋友']
    },
    series : [
        {
            type:'force',
            categories : [
                {
                    name: '人物',
                    itemStyle: {
                        normal: {
                            color : '#ff7f50'
                        }
                    }
                },
                {
                    name: '家人',
                    itemStyle: {
                        normal: {
                            color : '#87cdfa'
                        }
                    }
                },
                {
                    name:'朋友',
                    itemStyle: {
                        normal: {
                            color : '#9acd32'
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#800080'
                        }
                    },
                    nodeStyle : {
                        brushType : 'both',
                        strokeColor : 'rgba(255,215,0,0.4)',
                        lineWidth : 8
                    }
                },
                emphasis: {
                    label: {
                        show: false
                        // textStyle: null      // 預設使用全域性文字樣式,詳見TEXTSTYLE
                    },
                    nodeStyle : {
                        r: 30
                    },
                    linkStyle : {}
                }
            },
            minRadius : 15,
            maxRadius : 25,
            density : 0.05,
            attractiveness: 1.2,
            nodes:[
                {category:0, name: '喬布斯', value : 10},
                {category:1, name: '麗薩-喬布斯',value : 2},
                {category:1, name: '保羅-喬布斯',value : 3},
                {category:1, name: '克拉拉-喬布斯',value : 3},
                {category:1, name: '勞倫-鮑威爾',value : 7},
                {category:2, name: '史蒂夫-沃茲尼艾克',value : 5},
                {category:2, name: '奧巴馬',value : 8},
                {category:2, name: '比爾-蓋茨',value : 9},
                {category:2, name: '喬納森-艾夫',value : 4},
                {category:2, name: '蒂姆-庫克',value : 4},
                {category:2, name: '龍-韋恩',value : 1},
            ],
            links : [
                {source : 1, target : 0, weight : 1},
                {source : 2, target : 0, weight : 2},
                {source : 3, target : 0, weight : 1},
                {source : 4, target : 0, weight : 2},
                {source : 5, target : 0, weight : 3},
                {source : 6, target : 0, weight : 6},
                {source : 7, target : 0, weight : 6},
                {source : 8, target : 0, weight : 1},
                {source : 9, target : 0, weight : 1},
                {source : 10, target : 0, weight : 1},
                {source : 3, target : 2, weight : 1},
                {source : 6, target : 2, weight : 1},
                {source : 6, target : 3, weight : 1},
                {source : 6, target : 4, weight : 1},
                {source : 6, target : 5, weight : 1},
                {source : 7, target : 6, weight : 6},
                {source : 7, target : 3, weight : 1},
                {source : 9, target : 6, weight : 1}
            ]
        }
    ]
};
                    
                    
			
			require(
	            [
	                'echarts',
	                'echarts/chart/force'
	            ],
	            function(ec) {
	                var myChart = ec.init(document.getElementById('mydiv'));
	                myChart.setOption(option);
	            }
	        )
		}
	</script>
  </head>
  
  <body onload="init();">
  	<div id="mydiv" style="width:1000px;height:600px;"></div>
  </body>
</html>