Web前端高级报表工具的使用：ECharts图表工具

最新推荐文章于 2024-09-29 17:33:12 发布

CrystalLee1026

最新推荐文章于 2024-09-29 17:33:12 发布

阅读量4.2k

点赞数

文章标签： web前端报表工具 Echarts

本文链接：https://blog.csdn.net/u013706382/article/details/29559047

版权

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 οnlοad="init();">
  	<div id="mydiv" style="width:1000px;height:600px;"></div>
  </body>
</html>