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

来源：互联网发布：广告投放算法好处编辑：程序博客网时间：2024/05/19 04:56
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 onload="init();">  <div id="mydiv" style="width:1000px;height:600px;"></div>  </body></html>
0 0