//请将$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
});
}
});
}
