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>重点模块访问数据统计&nbsp;&nbsp;&nbsp;[系统总登录次数：<span style="color:green;">${xtdl}</span>]</b>
    </form:form>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px;"></div>
</body>
</html>

秒客网

Echarts饼图显示模板

相关文章