Skip to end of metadata
Go to start of metadata

 

【Designer脚本模板】


//请将$vcPlugin_demo_demoEcharts中的demo换成相应的分类标识
vsPluginComponentModule.factory('$vcPlugin_demo_demoEcharts', ['$vsPluginRegister', '$timeout', function ($vsPluginRegister, $timeout) {

    //echarts的图形的默认option
    var optionTemplate = {
	    title: {
        	show: false
        },
        legend: {
        	show: false,
            orient : 'horizontal',
            x : 'right',
            y : 'top',
            data:[],
            textStyle: {
	           color: "#999",
	           fontSize: 12
	        }
        },
        grid: {
            x: 42,
            y: 34,
            x2: 11,
            y2: 25,
	        borderWidth: 0,
	        borderColor: "#f0f0f0"
        },
        tooltip : {
            show:true,
			confine: true,
            trigger: 'axis',
            axisPointer: {
            	type: 'shadow'
            },
            position: function (pos, params, dom, rect, size) {
				var obj = {top: 0};
				obj['left'] = pos[0] < size.viewSize[0] / 2 ? pos[1] : pos[1]-size.contentSize[0];
				return obj;
			}
        },
        calculable : false,
        confine: true,
        animationDuration: 500,
        xAxis : [{
            type : 'category',
            boundaryGap: true,
            axisLine: {
                lineStyle: {
                    color: '#DDD',
                    width: 1,
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                },
                show: true
            },
            splitArea: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#F6F6F6'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle:{
                    color: '#666',
                    fontSize: 12
                }
            },
            data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
        yAxis : [{
            name: "销售额",
            type : 'value',
            axisLine: {
                lineStyle: {
                    color: '#B0B0B0',
                    width: 1,
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                },
                show: true
            },
            splitArea: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#F6F6F6'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle:{
                    color: '#666',
                    fontSize: 12
                }
            }
        }],
        series: [{
            name: "销售额",
            itemStyle: {
                normal: {
                    color: "#006BB7",
                    lineStyle : {
                        color: "#006BB7"
                    }
                }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'bar'
        }]
    };


    var factory = {

        //配置面板中显示[数据]配置
        showDataCategory: true,
        //配置面板中显示[边框]配置
        showBorderCategory: true,
        //配置面板中显示[基本]配置
        showBasicCategory: true,
        //配置面板中显示[浮动]配置
        showFixedCategory: true,
        //配置面板中显示[事件]配置
        showEventCategory: true,
        //配置面板中显示[标题]配置
        showTitleCategory: true,
        //配置面板中显示[预警]配置
        showThresholdCategory: true,

        /* 控件的初始化 */
        init: function(scope, element, component, $compile){
            scope.element = element;
            scope.component = component;
            //关闭页面过滤
            component.config.pageFilter = false;
            //控件的图形维度数量
            scope.component.config.chartDimensionCount = 1;
            //控件至少需要1个维度
            scope.component.config.minDimensionCount = 1;
            //控件至少需要1个度量
            scope.component.config.minMeasureCount = 1;
            //检查控件高度
            if(element.height() == 0){
				$timeout(function(){
					factory.init(scope, element, component, $compile, $sce, $timeout);
				},100);
			}else{
				factory.initChart(scope, element, component, $compile);
			}

        },
        
        initChart: function(scope, element, component, $compile){
			var myChart = echarts.init(element[0]);
            var option = component.config.chartConfig;
            if(option == null){
                //初始化echarts的option默认值
            	option = optionTemplate;
            	option.noDataLoadingOption = {};
            	//将option保存到chartConfig对象中
            	component.config.chartConfig = option;
            	component.config.legendOrient = "horizontal";
            }

            option.tooltip.position = function (pos, params, dom, rect, size) {
				var obj = {top: 0};
				obj['left'] = pos[0] < size.viewSize[0] / 2 ? pos[0] : pos[0]-size.contentSize[0];
				return obj;
			};

            //调用echarts的setOption方法
			try{
				myChart.setOption(option);
			}catch(e){
			}
            //将chart对象放到context中
            component.context.chart = myChart;
            //当控件尺寸改变时,改变echarts的尺寸
            component.context.resize = function(){
            	$timeout(function(){
            		if(component.context.chart.resize){
            			component.context.chart.resize();
            		}
            	}, 100);
            }
		},

        /*
         * 构建数据描述,此方法中对控件的数据进行处理
         */
        buildDataDescription: function(dataDescription, scope, element, component, $compile){
            //接收控件刷新数据的事件
            scope.$on(event_refreshComponentData, function(target, param){
                scope.queryComponentData(param, {
                    onSuccess: function(){
                        refreshChartView(scope, element, component, $compile);
                    }
                });
            });

            //接收维度联动事件
            scope.$on(event_chartDimensionValueChange, function(s, event){
                var dataIndex = -1;
				var axisLabels = component.config.chartConfig.xAxis[0].data;
				for(var i = 0; i < axisLabels.length; i++){
					if(""+axisLabels[i] === ""+event.source.value){
						dataIndex = i;
						break;
					}
				}
				if(dataIndex < 0){
					component.context.chart.dispatchAction({
						type: 'hideTip'
					});
					return;
				}
				if(dataIndex > -1){
					component.context.chart.dispatchAction({
						type: 'showTip',
						dataIndex:dataIndex,
						seriesIndex: 0
					});
				}
            });
        },

        /*
         * 构建图形描述,此方法中定义控件的配置面板
         */
        buildChartDescription: function(scope, element, component, $compile){
            //构建[图形]配置面板
            buildChartDescription(scope, element, component, $compile);
            //构建[轴线]配置面板
            buildAxisDescription(scope, element, component, $compile);
            //构建[度量]配置面板
            buildMeasureDescription(scope, element, component, $compile);
        }
    };
    
    //构建[轴线]配置面板
    var buildAxisDescription = function(scope, element, component, $compile){
        var category = {
			name: "axis",
			title: "轴线",
			groups: []
		};
        component.description.categories.push(category);
    }
    
    //构建[度量]配置面板
    var buildMeasureDescription = function(scope, element, component, $compile){
        var category = {
			name: "measures",
			title: "度量",
			groups: []
		};
        component.description.categories.push(category);
    }

    //构建[图形]配置面板
    var buildChartDescription = function(scope, element, component, $compile){
        var category = {
			name: "chart",
			title: "图形",
			groups: []
		};
        component.description.categories.push(category);

        //图例
		category.groups.push({
			title: {
				text: "图例"
			},
			elements: [{
				title: "显示",
				type: "radio",
				bind: "showLegend",
				items: [{
					name: "开启",
					value: "show"
				},{
					name: "关闭",
					value: "hide"
				}]
			}, {
				title: "方向",
				type: "radio-icon",
				bind: "legendOrient",
				items: [{
					name: "垂直",
					value: "vertical",
					icon: "fa fa-ellipsis-v"
				},{
					name: "水平",
					value: "horizontal",
					icon: "fa fa-ellipsis-h"
				}]
			}, {
				title: "垂直位置",
				type: "radio-icon",
				bind: "legendPosY",
				items: [{
					name: "顶部",
					value: "top",
					icon: "fa fa-minus",
					pStyle: "padding-top:0;padding-bottom:12px;"
				},{
					name: "居中",
					value: "center",
					icon: "fa fa-minus",
					pStyle: "padding-top:6px;padding-bottom:6px;"
				},{
					name: "底部",
					value: "bottom",
					icon: "fa fa-minus",
					pStyle: "padding-top:12px;padding-bottom:0px;"
				}],
				show: function(ele){
					return scope.component.config.legendOrient != null && scope.component.config.legendOrient === "vertical";
				}
			}, {
				title: "水平位置",
				type: "radio-icon",
				bind: "legendPosX",
				items: [{
					name: "左对齐",
					value: "left",
					icon: "fa fa-align-left"
				},{
					name: "居中",
					value: "center",
					icon: "fa fa-align-center"
				},{
					name: "右对齐",
					value: "right",
					icon: "fa fa-align-right"
				}],
				show: function(ele){
					return scope.component.config.legendOrient != null && scope.component.config.legendOrient === "horizontal";
				}
			}]
		});
		
		//监听showLegend属性
		scope.$watch('component.config.showLegend', function(newValue, oldValue){
			if(newValue != null && (oldValue == null || oldValue !== newValue)){
				var option = component.config.chartConfig;
				if(option.legend == null){
					option.legend = {
			        	show: false,
			            orient : 'horizontal',
			            x : 'right',
			            y : 'top',
			            data:["销售额"],
			            textStyle: {
				           color: "#999",
				           fontSize: 12
				        }
			        };
			        option.legend.show = newValue === "show";
			        refreshChartView();
				}else{
					option.legend.show = newValue === "show";
					scope.component.context.chart.setOption(option, true);
				}
			}
		});
		
    }

    //刷新控件渲染
    var refreshChartView = function(scope, element, component, $compile){
        //配置的维度
        var dimensions = component.config.datasourceConfig.dimensions;
        //配置的度量
        var measures = component.config.datasourceConfig.measures;
        //获取echarts的option配置对象
        var option = component.config.chartConfig;
        //服务器端返回的查询数据
        var data = component.context.data;
        if(data == null){
			return;
		}
		
		//删掉多余的指标配置
	    if(option.series.length > measures.length){
	    	var newSeries = [];
	    	for(var i = 0; i < measures.length; i++){
	    		newSeries.push(option.series[i]);
	    	}
	    	option.series = newSeries;
	    }
	    
	    //X轴的文字
	    var xAxisLabels = [];
	    for(var i = 0; i < data.length; i++){
	        xAxisLabels.push(data[i][dimensions[dimensions.length-1].name]);
	    }
	    if(xAxisLabels.length == 0){
	    	xAxisLabels = [""];
	    }
	    //图例的值
	    var legendData = [];
	    for(var m = 0; m < measures.length; m++){
	    	var serieData = [];
		    for(var i = 0; i < data.length; i++){
				if(isNaN(data[i][measures[m].name])){
					data[i][measures[m].name] = null;
				}
		        serieData.push(data[i][measures[m].name]);
		    }
		    if(serieData.length == 0){
		    	serieData = [""];
		    }
		    if(option.series[m] == null){
		    	var newOption = $.extend(true, {}, optionTemplate);
		    	option.series[m] = newOption.series[0];
		    }
		    option.series[m].data = serieData;
		    option.series[m].name = measures[m].label;

            //度量别名
            if(component.config["measureAlias_"+m] != null){
                option.yAxis[0].name = component.config["measureAlias_"+m];
            }
		    if(option.yAxis[0].name == null || option.yAxis[0].name.length == 0){
				option.yAxis[0].name = measures[m].label;
			}

            //柱子的颜色
	    	if(component.config["columnColor_"+m] == null){
		    	option.series[m].itemStyle.normal.color = "#4c87b5";
		    }else{
		    	option.series[m].itemStyle.normal.color=component.config["columnColor_"+m];
		    }
		    //堆积
		    option.series[m].stack = component.config["stack_"+m];
			if(VSUtils.isEmpty(option.series[m].stack) || !option.series[m].stack){
				delete option.series[m].stack;
			}

            //图例
		    var legendValue = measures[m].label;
		    if(component.config["measureAlias_"+m] != null && component.config["measureAlias_"+m].length > 0){
		    	option.series[m].name = component.config["measureAlias_"+m];
		    	legendValue = component.config["measureAlias_"+m];
		    }
		    legendData.push(legendValue);

            //series的name属性
			if(option.series[m].name == null || option.series[m].name.length == 0){
				option.series[m].name = measures[m].label;
			}
	    }

	    option.xAxis[0].data = xAxisLabels;
	    if(option.legend != null){
	    	option.legend.data = legendData;
	    }

        //如果度量数量大于1,或者配置了图例,不显示Y轴上面的名称
		if(measures.length > 1 || option.legend.show === true){
			option.yAxis[0].name="";
		}

		setTimeout(function(){
			component.context.chart.dispatchAction({
				type: 'hideTip'
			});
			setTimeout(function(){
				component.context.chart.setOption(option, true);
			});
		});

    };

    //请将第一个参数"demo"换成相应的分类标识
    $vsPluginRegister.register("demo", "demoEcharts", factory);

}]);

 

 

 

【View脚本模板】


var build_demoEcharts_component = function(scope, element, $compile, $timeout, $sce){

    var component = scope.component;
    
    var myChart = echarts.init(element[0]);
    var option = component.config.chartConfig;
    if(option == null){
        //初始化echarts的option默认值
    	option = optionTemplate;
    	option.noDataLoadingOption = {};
    	//将option保存到chartConfig对象中
    	component.config.chartConfig = option;
    	component.config.legendOrient = "horizontal";
    }
    
    option.tooltip.position = function (pos, params, dom, rect, size) {
		var obj = {top: 0};
		obj['left'] = pos[0] < size.viewSize[0] / 2 ? pos[0] : pos[0]-size.contentSize[0];
		return obj;
	};

    //调用echarts的setOption方法
	try{
		myChart.setOption(option);
	}catch(e){
	}
    //将chart对象放到context中
    component.context.chart = myChart;
    //当控件尺寸改变时,改变echarts的尺寸
    component.context.resize = function(){
    	$timeout(function(){
    		if(component.context.chart.resize){
    			component.context.chart.resize();
    		}
    	}, 100);
    }

    //刷新控件渲染,可直接将designer.js中的方法复制过来
    var refreshChartView = function(){
        //配置的维度
        var dimensions = component.config.datasourceConfig.dimensions;
        //配置的度量
        var measures = component.config.datasourceConfig.measures;
        //获取echarts的option配置对象
        var option = component.config.chartConfig;
        //服务器端返回的查询数据
        var data = component.context.data;
        if(data == null){
			return;
		}
		
		//删掉多余的指标配置
	    if(option.series.length > measures.length){
	    	var newSeries = [];
	    	for(var i = 0; i < measures.length; i++){
	    		newSeries.push(option.series[i]);
	    	}
	    	option.series = newSeries;
	    }
	    
	    //X轴的文字
	    var xAxisLabels = [];
	    for(var i = 0; i < data.length; i++){
	        xAxisLabels.push(data[i][dimensions[dimensions.length-1].name]);
	    }
	    if(xAxisLabels.length == 0){
	    	xAxisLabels = [""];
	    }
	    //图例的值
	    var legendData = [];
	    for(var m = 0; m < measures.length; m++){
	    	var serieData = [];
		    for(var i = 0; i < data.length; i++){
				if(isNaN(data[i][measures[m].name])){
					data[i][measures[m].name] = null;
				}
		        serieData.push(data[i][measures[m].name]);
		    }
		    if(serieData.length == 0){
		    	serieData = [""];
		    }
		    if(option.series[m] == null){
		    	var newOption = $.extend(true, {}, optionTemplate);
		    	option.series[m] = newOption.series[0];
		    }
		    option.series[m].data = serieData;
		    option.series[m].name = measures[m].label;

            //度量别名
            if(component.config["measureAlias_"+m] != null){
                option.yAxis[0].name = component.config["measureAlias_"+m];
            }
		    if(option.yAxis[0].name == null || option.yAxis[0].name.length == 0){
				option.yAxis[0].name = measures[m].label;
			}

            //柱子的颜色
	    	if(component.config["columnColor_"+m] == null){
		    	option.series[m].itemStyle.normal.color = "#4c87b5";
		    }else{
		    	option.series[m].itemStyle.normal.color=component.config["columnColor_"+m];
		    }
		    //堆积
		    option.series[m].stack = component.config["stack_"+m];
			if(VSUtils.isEmpty(option.series[m].stack) || !option.series[m].stack){
				delete option.series[m].stack;
			}

            //图例
		    var legendValue = measures[m].label;
		    if(component.config["measureAlias_"+m] != null && component.config["measureAlias_"+m].length > 0){
		    	option.series[m].name = component.config["measureAlias_"+m];
		    	legendValue = component.config["measureAlias_"+m];
		    }
		    legendData.push(legendValue);

            //series的name属性
			if(option.series[m].name == null || option.series[m].name.length == 0){
				option.series[m].name = measures[m].label;
			}
	    }

		component.context.originalXAxisLabels = null;
		if(!VSUtils.isEmpty(component.config.xAxisLabelScript)){
			component.context.originalXAxisLabels = angular.copy(xAxisLabels);
			try{
				var f = eval("(function(labelData){ "+Base64.decode(component.config.xAxisLabelScript)+"})");
				f.call(null, xAxisLabels);
			}catch(e){
				console.log(e);
			}
		}
	    option.xAxis[0].data = xAxisLabels;
	    if(option.legend != null){
	    	option.legend.data = legendData;
	    }

        //如果度量数量大于1,或者配置了图例,不显示Y轴上面的名称
		if(measures.length > 1 || option.legend.show === true){
			option.yAxis[0].name="";
		}

		setTimeout(function(){
			component.context.chart.dispatchAction({
				type: 'hideTip'
			});
			setTimeout(function(){
				component.context.chart.setOption(option, true);
			});
		});
    };

    //接收控件刷新数据的事件
    scope.$on(event_refreshComponentData, function(target, param){
        scope.queryComponentData(param, {
            onSuccess: function(){
                refreshChartView(scope, element, component, $compile);
            }
        });
    });

    //接收联动事件,可直接将designer.js中的方法复制过来
    scope.$on(event_chartDimensionValueChange, function(s, event){
        var dataIndex = -1;
		var axisLabels = component.config.chartConfig.xAxis[0].data;
		for(var i = 0; i < axisLabels.length; i++){
			if(""+axisLabels[i] === ""+event.source.value){
				dataIndex = i;
				break;
			}
		}
		if(dataIndex < 0){
			component.context.chart.dispatchAction({
				type: 'hideTip'
			});
			return;
		}
		if(dataIndex > -1){
			component.context.chart.dispatchAction({
				type: 'showTip',
				dataIndex:dataIndex,
				seriesIndex: 0
			});
		}
    });

}
  • No labels