You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1142 lines
50 KiB
1142 lines
50 KiB
PieLineCombChartWrapper = ExtendedChart.extend({ |
|
|
|
_init: function (dom, option) { |
|
console.log('init'); |
|
var self = this; |
|
self.chartBaseOption = option; |
|
|
|
this.width = option.width || $(dom).width();// 补充从dom获取. |
|
this.height = option.height || $(dom).height(); |
|
|
|
this.chartData = option.data; |
|
this.titleConf = option.titleConf; |
|
this.seriesConf = option.seriesConf; |
|
this.axisConf = option.axisConf; |
|
this.bgConf = option.bgConf; |
|
this.labelConf = option.labelConf; |
|
this.tipsConf = option.tipsConf; |
|
this.legendConf = option.legendConf; |
|
this.styleCond = option.styleCond; |
|
this.hyperLinkPie = option.pie; |
|
this.hyperLinkLine = option.line; |
|
this.isLoadAnimal = option.isLoadAnimal; |
|
|
|
if (window.FR != undefined) { |
|
FR.$defaultImport("/com/fr/plugin/pielinecomb/web/echarts.min.js", "js", false, false); |
|
} |
|
|
|
var chart = pielinecombecharts.init(dom); |
|
self.basechart = chart; |
|
|
|
window.testChart = chart; |
|
window.PieLineCombChartInst = this; |
|
|
|
this.initChart(); |
|
|
|
return chart; |
|
}, |
|
initChart: function() { |
|
var self = this; |
|
var myChart = self.basechart; |
|
|
|
/*if (self.titleConf.titlevisiable) { |
|
self.chartConf.margintop += 30; |
|
} |
|
if (self.legendConf.showlegend && self.legendConf.legendposition == "1") { |
|
self.chartConf.margintop += 20; |
|
} |
|
if (self.titleConf.titlevisiable && self.legendConf.legendposition == "1") { |
|
self.legendConf.legendtop += 20; |
|
}*/ |
|
|
|
var option = this.getSrcOption(); |
|
option.animation = this.isLoadAnimal || true; |
|
myChart.setOption(option); |
|
|
|
this.addBgRegion(); |
|
|
|
this.initEvent(); |
|
}, |
|
getChartImage: function() { |
|
var self = this; |
|
var imgstr = self.basechart.getDataURL({ |
|
"type": "png", |
|
"excludeComponents": ['toolbox','tooltip'] |
|
}); |
|
if (imgstr && imgstr.length > 0) { |
|
imgstr = imgstr.substr(imgstr.indexOf(',')+1); |
|
} |
|
return imgstr; |
|
}, |
|
getSrcOption: function() { |
|
var self = this; |
|
|
|
this.chartTop = 50; |
|
this.chartLeft = 60; |
|
this.chartButtom = 30; |
|
this.chartRight = 120; |
|
|
|
var axisYPosLeftNum = 0; |
|
var axisYPosRightNum = 0; |
|
self.axisConf.axisY.forEach(function(e){ |
|
if (e.position == 'right') { |
|
if (axisYPosRightNum > 0) { |
|
e.offset = axisYPosRightNum * 60; |
|
} |
|
axisYPosRightNum++; |
|
} else { |
|
if (axisYPosLeftNum > 0) { |
|
e.offset = axisYPosLeftNum * 60; |
|
} |
|
axisYPosLeftNum++; |
|
} |
|
}); |
|
this.chartLeft = axisYPosLeftNum * 60; |
|
this.chartRight = axisYPosRightNum * 60; |
|
|
|
// 标签 |
|
var pieLabelOpt = { |
|
show: self.labelConf.showPieLabel, |
|
position: self.labelConf.piePosition, |
|
rotate: self.labelConf.pieDirection, |
|
color: self.labelConf.pielabelcolor, |
|
fontFamily: self.labelConf.pielabelfamily, |
|
fontSize: self.labelConf.pielabelsize, |
|
fontStyle: this.getFontStyle(self.labelConf.pielabelstyle), |
|
fontWeight: this.getFontWeight(self.labelConf.pielabelstyle), |
|
formatter: function (params) { |
|
if (!params.value[1] || params.value[1] == 0 || params.value[1] == '') { |
|
return ''; |
|
} |
|
if (self.labelConf.pieValueType == "1") { |
|
var valueStr = ''; |
|
if (self.labelConf.showPieSeries) { |
|
valueStr += '|' + params.seriesName; |
|
} |
|
if (self.labelConf.showPieCategory) { |
|
valueStr += '|' + params.value[0]; |
|
} |
|
if (self.labelConf.showPieValue) { |
|
valueStr += '|' + params.value[1]; |
|
} |
|
return valueStr.length > 0 ? valueStr.substring(1) : ''; |
|
} else { |
|
return new Function(self.labelConf.pieJsPane).call({series: params.seriesName, data: params.value}); |
|
} |
|
} |
|
}; |
|
|
|
var lineLabelOpt = { |
|
show: self.labelConf.showLineLabel, |
|
position: self.labelConf.linePosition, |
|
rotate: self.labelConf.lineDirection, |
|
color: self.labelConf.linelabelcolor, |
|
fontFamily: self.labelConf.linelabelfamily, |
|
fontSize: self.labelConf.linelabelsize, |
|
fontStyle: this.getFontStyle(self.labelConf.linelabelstyle), |
|
fontWeight: this.getFontWeight(self.labelConf.linelabelstyle), |
|
formatter: function (params) { |
|
if (!params.value[1] || params.value[1] == 0 || params.value[1] == '') { |
|
return ''; |
|
} |
|
if (self.labelConf.lineValueType == "1") { |
|
var valueStr = ''; |
|
if (self.labelConf.showLineSeries) { |
|
valueStr += '|' + params.seriesName; |
|
} |
|
if (self.labelConf.showLineCategory) { |
|
valueStr += '|' + params.value[0]; |
|
} |
|
if (self.labelConf.showLineValue) { |
|
valueStr += '|' + params.value[1]; |
|
} |
|
return valueStr.length > 0 ? valueStr.substring(1) : ''; |
|
} else { |
|
return new Function(self.labelConf.lineJsPane).call({series: params.seriesName, data: params.value}); |
|
} |
|
} |
|
}; |
|
|
|
// 系列 |
|
var seriesNameArr = []; |
|
var axisXdata = []; |
|
var axisXLabeldata = []; |
|
var axisOpt = []; |
|
if (this.chartData.pie && this.chartData.pie.xAxisData && this.chartData.pie.xAxisData.length > 0) { |
|
axisXdata = this.chartData.pie.xAxisData; |
|
axisXLabeldata = this.chartData.pie.xAxisLabelData; |
|
|
|
for (var k in this.chartData.pie.seriesData) { |
|
var seriesToYAxisName = 'Y轴'; |
|
if (self.styleCond.pieSeriesAxis && self.styleCond.pieSeriesAxis.length > 0) { |
|
var tmpPieAxisCond = null; |
|
for (var m = 0; m < self.styleCond.pieSeriesAxis.length; m++) { |
|
var cond = self.styleCond.pieSeriesAxis[m].condition; |
|
if (cond) { |
|
cond = cond.replace(/\{系列名称\}/g, k); |
|
cond = cond.replace(/\{系列序号\}/g, this.chartData.pie.seriesIndex[k]); |
|
if (eval(cond)) { |
|
tmpPieAxisCond = self.styleCond.pieSeriesAxis[m]; |
|
break; |
|
} |
|
} else { |
|
tmpPieAxisCond = self.styleCond.pieSeriesAxis[m]; |
|
break; |
|
} |
|
} |
|
if (tmpPieAxisCond) { |
|
seriesToYAxisName = tmpPieAxisCond.axisYName; |
|
} |
|
} |
|
|
|
var seriesToYAxis = 0; |
|
for (var m = 0; m < self.axisConf.axisY.length; m++) { |
|
if (self.axisConf.axisY[m].axisName == seriesToYAxisName) { |
|
seriesToYAxis = m; |
|
break; |
|
} |
|
} |
|
|
|
// 条件属性 |
|
var tmpSeriesData = self.chartData.pie.seriesData[k]; |
|
for (var m = 0; m < tmpSeriesData.length; m++) { |
|
var categoryTmp = tmpSeriesData[m][0]; |
|
var valueTmp = tmpSeriesData[m][1]; |
|
tmpSeriesData[m] = { |
|
value: tmpSeriesData[m] |
|
}; |
|
// 配色 |
|
var condConf = self.getStyleCond('pie', 'color', k, categoryTmp, valueTmp); |
|
if (condConf) { |
|
tmpSeriesData[m].itemStyle = { |
|
color: condConf.itemcolor |
|
}; |
|
} |
|
|
|
// 标签 |
|
condConf = self.getStyleCond('pie', 'label', k, categoryTmp, valueTmp); |
|
if (condConf) { |
|
tmpSeriesData[m].label = { |
|
show: condConf.showPieLabel, |
|
position: condConf.piePosition, |
|
rotate: condConf.pieDirection, |
|
color: condConf.pielabelcolor, |
|
fontFamily: condConf.pielabelfamily, |
|
fontSize: condConf.pielabelsize, |
|
fontStyle: this.getFontStyle(condConf.pielabelstyle), |
|
fontWeight: this.getFontWeight(condConf.pielabelstyle), |
|
formatter: (function(obj){ |
|
var thisObj = $.extend(true, {}, obj); |
|
thisObj.series = k; |
|
thisObj.data = [categoryTmp, valueTmp]; |
|
return function(params){ |
|
if (thisObj.pieValueType == "1") { |
|
var valueStr = ''; |
|
if (thisObj.showPieSeries) { |
|
valueStr += '|' + params.seriesName; |
|
} |
|
if (thisObj.showPieCategory) { |
|
valueStr += '|' + thisObj.data[0]; |
|
} |
|
if (thisObj.showPieValue) { |
|
valueStr += '|' + thisObj.data[1]; |
|
} |
|
return valueStr.length > 0 ? valueStr.substring(1) : ''; |
|
} else { |
|
return new Function(thisObj.pieJsPane).call({series: thisObj.series, data: thisObj.data}); |
|
} |
|
}; |
|
})(condConf) |
|
}; |
|
} |
|
|
|
// 提示 |
|
condConf = self.getStyleCond('pie', 'tips', k, categoryTmp, valueTmp); |
|
if (condConf) { |
|
tmpSeriesData[m].tooltip = { |
|
show: condConf.showTip, |
|
backgroundColor: self.hexToRgba(condConf.bgColor, condConf.bgOpacity).rgba, |
|
textStyle: { |
|
color: condConf.tipcolor, |
|
fontSize: condConf.tipsize, |
|
fontFamily: condConf.tipfamily, |
|
fontStyle: self.getFontStyle(condConf.tipstyle), |
|
fontWeight: self.getFontWeight(condConf.tipstyle) |
|
}, |
|
formatter: (function(obj){ |
|
var thisObj = $.extend(true, {}, obj); |
|
thisObj.series = k; |
|
thisObj.data = [categoryTmp, valueTmp]; |
|
return function(params){ |
|
if (thisObj.valueType == 1) { |
|
|
|
var itemColor = self.seriesConf.seriesColorList.split("|")[params.seriesIndex]; |
|
var vHtml = '<div>'; |
|
if (thisObj.showCategory) { |
|
vHtml += '<div>' + params.value[0] + '</div>'; |
|
} |
|
if (thisObj.showSeries || thisObj.showValue) { |
|
vHtml += '<div style="display: flex;align-items:center;margin-top:5px;">'; |
|
vHtml += '<span style="width:10px;height:10px;border-radius:5px;background-color: '+itemColor+'"></span>'; |
|
} |
|
if (thisObj.showSeries) { |
|
vHtml += '<span style="margin-left:10px;">' + params.seriesName + '</span>'; |
|
} |
|
|
|
if (thisObj.showValue) { |
|
vHtml += '<span style="margin-left:10px;">' + params.value[1] + '</span>'; |
|
} |
|
if (thisObj.showSeries || thisObj.showValue) { |
|
vHtml += '</div>'; |
|
} |
|
vHtml += '</div>'; |
|
return vHtml; |
|
|
|
/*var valueStr = ''; |
|
if (thisObj.showSeries) { |
|
valueStr += '系列：' + params.seriesName + '<br/>'; |
|
} |
|
if (thisObj.showCategory) { |
|
valueStr += '分类：' + thisObj.data[0] + '<br/>'; |
|
} |
|
if (thisObj.showValue) { |
|
valueStr += '数值：' + thisObj.data[1] + '<br/>'; |
|
} |
|
return valueStr;*/ |
|
} else { |
|
return new Function(thisObj.jsPane).call({series: params.seriesName, seriesIndex:params.seriesIndex, data: thisObj.data}); |
|
} |
|
}; |
|
})(condConf) |
|
}; |
|
} |
|
} |
|
|
|
axisOpt.push({ |
|
name: k, |
|
type: 'bar', |
|
yAxisIndex: seriesToYAxis, |
|
label: pieLabelOpt, |
|
data: tmpSeriesData |
|
}); |
|
seriesNameArr.push(k); |
|
if (self.seriesConf.pieWidthType == 1) { |
|
axisOpt[axisOpt.length - 1].barGap = self.seriesConf.pieSeriesGapWidth + '%'; |
|
} else { |
|
axisOpt[axisOpt.length - 1].barWidth = self.seriesConf.pieFixWidth; |
|
} |
|
|
|
var pieTipsConf = self.tipsConf.pie; |
|
if (pieTipsConf.showTip) { |
|
axisOpt[axisOpt.length - 1].tooltip = { |
|
show: true, |
|
backgroundColor: self.hexToRgba(pieTipsConf.bgColor, pieTipsConf.bgOpacity).rgba, |
|
textStyle: { |
|
color: pieTipsConf.tipcolor, |
|
fontSize: pieTipsConf.tipsize, |
|
fontFamily: pieTipsConf.tipfamily, |
|
fontStyle: self.getFontStyle(pieTipsConf.tipstyle), |
|
fontWeight: self.getFontWeight(pieTipsConf.tipstyle) |
|
}, |
|
formatter: function (params) { |
|
var pieTipsConf = self.tipsConf.pie; |
|
if (pieTipsConf.valueType == 1) { |
|
var itemColor = self.seriesConf.seriesColorList.split("|")[params.seriesIndex]; |
|
var vHtml = '<div>'; |
|
if (pieTipsConf.showCategory) { |
|
vHtml += '<div>' + params.value[0] + '</div>'; |
|
} |
|
if (pieTipsConf.showSeries || pieTipsConf.showValue) { |
|
vHtml += '<div style="display: flex;align-items:center;margin-top:5px;">'; |
|
vHtml += '<span style="width:10px;height:10px;border-radius:5px;background-color: '+itemColor+'"></span>'; |
|
} |
|
if (pieTipsConf.showSeries) { |
|
vHtml += '<span style="margin-left:10px;">' + params.seriesName + '</span>'; |
|
} |
|
|
|
if (pieTipsConf.showValue) { |
|
vHtml += '<span style="margin-left:10px;">' + params.value[1] + '</span>'; |
|
} |
|
if (pieTipsConf.showSeries || pieTipsConf.showValue) { |
|
vHtml += '</div>'; |
|
} |
|
vHtml += '</div>'; |
|
return vHtml; |
|
} else { |
|
return new Function(pieTipsConf.jsPane).call({series: params.seriesName, data: params.value}); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
if (this.chartData.line && this.chartData.line.xAxisData && this.chartData.line.xAxisData.length > 0) { |
|
for (var i = 0; i < this.chartData.line.xAxisData.length; i++) { |
|
if (axisXdata.indexOf(this.chartData.line.xAxisData[i]) < 0) { |
|
axisXdata.push(this.chartData.line.xAxisData[i]); |
|
axisXLabeldata.push(this.chartData.line.xAxisLabelData[i]); |
|
} |
|
} |
|
for (var k in self.chartData.line.seriesData) { |
|
var seriesToYAxisName = 'Y轴'; |
|
if (self.styleCond.lineSeriesAxis && self.styleCond.lineSeriesAxis.length > 0) { |
|
|
|
var tmpPieAxisCond = null; |
|
for (var m = 0; m < self.styleCond.lineSeriesAxis.length; m++) { |
|
|
|
var cond = self.styleCond.lineSeriesAxis[m].condition; |
|
if (cond) { |
|
cond = cond.replace(/\{系列名称\}/g, k); |
|
cond = cond.replace(/\{系列序号\}/g, this.chartData.line.seriesIndex[k]); |
|
if (eval(cond)) { |
|
tmpPieAxisCond = self.styleCond.lineSeriesAxis[m]; |
|
break; |
|
} |
|
} else { |
|
tmpPieAxisCond = self.styleCond.lineSeriesAxis[m]; |
|
break; |
|
} |
|
} |
|
|
|
if (tmpPieAxisCond) { |
|
seriesToYAxisName = tmpPieAxisCond.axisYName; |
|
} |
|
} |
|
|
|
var seriesToYAxis = 0; |
|
for (var m = 0; m < self.axisConf.axisY.length; m++) { |
|
if (self.axisConf.axisY[m].axisName == seriesToYAxisName) { |
|
seriesToYAxis = m; |
|
break; |
|
} |
|
} |
|
|
|
// 条件属性 |
|
var tmpSeriesData = self.chartData.line.seriesData[k]; |
|
for (var m = 0; m < tmpSeriesData.length; m++) { |
|
var categoryTmp = tmpSeriesData[m][0]; |
|
var valueTmp = tmpSeriesData[m][1]; |
|
tmpSeriesData[m] = { |
|
value: tmpSeriesData[m] |
|
}; |
|
if (!valueTmp || valueTmp == 0 || valueTmp == '') { |
|
tmpSeriesData[m].symbolSize = 0; |
|
} |
|
// 配色 |
|
var condConf = self.getStyleCond('line', 'color', k, categoryTmp, valueTmp); |
|
if (condConf) { |
|
tmpSeriesData[m].itemStyle = { |
|
color: condConf.itemcolor |
|
}; |
|
} |
|
|
|
// 标签 |
|
condConf = self.getStyleCond('line', 'label', k, categoryTmp, valueTmp); |
|
if (condConf) { |
|
tmpSeriesData[m].label = { |
|
show: condConf.showLineLabel, |
|
position: condConf.linePosition, |
|
rotate: condConf.lineDirection, |
|
color: condConf.linelabelcolor, |
|
fontFamily: condConf.linelabelfamily, |
|
fontSize: condConf.linelabelsize, |
|
fontStyle: this.getFontStyle(condConf.linelabelstyle), |
|
fontWeight: this.getFontWeight(condConf.linelabelstyle), |
|
formatter: (function(obj){ |
|
var thisObj = $.extend(true, {}, obj); |
|
thisObj.series = k; |
|
thisObj.data = [categoryTmp, valueTmp]; |
|
return function(params){ |
|
if (thisObj.lineValueType == "1") { |
|
var valueStr = ''; |
|
if (thisObj.showLineSeries) { |
|
valueStr += '|' + params.seriesName; |
|
} |
|
if (thisObj.showLineCategory) { |
|
valueStr += '|' + thisObj.data[0]; |
|
} |
|
if (thisObj.showLineValue) { |
|
valueStr += '|' + thisObj.data[1]; |
|
} |
|
return valueStr.length > 0 ? valueStr.substring(1) : ''; |
|
} else { |
|
return new Function(thisObj.lineJsPane).call({series: thisObj.series, data: thisObj.data}); |
|
} |
|
}; |
|
})(condConf) |
|
}; |
|
} |
|
|
|
// 提示 |
|
condConf = self.getStyleCond('line', 'tips', k, categoryTmp, valueTmp); |
|
if (condConf) { |
|
tmpSeriesData[m].tooltip = { |
|
show: condConf.showTip, |
|
backgroundColor: self.hexToRgba(condConf.bgColor, condConf.bgOpacity).rgba, |
|
textStyle: { |
|
color: condConf.tipcolor, |
|
fontSize: condConf.tipsize, |
|
fontFamily: condConf.tipfamily, |
|
fontStyle: self.getFontStyle(condConf.tipstyle), |
|
fontWeight: self.getFontWeight(condConf.tipstyle) |
|
}, |
|
formatter: (function(obj){ |
|
var thisObj = $.extend(true, {}, obj); |
|
thisObj.series = k; |
|
thisObj.data = [categoryTmp, valueTmp]; |
|
return function(params){ |
|
if (thisObj.valueType == 1) { |
|
var itemColor = self.seriesConf.seriesColorList.split("|")[params.seriesIndex]; |
|
var vHtml = '<div>'; |
|
if (thisObj.showCategory) { |
|
vHtml += '<div>' + params.value[0] + '</div>'; |
|
} |
|
if (thisObj.showSeries || thisObj.showValue) { |
|
vHtml += '<div style="display: flex;align-items:center;margin-top:5px;">'; |
|
vHtml += '<span style="width:10px;height:10px;border-radius:5px;background-color: '+itemColor+'"></span>'; |
|
} |
|
if (thisObj.showSeries) { |
|
vHtml += '<span style="margin-left:10px;">' + params.seriesName + '</span>'; |
|
} |
|
|
|
if (thisObj.showValue) { |
|
vHtml += '<span style="margin-left:10px;">' + params.value[1] + '</span>'; |
|
} |
|
if (thisObj.showSeries || thisObj.showValue) { |
|
vHtml += '</div>'; |
|
} |
|
vHtml += '</div>'; |
|
return vHtml; |
|
/*var valueStr = ''; |
|
if (thisObj.showSeries) { |
|
valueStr += '系列：' + params.seriesName + '<br/>'; |
|
} |
|
if (thisObj.showCategory) { |
|
valueStr += '分类：' + thisObj.data[0] + '<br/>'; |
|
} |
|
if (thisObj.showValue) { |
|
valueStr += '数值：' + thisObj.data[1] + '<br/>'; |
|
} |
|
return valueStr;*/ |
|
} else { |
|
return new Function(thisObj.jsPane).call({series: params.seriesName, data: thisObj.data}); |
|
} |
|
}; |
|
})(condConf) |
|
}; |
|
} |
|
} |
|
|
|
|
|
axisOpt.push({ |
|
name: k, |
|
type: 'line', |
|
yAxisIndex: seriesToYAxis, |
|
label: lineLabelOpt, |
|
data: this.chartData.line.seriesData[k] |
|
}) |
|
seriesNameArr.push(k); |
|
|
|
axisOpt[axisOpt.length - 1].lineStyle = { |
|
width: self.seriesConf.lineWidth, |
|
type: self.seriesConf.lineType |
|
} |
|
axisOpt[axisOpt.length - 1].symbolSize = self.seriesConf.lineCornerRadius; |
|
if (self.seriesConf.lineCornerShape == '圆形') { |
|
axisOpt[axisOpt.length - 1].symbol = 'circle'; |
|
} else if (self.seriesConf.lineCornerShape == '三角行') { |
|
axisOpt[axisOpt.length - 1].symbol = 'triangle'; |
|
} else if (self.seriesConf.lineCornerShape == '正方形') { |
|
axisOpt[axisOpt.length - 1].symbol = 'rect'; |
|
} else if (self.seriesConf.lineCornerShape == '菱形') { |
|
axisOpt[axisOpt.length - 1].symbol = 'diamond'; |
|
} |
|
if (self.seriesConf.lineCornerType == 1) { |
|
axisOpt[axisOpt.length - 1].smooth = true; |
|
} |
|
if (self.seriesConf.lineCornerColorType != '系列色') { |
|
axisOpt[axisOpt.length - 1].itemStyle = { |
|
color: self.seriesConf.lineCornerColor |
|
}; |
|
} |
|
|
|
var lineTipsConf = self.tipsConf.line; |
|
if (lineTipsConf.showTip) { |
|
axisOpt[axisOpt.length - 1].tooltip = { |
|
show: true, |
|
backgroundColor: self.hexToRgba(lineTipsConf.bgColor, lineTipsConf.bgOpacity).rgba, |
|
textStyle: { |
|
color: lineTipsConf.tipcolor, |
|
fontSize: lineTipsConf.tipsize, |
|
fontFamily: lineTipsConf.tipfamily, |
|
fontStyle: self.getFontStyle(lineTipsConf.tipstyle), |
|
fontWeight: self.getFontWeight(lineTipsConf.tipstyle) |
|
}, |
|
formatter: function (params) { |
|
var lineTipsConf = self.tipsConf.line; |
|
if (lineTipsConf.valueType == 1) { |
|
var itemColor = self.seriesConf.seriesColorList.split("|")[params.seriesIndex]; |
|
var vHtml = '<div>'; |
|
if (lineTipsConf.showCategory) { |
|
vHtml += '<div>' + params.value[0] + '</div>'; |
|
} |
|
if (lineTipsConf.showSeries || lineTipsConf.showValue) { |
|
vHtml += '<div style="display: flex;align-items:center;margin-top:5px;">'; |
|
vHtml += '<span style="width:10px;height:10px;border-radius:5px;background-color: '+itemColor+'"></span>'; |
|
} |
|
if (lineTipsConf.showSeries) { |
|
vHtml += '<span style="margin-left:10px;">' + params.seriesName + '</span>'; |
|
} |
|
|
|
if (lineTipsConf.showValue) { |
|
vHtml += '<span style="margin-left:10px;">' + params.value[1] + '</span>'; |
|
} |
|
if (lineTipsConf.showSeries || lineTipsConf.showValue) { |
|
vHtml += '</div>'; |
|
} |
|
vHtml += '</div>'; |
|
return vHtml; |
|
|
|
} else { |
|
return new Function(lineTipsConf.jsPane).call({series: params.seriesName, data: params.value}); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
self.axisXdata = axisXdata; |
|
self.axisXLabeldata = axisXLabeldata; |
|
|
|
// X坐标轴 |
|
var axisXConf = this.axisConf.axisX; |
|
var axisXOpt = { |
|
type: 'category', |
|
name: axisXConf.isTitleVisiable ? axisXConf.titleName : '', |
|
nameLocation: this.getLocation(axisXConf.titleAlignment) || 'end', |
|
boundaryGap: true, |
|
nameRotate: axisXConf.titleRotation || 0, |
|
nameTextStyle: { |
|
color: axisXConf.titlecolor, |
|
fontFamily: axisXConf.titlefamily, |
|
fontSize: axisXConf.titlesize, |
|
fontStyle: this.getFontStyle(axisXConf.titlestyle), |
|
fontWeight: this.getFontWeight(axisXConf.titlestyle), |
|
padding: [8,0,0,0], |
|
verticalAlign: 'top' |
|
}, |
|
scale: true, |
|
axisLine: { |
|
show: true |
|
}, |
|
axisTick: { |
|
alignWithLabel: true |
|
}, |
|
axisLabel: { |
|
show: axisXConf.isLabelVisiable, |
|
color: axisXConf.labelcolor, |
|
fontFamily: axisXConf.labelfamily, |
|
fontSize: axisXConf.labelsize, |
|
fontStyle: this.getFontStyle(axisXConf.labelstyle), |
|
fontWeight: this.getFontWeight(axisXConf.labelstyle), |
|
rotate: axisXConf.labelRotation, |
|
formatter: function (value, index) { |
|
if (self.axisConf.axisX.labelFormatType == 1) { |
|
return axisXLabeldata[index]; |
|
} else { |
|
return new Function(self.axisConf.axisX.labelJsPane).call({value: value}); |
|
} |
|
} |
|
}, |
|
data: axisXdata |
|
}; |
|
//option.xAxis[0] = axisXOpt; |
|
|
|
// Y坐标轴 |
|
var axisYConfArr = this.axisConf.axisY; |
|
var axisYOpt = []; |
|
for (var i = 0; i < axisYConfArr.length; i++) { |
|
var axisYConf = axisYConfArr[i]; |
|
axisYOpt.push({ |
|
type: 'value', |
|
name: axisYConf.isTitleVisiable ? axisYConf.titleName : '', |
|
position: i == 0 ? 'left' : 'right', |
|
offset: axisYConf.offset, |
|
nameRotate: axisYConf.titleRotation || 0, |
|
nameTextStyle: { |
|
color: axisYConf.titlecolor, |
|
fontFamily: axisYConf.titlefamily, |
|
fontSize: axisYConf.titlesize, |
|
fontStyle: this.getFontStyle(axisYConf.titlestyle), |
|
fontWeight: this.getFontWeight(axisYConf.titlestyle) |
|
}, |
|
alignTicks: true, |
|
axisLabel: { |
|
show: axisYConf.isLabelVisiable, |
|
color: axisYConf.labelcolor, |
|
fontFamily: axisYConf.labelfamily, |
|
fontSize: axisYConf.labelsize, |
|
fontStyle: this.getFontStyle(axisYConf.labelstyle), |
|
fontWeight: this.getFontWeight(axisYConf.labelstyle), |
|
rotate: axisYConf.labelRotation, |
|
formatter: (function(obj){ |
|
var thisObj = $.extend(true, {}, obj); |
|
return function(value, index){ |
|
if (thisObj.labelFormatType == 1) { |
|
return value; |
|
} else { |
|
return new Function(thisObj.labelJsPane).call({value: value}); |
|
} |
|
}; |
|
})(axisYConf) |
|
/*formatter: function (value, index) { |
|
console.log(this); |
|
if (axisYConf.labelFormatType == 1) { |
|
return value; |
|
} else { |
|
return new Function(axisYConf.labelJsPane).call({value: value}); |
|
} |
|
}*/ |
|
}, |
|
axisLine: { |
|
show: true |
|
}, |
|
splitLine: { |
|
show: false |
|
} |
|
}); |
|
|
|
if (axisYConf.showMinValue) { |
|
axisYOpt[axisYOpt.length - 1].min = axisYConf.minValue; |
|
} |
|
if (axisYConf.showMaxValue) { |
|
axisYOpt[axisYOpt.length - 1].max = axisYConf.maxValue; |
|
} |
|
if (axisYConf.showInterval) { |
|
axisYOpt[axisYOpt.length - 1].interval = axisYConf.intervalValue; |
|
} |
|
} |
|
|
|
// 图例 |
|
var legendOpt = { |
|
type: 'scroll', |
|
show: self.legendConf.showlegend, |
|
textStyle: { |
|
color: self.legendConf.legendcolor, |
|
fontSize: self.legendConf.legendsize, |
|
fontStyle: self.getFontStyle(self.legendConf.legendstyle), |
|
fontFamily: self.legendConf.legendfamily, |
|
fontWeight: self.getFontWeight(self.legendConf.legendstyle) |
|
} |
|
}; |
|
if (self.legendConf.legendposition == "1") { |
|
legendOpt.orient = 'horizontal'; |
|
legendOpt.top = self.legendConf.legendmargin; |
|
legendOpt.left = 'center'; |
|
} else if (self.legendConf.legendposition == "2") { |
|
legendOpt.orient = 'vertical'; |
|
legendOpt.left = self.legendConf.legendmargin; |
|
legendOpt.top = 'middle'; |
|
} else if (self.legendConf.legendposition == "3") { |
|
legendOpt.orient = 'horizontal'; |
|
legendOpt.bottom = self.legendConf.legendmargin; |
|
legendOpt.left = 'center'; |
|
} else if (self.legendConf.legendposition == "4") { |
|
legendOpt.orient = 'vertical'; |
|
legendOpt.right = self.legendConf.legendmargin; |
|
legendOpt.top = 'middle'; |
|
} |
|
|
|
if (self.legendConf.legendalignment == "2") { |
|
if (self.legendConf.legendposition == "1" || self.legendConf.legendposition == "3") { |
|
legendOpt.left = 'left'; |
|
} else { |
|
legendOpt.top = 'top'; |
|
} |
|
} else if (self.legendConf.legendalignment == "4") { |
|
if (self.legendConf.legendposition == "1" || self.legendConf.legendposition == "3") { |
|
legendOpt.left = 'right'; |
|
} else { |
|
legendOpt.top = 'bottom'; |
|
} |
|
} |
|
|
|
if (self.legendConf.legendposition == "2") { |
|
self.chartLeft += (self.calTextWidth(self.getArrayMaxLengthItem(seriesNameArr))[0] || 20) + 30; |
|
} else if (self.legendConf.legendposition == "3") { |
|
self.chartButtom += 20; |
|
} else if(self.legendConf.legendposition == "4") { |
|
self.chartRight += (self.calTextWidth(self.getArrayMaxLengthItem(seriesNameArr))[0] || 20) + 30; |
|
} |
|
|
|
if (self.legendConf.showlegend && self.legendConf.legendposition == "1") { |
|
self.chartTop += 30; |
|
} |
|
|
|
var dataZoomOpt = [{ |
|
type: 'inside', |
|
xAxisIndex: [0], |
|
start: 0, |
|
end: 100 |
|
}]; |
|
if (self.bgConf.isShowZoomTool) { |
|
dataZoomOpt.push({ |
|
type: 'slider', |
|
xAxisIndex: [0], |
|
start: 0, |
|
end: 100 |
|
}); |
|
} |
|
|
|
|
|
|
|
var option = { |
|
color: self.seriesConf.seriesColorList.split("|"), |
|
backgroundColor: self.hexToRgba(self.bgConf.bgColor, self.bgConf.bgOpacity).rgba, |
|
title: { |
|
show: self.titleConf.titlevisiable || false, |
|
text: self.titleConf.titlename, |
|
left: self.getAlign(self.titleConf.titleposition), |
|
backgroundColor: self.hexToRgba(self.titleConf.titlebgcolor, self.titleConf.titleBgOpacity).rgba, |
|
textStyle: { |
|
color: self.titleConf.titlecolor, |
|
fontSize: self.titleConf.titlesize, |
|
fontStyle: self.getFontStyle(self.titleConf.titlestyle), |
|
fontFamily: self.titleConf.titlefamily, |
|
fontWeight: self.getFontWeight(self.titleConf.titlestyle) |
|
} |
|
}, |
|
grid: { |
|
top: self.chartTop, |
|
left : self.chartLeft, |
|
buttom: self.chartButtom, |
|
right: self.chartRight |
|
}, |
|
legend: legendOpt, |
|
dataZoom: dataZoomOpt, |
|
tooltip: { |
|
show: true, |
|
trigger: 'item', |
|
axisPointer: { |
|
type: 'none' |
|
} |
|
}, |
|
xAxis: [axisXOpt], |
|
yAxis: axisYOpt, |
|
series: axisOpt |
|
}; |
|
return option; |
|
}, |
|
addBgRegion: function() { |
|
var self = this; |
|
var myChart = this.basechart; |
|
var axisXdata = this.axisXdata; |
|
var pos0 = myChart.convertToPixel({seriesIndex: 0}, [axisXdata[0], 0]); |
|
var pos1 = myChart.convertToPixel({seriesIndex: 0}, [axisXdata[1], 0]); |
|
var dividerXWidth = pos1[0] - pos0[0]; |
|
|
|
this.dataRegionWidth = myChart.getModel().getComponent('xAxis').axis._extent[1]; |
|
this.dataRegionHeight = myChart.getModel().getComponent('yAxis').axis._extent[1]; |
|
|
|
var regionColorArr = this.chartData.pie.regionColor; |
|
if (self.bgConf.chartType == 2) { |
|
regionColorArr = this.chartData.line.regionColor; |
|
} |
|
var regionColorConf = []; |
|
|
|
var startIdx = 0; |
|
for (var i = 0; i < axisXdata.length; i++) { |
|
var tmpPos = myChart.convertToPixel({seriesIndex: 0}, [axisXdata[i], 0]); |
|
if (tmpPos[0] > this.dataRegionWidth + this.chartLeft) { |
|
break; |
|
} |
|
if (tmpPos[0] < 0 + this.chartLeft) { |
|
continue; |
|
} else { |
|
startIdx++; |
|
} |
|
if (parseInt(regionColorArr[axisXdata[i]]) >= 0) { |
|
if (regionColorConf.length == 0 || regionColorConf[regionColorConf.length - 1].end !== undefined) { |
|
regionColorConf.push({ |
|
start: startIdx - 1, |
|
colorIdx: regionColorArr[axisXdata[i]] |
|
}); |
|
} else if (regionColorConf[regionColorConf.length - 1].colorIdx != regionColorArr[axisXdata[i]]){ |
|
regionColorConf[regionColorConf.length - 1].end = startIdx - 1; |
|
regionColorConf.push({ |
|
start: startIdx - 1, |
|
colorIdx: regionColorArr[axisXdata[i]] |
|
}); |
|
} |
|
} else if (regionColorConf.length > 0 && regionColorConf[regionColorConf.length - 1].end == undefined) { |
|
regionColorConf[regionColorConf.length - 1].end = startIdx - 1; |
|
} |
|
} |
|
if (regionColorConf.length > 0 && regionColorConf[regionColorConf.length - 1].end == undefined) { |
|
regionColorConf[regionColorConf.length - 1].end = startIdx; |
|
} |
|
|
|
var graphicRectBgColorArr = self.bgConf.gridXColorList.split("|"); |
|
var graphicRectArr = []; |
|
for (var i = 0; i < regionColorConf.length; i++) { |
|
graphicRectArr.push({ |
|
type: 'rect', |
|
x: 0, |
|
y: 0, |
|
draggable: false, |
|
shape: { |
|
x: self.chartLeft + (regionColorConf[i].start * dividerXWidth), |
|
y: self.chartTop, |
|
width: (regionColorConf[i].end - regionColorConf[i].start) * dividerXWidth, |
|
height: self.dataRegionHeight |
|
}, |
|
style: { |
|
fill: self.hexToRgba(graphicRectBgColorArr[regionColorConf[i].colorIdx], 50).rgba |
|
} |
|
}); |
|
} |
|
|
|
var gridLineArr = this.chartData.pie.gridLine; |
|
if (self.bgConf.chartType == 2) { |
|
gridLineArr = this.chartData.line.gridLine; |
|
} |
|
|
|
var gridLineConf = []; |
|
for (var i = 0; i < axisXdata.length; i++) { |
|
if (gridLineArr.indexOf(axisXdata[i]) >= 0) { |
|
var tmpPos = myChart.convertToPixel({seriesIndex: 0}, [axisXdata[i], 0]); |
|
if (tmpPos[0] > this.dataRegionWidth + this.chartLeft) { |
|
break; |
|
} |
|
if (tmpPos[0] < 0 + this.chartLeft) { |
|
continue; |
|
} |
|
gridLineConf.push(tmpPos[0]); |
|
} |
|
} |
|
for (var i = 0; i < gridLineConf.length; i++) { |
|
graphicRectArr.push({ |
|
type: 'line', |
|
position: [gridLineConf[i], self.chartTop], |
|
draggable: false, |
|
shape: { |
|
x1: 0, |
|
y1: 0, |
|
x2: 0, |
|
y2: self.dataRegionHeight |
|
}, |
|
style: { |
|
stroke: self.bgConf.gridXColor, |
|
lineWidth: 1, |
|
shadowBlur: 0 |
|
} |
|
}); |
|
} |
|
|
|
// Y轴网格 |
|
var axisY = myChart.getModel().getComponent('yAxis').axis; |
|
var valueYRange = axisY.scale._extent[1] - axisY.scale._extent[0]; |
|
var pixYRange = axisY._extent[1] - axisY._extent[0]; |
|
|
|
if (self.bgConf.fixHeight > 0) { |
|
var valueIdx = self.bgConf.fixHeight; |
|
while (valueIdx < valueYRange) { |
|
var lineYPos = valueIdx * pixYRange / valueYRange; |
|
graphicRectArr.push({ |
|
type: 'line', |
|
position: [self.chartLeft, self.chartTop + pixYRange - lineYPos], |
|
draggable: false, |
|
shape: { |
|
x1: 0, |
|
y1: 0, |
|
x2: self.dataRegionWidth, |
|
y2: 0 |
|
}, |
|
style: { |
|
stroke: self.bgConf.gridYColor, |
|
lineWidth: 1, |
|
shadowBlur: 0 |
|
} |
|
}); |
|
valueIdx += self.bgConf.fixHeight; |
|
} |
|
} |
|
|
|
if (self.styleCond.grid && self.styleCond.grid.length > 0) { |
|
for (var i = 0; i < self.styleCond.grid.length; i++) { |
|
var valueIdx = self.styleCond.grid[i].valueY; |
|
var lineYPos = valueIdx * pixYRange / valueYRange; |
|
graphicRectArr.push({ |
|
type: 'line', |
|
position: [self.chartLeft, self.chartTop + pixYRange - lineYPos], |
|
draggable: false, |
|
shape: { |
|
x1: 0, |
|
y1: 0, |
|
x2: self.dataRegionWidth, |
|
y2: 0 |
|
}, |
|
style: { |
|
stroke: self.styleCond.grid[i].lineColor, |
|
lineWidth: 1, |
|
shadowBlur: 0 |
|
} |
|
}); |
|
} |
|
} |
|
|
|
//console.log(graphicRectArr); |
|
var _opt = myChart.getOption(); //self.getSrcOption(); |
|
_opt.graphic = graphicRectArr; |
|
myChart.setOption(_opt, true); |
|
}, |
|
|
|
getStyleCond: function(chart, ele, series, category, value) { |
|
if (chart == 'pie') { |
|
var pieStyleCondArr = this.styleCond.pie; |
|
if (!pieStyleCondArr || pieStyleCondArr.length <= 0) { |
|
return null; |
|
} |
|
for (var i = 0; i < pieStyleCondArr.length; i++) { |
|
if (pieStyleCondArr[i].title == ele) { |
|
var cond = pieStyleCondArr[i].condition; |
|
cond = cond.replace(/\{分类名\}/g, category); |
|
cond = cond.replace(/\{系列名\}/g, series); |
|
cond = cond.replace(/\{数值\}/g, value); |
|
if (eval(cond)) { |
|
return pieStyleCondArr[i]; |
|
} |
|
} |
|
} |
|
} else if (chart == 'line') { |
|
var pieStyleCondArr = this.styleCond.line; |
|
if (!pieStyleCondArr || pieStyleCondArr.length <= 0) { |
|
return null; |
|
} |
|
for (var i = 0; i < pieStyleCondArr.length; i++) { |
|
if (pieStyleCondArr[i].title == ele) { |
|
var cond = pieStyleCondArr[i].condition; |
|
cond = cond.replace(/\{分类名\}/g, category); |
|
cond = cond.replace(/\{系列名\}/g, series); |
|
cond = cond.replace(/\{数值\}/g, value); |
|
if (eval(cond)) { |
|
return pieStyleCondArr[i]; |
|
} |
|
} |
|
} |
|
} |
|
}, |
|
|
|
getArrayMaxLengthItem: function(arr) { |
|
var item = arr[0]; |
|
for (var i = 1; i < arr.length; i++) { |
|
if (arr[i].length > item.length) { |
|
item = arr[i]; |
|
} |
|
} |
|
return item; |
|
}, |
|
|
|
initEvent: function() { |
|
var self = this; |
|
self.basechart.on('dataZoom', function (params) { |
|
self.addBgRegion(); |
|
}); |
|
|
|
self.basechart.on('click', 'series', function (params) { |
|
//console.log(params); |
|
var linkParams = { |
|
series: params.seriesName, |
|
category: params.value[0], |
|
value: params.value[1], |
|
linkKey: params.componentSubType == 'bar' ? 'pie' : 'line' |
|
}; |
|
self._customDoLink(linkParams); |
|
}); |
|
}, |
|
|
|
_customDoLink: function (params) { |
|
params.linkKey = params.linkKey || 'pie'; |
|
var hyperLink = this.hyperLinkLine; |
|
if (params && hyperLink && hyperLink.parasMap) { |
|
params.chartIndex = this.chartIndex || 0; |
|
this._doLinkWithFilter(params, hyperLink); |
|
} |
|
}, |
|
|
|
hexToRgba: function(hex, al) { |
|
var hexColor = /^#/.test(hex) ? hex.slice(1) : hex, |
|
alp = hex === 'transparent' ? 0 : Math.ceil(al), |
|
r, g, b; |
|
hexColor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexColor) ? hexColor : 'fffff'; |
|
if (hexColor.length === 3) { |
|
hexColor = hexColor.replace(/(\w)(\w)(\w)/gi, '$1$1$2$2$3$3'); |
|
} |
|
r = hexColor.slice(0, 2); |
|
g = hexColor.slice(2, 4); |
|
b = hexColor.slice(4, 6); |
|
r = parseInt(r, 16); |
|
g = parseInt(g, 16); |
|
b = parseInt(b, 16); |
|
return { |
|
hex: '#' + hexColor, |
|
alpha: alp, |
|
rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (alp / 100).toFixed(2) + ')' |
|
}; |
|
}, |
|
getAlign: function (align) { |
|
if ("2" == align) { |
|
return "left"; |
|
} else if ("0" == align) { |
|
return "center"; |
|
} else if ("4" == align) { |
|
return "right"; |
|
} |
|
}, |
|
getLocation: function (align) { |
|
if ("2" == align) { |
|
return "start"; |
|
} else if ("0" == align) { |
|
return "middle"; |
|
} else if ("4" == align) { |
|
return "end"; |
|
} |
|
}, |
|
getFontStyle: function (style) { |
|
if ("2" == style || "3" == style) { |
|
return "italic"; |
|
} else { |
|
return "normal"; |
|
} |
|
}, |
|
getFontWeight: function(style){ |
|
if ("1" == style || "3" == style) { |
|
return "bold"; |
|
} else { |
|
return "normal"; |
|
} |
|
}, |
|
calTextWidth: function(str, fontSize) { |
|
var fontSize = fontSize || 12; |
|
var strHtml = $('<span>') |
|
.attr("id", "temp_cal_text_font_size") |
|
.css({ |
|
"display": "none", |
|
"font-size": fontSize + "px", |
|
"font-family": "Microsoft YaHei" |
|
}).html(str); |
|
$(document.body).append(strHtml); |
|
var width = $('#temp_cal_text_font_size').width(); |
|
var height = $('#temp_cal_text_font_size').height(); |
|
$('#temp_cal_text_font_size').remove(); |
|
return [width, height]; |
|
}, |
|
|
|
_emptyData: function (options) { |
|
options = options || {}; |
|
options.data = options.data || []; |
|
|
|
return options.data.length === 0; |
|
} |
|
}); |