图表插件echars的使用案例

最新推荐文章于 2025-08-11 09:20:14 发布

转载最新推荐文章于 2025-08-11 09:20:14 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuhao-web/p/6378966.html

文章标签：

#java #javascript #ViewUI

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
  <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

%>
<!DOCTYPE html >
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="<%=basePath%>/echarts-2.2.7/build/dist/echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    require.config({
        paths: {
            echarts: '<%=basePath%>/echarts-2.2.7/build/dist'
        }
    });
        // 基于准备好的dom，初始化echarts实例
  

         // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main')); 
                    
                    option = {
                    	    title : {
                    	        text: '某站点用户访问来源',
                    	        subtext: '纯属虚构',
                    	        x:'center'
                    	    },
                    	    tooltip : {
                    	        trigger: 'item',
                    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    	    },
                    	    legend: {
                    	        orient : 'vertical',
                    	        x : 'left',
                    	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    	    },
                    	    toolbox: {
                    	        show : true,
                    	        feature : {
                    	            mark : {show: true},
                    	            dataView : {show: true, readOnly: false},
                    	            magicType : {
                    	                show: true, 
                    	                type: ['pie', 'funnel'],
                    	                option: {
                    	                    funnel: {
                    	                        x: '25%',
                    	                        width: '50%',
                    	                        funnelAlign: 'left',
                    	                        max: 1548
                    	                    }
                    	                }
                    	            },
                    	            restore : {show: true},
                    	            saveAsImage : {show: true}
                    	        }
                    	    },
                    	    calculable : true,
                    	    series : [
                    	        {
                    	            name:'访问来源',
                    	            type:'pie',
                    	            radius : '55%',
                    	            center: ['50%', '60%'],
                    	            data:[
                    	                {value:335, name:'直接访问'},
                    	                {value:310, name:'邮件营销'},
                    	                {value:234, name:'联盟广告'},
                    	                {value:135, name:'视频广告'},
                    	                {value:1548, name:'搜索引擎'}
                    	            ]
                    	        }
                    	    ]
                    	};
                    	                    
            
                    // 为echarts对象加载数据 
                    myChart.setOption(option); 
                }
            );
    
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/liuhao-web/p/6378966.html