Pentaho6.1中Echarts3.X图形联动与下钻详解

最新推荐文章于 2024-04-17 09:30:15 发布

weixin_34362991

最新推荐文章于 2024-04-17 09:30:15 发布

阅读量506

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 数据库 python ViewUI

原文链接：https://my.oschina.net/TaoPengFeiBlog/blog/777048

本文介绍如何在PentahoCDE中使用Echarts实现图形联动、下钻及自适应等功能，包括图形初始化渲染、点击联动刷新、下钻图形返回等核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1、软件环境

操作系统：Windows10 64位
可视化图形库版本：Echarts3.X
Pentaho版本： biserver-ce-6.1.0.1-196

约定：本文将不对echarts的库文件的引入和echarts风格的代码编写规范做讲解，若有不懂地方，请阅读本人的博客文章https://my.oschina.net/u/2453090/blog/774905

2、本文写作目标

实现Echarts图形的联动与下钻
实现多个Echarts图形的自适应
实现Echarts图形与Pentaho CDE组件的交互
代码优化

3、本文绘图目标

（1）图形样本

（2）图形元素

该图形分为2个区：顶部的查询按钮和图形展示区

查询按钮使用的是Pentaho的按钮组件

图形展示区的联动是通过点击门店柱状图来实现的

4、代码讲解

我们使用Pentaho CDE作图时，一般很少考虑图形联动，因为Pentaho自身的一套传参、监听机制帮我们做了很多事情，这大大提高了我们的开发效率；一旦引入第三方可视化库（Echarts），开发者就要自己实现这一套机制。

图形联动思路：大体分为以下几大步

点击门店柱状图时获取当前柱子的信息，这就要给门店柱状图绑定一个click事件；
click事件需要做2件事：（1）传递参数，（2）刷新与之关联的图形；
传递参数可以通过ajax异步加载来实现，数据走的是通过Pentaho CDA来获取；此外，我们还要写个函数重新渲染Echarts图形，实现刷新的功能。

废话不多说，直接上代码，，，，，

代码片段一：

下图是代码片段一的位置：

代码片段一的具体内容见下面编辑框：

/**
 *  页面初始化的图形渲染
 */
function initCharts(){
    /*********************************************
    *                 支付方式饼图               *
    *********************************************/    
    var discountTypeUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=DiscountTypeQueryBefore";
    discountTypeUrl += "&parambutton_event=" + button_event;
    
    var discountTypeJSON = readJSONFile(discountTypeUrl).resultset;
    var discountTypeChart = echarts.init(document.querySelector("#DiscountTypeHtmlObj"));
    EchartsChartsEncapsulation(
        GetDiscountTypeOption(
            PieDataEncapsulation(discountTypeJSON).getDatas(),
            PieDataEncapsulation(discountTypeJSON).getDatas()
        ),
        discountTypeChart
    );
    /*********************************************
    *                   时段柱状图               *
    *********************************************/
    var hourNoUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=HourNoQueryBefore";
    hourNoUrl += "&parambutton_event=" + button_event;
    
    var hourNoJSON = readJSONFile(hourNoUrl).resultset;
    var hourNoChart = echarts.init(document.querySelector("#HourNoHtmlObj"));
    EchartsChartsEncapsulation(
        GetHourNoOption(
            BarDataEncapsulation(hourNoJSON).getLegends(),
            BarDataEncapsulation(hourNoJSON).getDatas()
        ),
        hourNoChart
    );
    /*********************************************
    *                   门店柱状图               *
    *********************************************/	
    var outletUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=OutletQuery";
    outletUrl += "&parambutton_event=" + button_event;
    
    var outletJSON = readJSONFile(outletUrl).resultset;
    var outletChart = echarts.init(document.querySelector("#OutletHtmlObj"));
    var ShowSecondBarEcharts = function(){
        outletChart.setOption(
            GetOutletOption(
                BarDataEncapsulation(outletJSON).getLegends(),
                BarDataEncapsulation(outletJSON).getDatas()
            )
        );
        //给门店柱状图绑定click事件
        outletChart.on('click',function(param){
            refreshCharts(param.name);    //重新加载图形，达到刷新效果
        });
    }();
    AdaptionWindows(outletChart);
}
/**
 *  点击联动后页面的图形渲染 
 */
function refreshCharts(outletId){
    //刷新参数，实现与Pentaho CDE组件的交互
    Dashboards.fireChange("outletParam",outletId);
    /*********************************************
    *                 支付方式饼图               *
    *********************************************/   
    var discountTypeUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=DiscountTypeQuery";
    discountTypeUrl += "&parambutton_event=" + button_event + "&paramoutletParam=" + outletParam;
    
    var discountTypeJSON = readJSONFile(discountTypeUrl).resultset;
    var discountTypeChart = echarts.init(document.querySelector("#DiscountTypeHtmlObj"));
    EchartsChartsEncapsulation(
        GetDiscountTypeOption(
            PieDataEncapsulation(discountTypeJSON).getDatas(),
            PieDataEncapsulation(discountTypeJSON).getDatas()
        ),
        discountTypeChart
    );
    /*********************************************
    *                   时段柱状图               *
    *********************************************/
    var hourNoUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=HourNoQuery";
    hourNoUrl += "&parambutton_event=" + button_event + "&paramoutletParam=" + outletParam;
    
    var hourNoJSON = readJSONFile(hourNoUrl).resultset;
    var hourNoChart = echarts.init(document.querySelector("#HourNoHtmlObj"));
    EchartsChartsEncapsulation(
        GetHourNoOption(
            BarDataEncapsulation(hourNoJSON).getLegends(),
            BarDataEncapsulation(hourNoJSON).getDatas()
        ),
        hourNoChart
    );
    /*********************************************
    *              下钻到分类柱状图              *
    *********************************************/
    var itemCategoryUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=ItemCategoryQuery";
    itemCategoryUrl += "&parambutton_event=" + button_event + "&paramoutletParam=" + outletParam;
    
    var itemCategoryJSON = readJSONFile(itemCategoryUrl).resultset;
    var itemCategoryChart = echarts.init(document.querySelector("#OutletHtmlObj"));
    EchartsChartsEncapsulation(
        //hourNoUrl,
        //option   GetOutletOption  GetItemCategoryOption
        GetOutletOption(   // 这里沿用门店柱状图的封装
            BarDataEncapsulation(itemCategoryJSON).getLegends(),
            BarDataEncapsulation(itemCategoryJSON).getDatas()
        ),
        itemCategoryChart
    );
}

/**
 *  对下钻图形的返回原始状态的图形渲染
 */
function goBackCharts(){
    /*********************************************
    *                   门店柱状图               *
    *********************************************/	
    var outletUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=OutletQuery";
    outletUrl += "&parambutton_event=" + button_event;
    
    var outletJSON = readJSONFile(outletUrl).resultset;
    var outletChart = echarts.init(document.querySelector("#OutletHtmlObj"));
    var ShowSecondBarEcharts = function(){
        outletChart.setOption(
            //option
            GetOutletOption(
                BarDataEncapsulation(outletJSON).getLegends(),
                BarDataEncapsulation(outletJSON).getDatas()
            )
        );
        outletChart.on('click',function(param){
            refreshCharts(param.name);  
        });
    }();
    AdaptionWindows(outletChart);
}

代码片段一是上述思路的最直接体现，代码主体有2个函数：initCharts()和refreshCharts()。initCharts()用于网页首次加载时渲染Echarts图形的，refreshCharts()用于点击联动的刷新；浏览代码你会发现，上述代码的结构都差不多，是的。这里将相关功能做了封装，具体的实现细节将在代码片段二中给大家展示。上述代码的核心是绘制门店柱状图的代码片段，接下来我将这部分带单独抽出来做详细的讲解，其余的绘图代码功能类似，就不做重复叙述了。

门店柱状图代码片段详解（见图解）：

Ecahrts与Pentaho CDE交互代码片段详解（见图解）

理解下钻：

在这里，我将下钻分为2种情况：

情况一：单个图形的下钻，点击图形，在原有图形的基础上下钻到另一个图形，下钻前的图形和下钻后的图形绑定同一个DOM对象; 见例子：http://www.highcharts.com/demo/column-drilldown
情况二：2个以上图形之间的下钻，点击某个图形引起其他图形的重新渲染，也就是我们所说的“图形之间的联动”。

情况二我们之前已经说明过，此部分只针对情况一做详细的讲解。实现起来也很简单，在refreshCharts()函数中添加这段代码便可（下钻到分类柱状图）：

    /*********************************************
    *              下钻到分类柱状图              *
    *********************************************/
    var itemCategoryUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=ItemCategoryQuery";
    itemCategoryUrl += "&parambutton_event=" + button_event + "&paramoutletParam=" + outletParam;
    
    var itemCategoryJSON = readJSONFile(itemCategoryUrl).resultset;
    var itemCategoryChart = echarts.init(document.querySelector("#OutletHtmlObj"));
    EchartsChartsEncapsulation(
        //hourNoUrl,
        //option   GetOutletOption  GetItemCategoryOption
        GetOutletOption(   // 这里沿用门店柱状图的封装
            BarDataEncapsulation(itemCategoryJSON).getLegends(),
            BarDataEncapsulation(itemCategoryJSON).getDatas()
        ),
        itemCategoryChart
    );

下钻前

下钻后

代码片段二：

片段一的代码实现了我们的业务流程，具体功能上的逻辑问题在代码片段二中实现；在讲解代码片段二之前，我们来思考几个问题：

在用Echarts图形库做数据可视化展现之前，前端攻城狮需要做哪些准备工作？
本文的样例涉及到对图形的重复性调用，不同的数据源绑定到同一个图形上；如果我们不对所写代码的结构做适当的更改，我们的程序中将会出现大量的冗余的代码，作为一名开发攻城狮如何避免“重复造轮子”这一常见现象？如何写出可读性好、易于维护的代码？如何优化代码？

<1> 绘图前的准备工作；

我们要想图形化数据库中的数据，首先就要解决数据的抓取问题，好在Pentaho软件帮我们解决了这一比较头疼的问题；否则，我们就要通过java到后台数据库中获取数据。利用Pentaho的CDA很方便地就能获取数据库中的数据，具体是通过CDA的URL路径获取的，具体看下面代码：

// 读取CDA文件
var readJSONFile = function(url){
    var jsonData;
    $.ajax({
        type : 'GET',
		url : url,
		async : false,
		dataType : 'json',
		data : null,
		success : function(response){
			jsonData = response;
		}
	});
	return jsonData;
};

因此，在片段一的每个绘图代码里都有URL和结果集的部分，以门店柱状图为例：

/*********************************************
*                   门店柱状图               *
*********************************************/	
var outletUrl = "/pentaho/plugin/cda/api/doQuery?path=/public/dashboard/dashboard1-1.cda&dataAccessId=OutletQuery";
    outletUrl += "&parambutton_event=" + button_event;     //Pentaho CDA的URL
    
var outletJSON = readJSONFile(outletUrl).resultset;    //获取结果集
var outletChart = echarts.init(document.querySelector("#OutletHtmlObj"));    //获取图形的DOM
var ShowSecondBarEcharts = function(){
     //此次为绘图代码主体，不做分析，故省略掉......
     outletChart.setOption(
          GetOutletOption(
              //通过BarDataEncapsulation拼凑legend
              BarDataEncapsulation(outletJSON).getLegends(), 
              //通过BarDataEncapsulation拼凑series
              BarDataEncapsulation(outletJSON).getDatas()
          )
     );
}();
AdaptionWindows(outletChart);     //图形自适应

通过上述操作，我们拿到了相应的结果集，但是这个结果集是以CDA特有的数据格式存储的，我们需要将他转换成我们想要的数据格式，譬如echarts是用JSON的数据格式进行绑定的，我们是通过BarDataEncapsulation来获取的，具体的实现见下面编辑栏：

/**
*  实现对CDA数据的封装
*/
// 柱状图
var BarDataEncapsulation = function(cdaData){
    // 柱状图的X轴属性
    var legends = function(cdaData){
        var tempArr = [];
        for(var i = 0; i < cdaData.length; i++){
            tempArr.push({
                'name' : cdaData[i][0],
                selected : true
            });
            tempArr[i] = cdaData[i][0];
        }
        return tempArr;
    };
    //柱状图的X轴的值
    var data = function(){
        var tempArr = [];
        for(var i = 0; i < cdaData.length; i++){
            tempArr.push({
                'name' : cdaData[i][0], 
                'value'  : cdaData[i][1],
                selected : true    
            });
        }
        return tempArr;   
    };
    return {
        getLegends : function(){
            return legends(cdaData);
        },
        getDatas : function(){
            return data(cdaData);
        }
    };
};

此处我们就做了柱状图的数据的拼凑，并将其封装起来方便多次调用。

<2> 优化代码，抽取共性；

我们现在解决的数据的问题，万事具备，就差Echarts图形的option部分了；在写这部分代码前，我们需要做简单的思考，我们的option部分应该如何去写？我的做法是：将option部分的代码单独抽出来，作为一个单独的模块（函数）进行调用加载（调用），以门店柱状图为例：

/**
 *  对门店柱状图的option的简单封装
 */
 var GetOutletOption = function(XLegends,XDatas){
     return {
        tooltip : {
            trigger : 'item',
            formatter: function(params) {  
                var res = "门店：" + params.name + '<br/>' + "销售额：" + formatSaleAmt(params.value.toFixed(2)) + "元";  
                return res;  
            }  
        },
        calculable : true,
        xAxis : [
            {
                name : "门店",
                nameLocation : "end",
                type : 'category',
                show : true,
                //data : SecondBarDataEncapsulation.getLegends(),
                data : XLegends,
                axisLabel : {
                    interval : 0,
                    rotate: 20,
                    textStyle: {
                        fontSize : 10
                    }
                },
                axisLine : {
                    show : true,
                    color : "#007AC7"
                },
                splitLine : {
                    show: false
                }
            }
        ],
        grid : {    //控制图的大小
            x : 70,
            x2 : 70,
            y2 : 70    //y2可以控制X轴跟Zoom控件之间的间隔，避免以为倾斜后造成label重叠到Zoom上
        },
        yAxis : [
            {
                name : "营业额",
                nameLocation : "end",
                type : 'value',
                show : true,
                precision: 2,
                scale : true,
                axisLabel : {
                    formatter : function(value){
                        if(value !== 0){
                            return value/10000 + "W";
                        }else if(value === ""){
                            return 0;
                        }else{
                            return 0;
                        }
                    }
                },
                splitLine : {
                    show: false
                }
            }
        ],
        series : [
            {
                name : "单位/元",
                type : 'bar',
                precision: 2, 
                barWidth : 40,//柱图宽度
                itemStyle : {
                    emphasis: {
                        barBorderRadius: 30
                    },
                    normal : {
                        barBorderRadius:[10, 10, 10, 10],
                        color : function(params){
                            var colorList = [
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7"
                            ];
                            return  colorList[params.dataIndex];
                        }
                    },
                    label : {
                        show : true,
                        position : 'top',
                    }
                },
                data : XDatas,
                markPoint: {
                    symbol : 'pin',
                    silent : true,
                    itemStyle : {
                        normal : {
                            color : "#8EC21F"
                        }
                    },
                    label : {
                        normal : {
                            show : true,
                            position : "inside",
                            //formatter : "{c}",
                            formatter : function(params){
                                return (params.value/10000).toFixed(1) + "W";
                            },
                            textStyle : {
                                //color : "red",
                                //fontStyle : "bold",
                                //fontWight : "bold",
                                fontFamily : "sans-serif",
                                fontSize : "10"
                            }
                        }
                    },
                    data: [
                        {type: 'max', name: '最好门店'},
                        {type: 'min', name: '最差门店'}
                    ]
                },
                markLine : {
                    silent : true,
                    itemStyle : {
                        normal : {
                            color : "#8EC21F"
                        }
                    },
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }    
        ]
     };
 };

调用部分见下图：

为了方便我们的图形的多次使用，我们同样对整个绘图的操作使用一个函数进行加载：

/**
 * Echarts自适应屏幕
 * @param chart
 */
function AdaptionWindows(chart) {
    window.addEventListener('resize',function () {
        chart.resize();
    });
}
/**
 * 对 option的整体封装
 * @param url         CDA 数据源
 * @param option        Echarts绘图属性
 * @param chartsObj      图形Dom
 */
function EchartsChartsEncapsulation(option,chartsObj){
    var myChart = function(){
        chartsObj.setOption(option);
    }();
    //调用屏幕应的方法
    AdaptionWindows(chartsObj);
   // }
}

以时段柱状图为例（见下图）：

以上是对代码片段二的具体细节做的简单描述，希望大家就这段代码多多提提意见，具体代码见编辑框：

// 读取CDA 文件
var readJSONFile = function(url){
    var jsonData;
    $.ajax({
        type : 'GET',
		url : url,
		async : false,
		dataType : 'json',
		data : null,
		success : function(response){
			jsonData = response;
		}
	});
	return jsonData;
};
/**
 *  格式化金额数值
 */
var formatSaleAmt = function(nStr){
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)){
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    x2 = x2.slice(0,3);
    return x1 + x2;
};
/**
*  实现对CDA数据的封装
*/
// 饼状图
var PieDataEncapsulation = function(cdaData){
    var legends = function(cdaData){
        var tempArr = [];
        for(var i = 0; i < cdaData.length; i++){
           tempArr[i][0] = cdaData[i][0];
           tempArr[i][1] = cdaData[i][1];
        }
        return tempArr;
    };
    var data = function(cdaData){
        var tempArr = [];
        for(var i = 0; i < cdaData.length; i++){
            tempArr.push({
                'name' : cdaData[i][0],
                'value'  : cdaData[i][1],
                selected : true
			});
        }
        return tempArr;
    };
    return {
        getLegends : function(){
            return legends(cdaData);
        },
        getDatas : function(){
            return data(cdaData);
        }
    };
};
// 柱状图
var BarDataEncapsulation = function(cdaData){
    // 柱状图的X轴属性
    var legends = function(cdaData){
        var tempArr = [];
        for(var i = 0; i < cdaData.length; i++){
            tempArr.push({
                'name' : cdaData[i][0],
                selected : true
            });
            tempArr[i] = cdaData[i][0];
        }
        return tempArr;
    };
    //柱状图的X轴的值
    var data = function(){
        var tempArr = [];
        for(var i = 0; i < cdaData.length; i++){
            tempArr.push({
                'name' : cdaData[i][0], 
                'value'  : cdaData[i][1],
                selected : true    
            });
        }
        return tempArr;   
    };
    return {
        getLegends : function(){
            return legends(cdaData);
        },
        getDatas : function(){
            return data(cdaData);
        }
    };
};
/**
 *  对支付方式饼状图的option的简单封装
 */
var GetDiscountTypeOption = function(PLegends,PSeries){
    return {
        tooltip : {
            trigger : 'item',
            formatter: function(params) {  
                var res = " 支付类型：" + params.name + '<br/>' + "总金额：" + formatSaleAmt(params.value.toFixed(2)) + "元";  
                return res;  
            }  
        },
        legend : {
            orient: 'vertical',
            x: 'left',
            data : PLegends
        },
        toolbox : {
            show : true,
            orient : 'item',
            feature : {
                mark : {
                    show : true
                },
                magicType : {
                    show : true,
                    type : ['pie','funnel'],
                    option : {
                        funnel : {
                            x : '25%',
                            width : '50%',
                            funnelAlign : 'bottom',
                            max : 1548
                        }
                    }
                }
            }
        },
        calculable : true,
        series : [
            {
                //name : '折扣',
                name : "单位/元",
                type :'pie',
                radius : '75%',
                center: ['60%', '55%'],
                data : PSeries,
                avoidLabelOverlap: true,
                itemStyle : {
                    normal : {
                        label : {
                            position : 'inner',
                            formatter: function (params){
                                return (params.percent - 0) + '%';
                            },
                            textStyle : {
                                color : '#000'
                            },
                        },
                        labelLine : {
                            show : true
                        },
                        color : function(params){
                            var colorList = [
                                '#29A7E2','#8EC21F',
                                '#005BAC','#FED32B',
                                '#E80014','#F4A20E',
                                '#F4F20E'
                            ];
                            return colorList[params.dataIndex];
                        }
                    },
                    emphasis : {
                        label : {
                            show : true
                        },
                        labelLine : {
                            show :true
                        }
                    }
                },
                label : {
                    normal : {
                        
                    }
                },
                labelLine : {
                    normal : {
                        lineStyle : {
                            color : 'green'
                        },
                        smooth : 0.2,
                        length : 10,
                        length2 : 20
                    }
                }
            }
        ]            
    };
};
/**
 *  对时段柱状图的option的简单封装
 */
var GetHourNoOption =  function(XLegends, XDatas){
    return {
        tooltip : {
            trigger : 'item',
            formatter: function(params) {  
                var res = " 时段：" + params.name + "点" + '<br/>' + "销售额：" + formatSaleAmt(params.value.toFixed(2)) + "元";  
                return res;  
            }  
        },
        calculable : true,
        xAxis : [
            {
                name : "时段",
                //name : "单位/元",
                nameLocation : "end",
                type : 'category',
                show : true,
                //data : FirstBarLegends
                axisLine : {
                    show : true
                },
                axisLabel : {
                    /*
                    interval : "auto",
                    */
                    //rotate: 25,
                    interval : 0
                    /*
                    textStyle : {
                        color : "#007AC7"
                    }
                    */
                },
                splitLine : {
                    show: false
                },
                //data : FirstBarDataEncapsulation.getLegends()
                data : XLegends
            }
        ],
        grid : {    //控制图的大小
            borderWidth : 0,
            y : 80,
            //y2 : 60
            x : 70,
            x2 : 70,
            y2 : 70    //y2可以控制X轴跟Zoom控件之间的间隔，避免以为倾斜后造成label重叠到Zoom上
        },
        yAxis : [
            {
                name : "营业额",
                nameLocation : "end",
                type : 'value',
                show : true,
                axisLabel : {
                    formatter : function(value){
                        if(value !== 0){
                            return value/10000 + "W";
                        }else if(value == "null"){
                            return 0;
                        }else{
                            return 0;
                        }
                    }
                },
                splitLine : {
                    show: false
                }
            }
        ],
        series : [
            {
                //name : '时段营业额',
                name : "单位/元",
                type : 'bar',
                //barWidth : 20,//柱图宽度
                barWidth : 40,//柱图宽度
                itemStyle : {
                    normal : {
                        barBorderRadius:[10, 10, 10, 10],
                        color : function(params){
                            var colorList = [
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7"
                            ];
                            return  colorList[params.dataIndex];
                        }
                    },
                    label : {
                        show : true,
                        position : 'top',
                        formatter : '{b}\n{c}'
                    }
                },
                //data : FirstBarData
                //data : FirstBarDataEncapsulation.getDatas()
                //data : BarDataEncapsulation(getFirstBarJSON).getDatas()
                data : XDatas,
                markPoint: {
                    symbol : 'pin',
                    //silent : true,
                    itemStyle : {
                        normal : {
                            color : "#8EC21F"
                        }
                    },
                    label : {
                        normal : {
                            show : true,
                            position : "inside",
                            //formatter : "{c}",
                            formatter : function(params){
                                if(params.value < 9999){
                                    return (params.value/1000).toFixed(1) + "K";
                                }else{
                                    return (params.value/10000).toFixed(1) + "W";
                                }
                            },
                            textStyle : {
                                //color : "red",
                                //fontStyle : "bold",
                                //fontWight : "bold",
                                fontFamily : "sans-serif",
                                fontSize : "10"
                            }
                        }
                    },
                    data: [
                        {type: 'max', name: '最佳时段'},
                        {type: 'min', name: '最差时段'}
                    ]
                },
                markLine : {
                    silent : true,
                    itemStyle : {
                        normal : {
                            color : "#8EC21F"
                        }
                    },
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }   
        ]
    };
};
/**
 *  对门店柱状图的option的简单封装
 */
 var GetOutletOption = function(XLegends,XDatas){
     return {
        tooltip : {
            trigger : 'item',
            formatter: function(params) {  
                var res = "门店：" + params.name + '<br/>' + "销售额：" + formatSaleAmt(params.value.toFixed(2)) + "元";  
                return res;  
            }  
        },
        calculable : true,
        xAxis : [
            {
                name : "门店",
                nameLocation : "end",
                type : 'category',
                show : true,
                //data : SecondBarDataEncapsulation.getLegends(),
                data : XLegends,
                axisLabel : {
                    interval : 0,
                    rotate: 20,
                    textStyle: {
                        fontSize : 10
                    }
                },
                axisLine : {
                    show : true,
                    color : "#007AC7"
                },
                splitLine : {
                    show: false
                }
            }
        ],
        grid : {    //控制图的大小
            x : 70,
            x2 : 70,
            y2 : 70    //y2可以控制X轴跟Zoom控件之间的间隔，避免以为倾斜后造成label重叠到Zoom上
        },
        yAxis : [
            {
                name : "营业额",
                nameLocation : "end",
                type : 'value',
                show : true,
                precision: 2,
                scale : true,
                axisLabel : {
                    formatter : function(value){
                        if(value !== 0){
                            return value/10000 + "W";
                        }else if(value === ""){
                            return 0;
                        }else{
                            return 0;
                        }
                    }
                },
                splitLine : {
                    show: false
                }
            }
        ],
        series : [
            {
                name : "单位/元",
                type : 'bar',
                precision: 2, 
                barWidth : 40,//柱图宽度
                itemStyle : {
                    emphasis: {
                        barBorderRadius: 30
                    },
                    normal : {
                        barBorderRadius:[10, 10, 10, 10],
                        color : function(params){
                            var colorList = [
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7",
                                "#007AC7","#007AC7","#007AC7"
                            ];
                            return  colorList[params.dataIndex];
                        }
                    },
                    label : {
                        show : true,
                        position : 'top',
                    }
                },
                data : XDatas,
                markPoint: {
                    symbol : 'pin',
                    silent : true,
                    itemStyle : {
                        normal : {
                            color : "#8EC21F"
                        }
                    },
                    label : {
                        normal : {
                            show : true,
                            position : "inside",
                            //formatter : "{c}",
                            formatter : function(params){
                                return (params.value/10000).toFixed(1) + "W";
                            },
                            textStyle : {
                                //color : "red",
                                //fontStyle : "bold",
                                //fontWight : "bold",
                                fontFamily : "sans-serif",
                                fontSize : "10"
                            }
                        }
                    },
                    data: [
                        {type: 'max', name: '最好门店'},
                        {type: 'min', name: '最差门店'}
                    ]
                },
                markLine : {
                    silent : true,
                    itemStyle : {
                        normal : {
                            color : "#8EC21F"
                        }
                    },
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }    
        ]
     };
 };
/**
 * Echarts自适应屏幕
 * @param chart
 */
function AdaptionWindows(chart) {
    window.addEventListener('resize',function () {
        chart.resize();
    });
}
/**
 * 对 option的整体封装
 * @param url         CDA 数据源
 * @param option        Echarts绘图属性
 * @param chartsObj      图形Dom
 */
function EchartsChartsEncapsulation(option,chartsObj){
    var myChart = function(){
        chartsObj.setOption(option);
    }();
    //调用屏幕应的方法
    AdaptionWindows(chartsObj);
}
 
//载入echarts图形  
//window.onload = onload_echarts(0);   
window.onload = initCharts();

转载于:https://my.oschina.net/TaoPengFeiBlog/blog/777048