Echarts饼图显示模板
图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。可选为:
'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图)
'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图)
饼图:'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载,记得改pie
柱状图:'echarts/chart/bar'
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <%@ page language="java" import="java.util.*,java.lang.*" pageEncoding="UTF-8"%> <html> <head> <title>日志管理</title> <meta name="decorator" content="default"/> <meta charset="utf-8"> <!-- ECharts单文件引入 --> <!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> --> <script src="${ctxStatic }/js/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); option =替换部分 // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </head> <body> <ul class="nav nav-tabs"> <li ><a href="${ctx}/sys/log/list">日志列表</a></li> <li class="active"><a href="${ctx}/sys/log/view"><b>日志视图</b></a></li> </ul> <form:form id="searchForm" modelAttribute="bean" action="${ctx}/sys/log/view" method="post" class="breadcrumb form-search"> <b>重点模块访问数据统计 [系统总登录次数:<span style="color:green;">${xtdl}</span>]</b> </form:form> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:600px;"></div> </body> </html>