echart-20170209静态数据-柱图/饼图展示-个人练习

2/10/2017来源:心得技巧人气:3440

<%@ page language="java" contentType="text/html; charset=utf-8"     pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <!-- 1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。 --> <!-- 为ECharts准备一个具备大小(宽高)的Dom -->     <div id="main" style="height:400px"></div>          <!-- 2、新建<script>标签引入模块化单文件echarts.js -->     <!-- ECharts单文件引入 -->     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>          <!-- 3、新建<script>标签中为模块加载器配置echarts和所需图表的路径     (相对路径为从当前页面链接到echarts.js),引入图表文件见引入ECharts2 -->      <script type="text/Javascript">         // 路径配置         require.config({             paths: {                 echarts: 'http://echarts.baidu.com/build/dist'             }         });               //4、<script>标签内动态加载echarts和所需图表,      //回调函数中可以初始化图表并驱动图表的生成,option见API & Doc -->         // 使用         require(             [                 'echarts',                 'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载                 'echarts/chart/pie'             ],             function (ec) {                 // 基于准备好的dom,初始化echarts图表                 var myChart = ec.init(document.getElementById('main'));                                   var option1 = {                     tooltip: {                         show: true                     },                     legend: {                         data:['销量']                     },                     xAxis : [                         {                             type : 'category',                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                         }                     ],                     yAxis : [                         {                             type : 'value'                         }                     ],                     series : [                         {                             "name":"销量",                             "type":"bar",                             "data":[5, 20, 40, 10, 10, 20]                         }                     ]                 };                                  var option2 = {                    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%'],                                itemStyle : {                                normal : {                                    label : {                                      //  position : 'inner',                                        formatter : function (params) {                                                                   return params.name+ (params.percent - 0).toFixed(0) + '%'                                        }                                     },                                    labelLine : {                                        show : true                                    }                                }                                                            },                            data:[                                {value:300, name:'新增验资数量'},                                {value:500, name:'复核中验资数量'},                                {value:200, name:'工商审批中验资数量'},                                                         ]                        }                    ]                 };                                                              // 为echarts对象加载数据                  myChart.setOption(option2);              }         );     </script>           </body> </html>