Web前端高階報表工具的使用：ECharts圖表工具
阿新 • • 發佈：2019-02-10
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>