zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    求数组元素出现的次数
    数组的一些内置方法
    二维数组
    创建对象
    取出数组最大值与最小值
    4-jQuery
    3-jQuery
    2-jQuery
    1-jQuery
    Spark共享变量(广播变量、累加器)
  • 原文地址:https://www.cnblogs.com/banxian-yi/p/5357516.html
Copyright © 2011-2022 走看看