【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 }); } }); }