码迷,mamicode.com
首页 > 其他好文 > 详细

易捷框架之EChart 的使用

时间:2017-08-08 11:00:16      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:center   items   共享   ret   efault   tofixed   使用   common   enter   

需要用到百度的报表控件 ,总结如下:

1,先引入开发包,以及主题包:

   

<%@ include file="./common/echarts_header.jsp"%>

2,普通初始化图表,通过调用开发包

                                            eCharts0 = ec;
                                            myChart0 = eCharts0.init(document
                                                    .getElementById(‘share‘),
                                                    ‘default‘);
                                            myChart0.showLoading({
                                                text : "图表数据正在努力加载..."
                                            }
require([ ‘echarts‘,‘echarts/chart/pie‘, // 使用饼图就加载pie模块,按需加载], DrawEChart0 //异步加载的回调函数绘制图表  
                                        );

3,设置option属性

  

//定义图表options  
                                            var options0 = {
                                                title : {
                                                    text : "共享分布统计",
                                                    x : "center"
                                                },
                                                tooltip : {
                                                    show : false,
                                                    trigger : ‘item‘,
                                                    formatter : "{a} <br/>{b} : {c} ({d}%)"
                                                },
                                                legend : {
                                                    orient : ‘vertical‘,
                                                    x : ‘left‘,
                                                    y : ‘top‘
                                                },
                                                toolbox : {
                                                    show : true

                                                },
                                                calculable : false,
                                                series : [ {
                                                    name : ‘共享类型‘,
                                                    type : ‘pie‘,
                                                    radius : ‘60%‘,
                                                    center : [ ‘51%‘, ‘55%‘ ],
                                                    itemStyle : {
                                                        normal : {
                                                            label : {
                                                                position : ‘outer‘,
                                                                formatter : function(
                                                                        params) {
                                                                    return params.name
                                                                            + ":"
                                                                            + params.value
                                                                            + "类("
                                                                            + (params.percent - 0)
                                                                                    .toFixed(0)
                                                                            + ‘%)‘
                                                                }
                                                            },
                                                            labelLine : {
                                                                show : true
                                                            }
                                                        },
                                                        emphasis : {
                                                            label : {
                                                                show : true,
                                                                position : ‘inner‘,
                                                                formatter : "{b}:{c}\n{d}%"
                                                            }
                                                        }

                                                    },
                                                } ]
                                            };
                                            
                                        }

 

其中:title:表示标题,

         tooltip:提示框,

        legend图例,

      calculable可设置是否拖拽,

       series设置数据(data类型也为数组类型)

 

到这就算是基本完事。。。。。

剩下的优化自行百度。。。。

易捷框架之EChart 的使用

标签:center   items   共享   ret   efault   tofixed   使用   common   enter   

原文地址:http://www.cnblogs.com/xiaohu1218/p/7305287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!