易捷框架之EChart 的使用

Posted 2020-10-01 小虎Tiger

需要用到百度的报表控件 ，总结如下：

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类型也为数组类型）

 

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

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