~~~
var internalRefreshAxisModelData = function () {
// 判斷屬性值 如果是折線 柱狀圖 區域
switch (component.type) {
case "line":
case "area":
case "column":
console.log(component.config);
if (component.config.chartPivotType != null) {
alert('1111')
if ("rowToColumn" === component.config.chartPivotType) {
internalRefreshDimensionToMeasureAxisModelData()
} else {
if ("columnRowExchange" === component.config.chartPivotType) {
internalRefreshMeasureDimensionExchangeAxisModelData()
} else {
internalRefreshMeasureToDimensionAxisModelData()
}
}
return
}
}
// 圖標配置對象
var option = component.config.chartConfig;
// 圖標維度數據
var dimensions = component.config.datasourceConfig.dimensions;
// 圖標度量數據
var measures = component.config.datasourceConfig.measures;
// 圖標所需要的數據
var data = component.context.data;
// 判斷數據為不為空
if (data == null) {
return
}
// 設置一個新度量的空數組
var newMeasures = [];
// 循環遍歷選中的度量
for (var i = 0; i < measures.length; i++) {
var show = component.config["show_" + i];
console.log(component.config)
if (show != null && show === false) {
// 結束本次循環（跳過下一步）
continue
}
// push進新度量數組
newMeasures.push(measures[i])
}
// 新度量數組賦值給初始數組
measures = newMeasures;
console.log(option.series.length)
console.log(measures.length)
// 如果綜合數據數組大于選中度量數組數量
if (option.series.length > measures.length) {
var newSeries = [];
// 遍歷度量數組
for (var i = 0; i < measures.length; i++) {
// 把對應索引的push進新數組里
newSeries.push(option.series[i])
}
// 賦值echarts的數組數組
option.series = newSeries
}
// x軸的標簽
var xAxisLabels = [];
// 遍歷某一個維度的所有指標
for (var i = 0; i < data.length; i++) {
// push進去每一個遍歷出來的指標
xAxisLabels.push(data[i][dimensions[dimensions.length - 1].name])
console.log(data[i][dimensions[dimensions.length - 1].name])
}
// 判斷標簽數組里有沒有數組
if (xAxisLabels.length == 0) {
// 沒有則為空
xAxisLabels = [""]
}
// 設置新數組
var legendData = [];
var yAxis0MeasureCount = 0;
var yAxis1MeasureCount = 0;
for (var m = 0; m < measures.length; m++) {
// echarts新data數組
var serieData = [];
for (var i = 0; i < data.length; i++) {
// 轉數值函數返回布爾型
if (isNaN(data[i][measures[m].name])) {
// 將數據里的度量名賦值為null
data[i][measures[m].name] = null
}
// 將數據里度量push進echarts所需要的數據data里
serieData.push(data[i][measures[m].name])
}
// 判斷數據數組的長度為0 的話直接把數組賦值為空數組
if (serieData.length == 0) {
serieData = [""]
}
// 如果數據度量索引對應的數據等于null的時候
// 所對應索引的數據將由計算后的數據賦值
if (option.series[m] == null) {
var newOption = factory.buildChartOption(element, component);
option.series[m] = newOption.series[0]
}
// 這里得serieData 是每一個度量的數據
// console.log(serieData)
// 每一個度量對應的數據
// console.log(option.series[m].data)
// 每一個度量的名
// console.log(option.series[m].name)
// 數據賦值合并
option.series[m].data = serieData;
// 名字賦值合并
option.series[m].name = measures[m].label;
// 判斷如果是柱線混合圖
if (component.type !== "mixed") {
// 合并y軸上的name
option.yAxis[0].name = scope.compileFormulaString(component.config["measureAlias_" + m]);
// 如果y軸為數組長度0 或者為null的時候 直接用度量上的數組和數據上y軸的name賦值合并
if (option.yAxis[0].name == null || option.yAxis[0].name.length == 0) {
option.yAxis[0].name = measures[m].label
}
}
switch (component.type) {
// 判斷如果為這線圖
case "line":
// console.log(component.config["lineColor_" + m])
// 如果 沒有設置顏色 則直接是默認顏色
if (component.config["lineColor_" + m] == null) {
// 獲取到折線上的顏色
var colorConfig = getColorConfig(m);
// console.log(colorConfig)
// 賦值給折線圖對象屬性
option.series[m].itemStyle.normal.lineStyle.color = colorConfig.main
} else {
// 賦值給我們設置過的顏色
option.series[m].itemStyle.normal.color = component.config["lineColor_" + m];
option.series[m].itemStyle.normal.lineStyle.color = component.config["lineColor_" + m]
}
break;
// 如果是柱狀圖
case "column":
// 如果沒有設置顏色則使用默認的顏色
if (component.config["columnColor_" + m] == null) {
// 函數是獲取默認的顏色函數
var colorConfig = getColorConfig(m);
// 賦值給柱狀圖對象屬性
option.series[m].itemStyle.normal.color = colorConfig.main
} 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
}
break;
// 如果是區域圖
case "area":
// 如果沒有自定義顏色用默認的
if (component.config["areaColor_" + m] == null) {
var colorConfig = getColorConfig(m);
option.series[m].itemStyle.normal.color = colorConfig.main;
option.series[m].itemStyle.normal.lineStyle.color = colorConfig.main;
// 這個是rbga的顏色值
option.series[m].itemStyle.normal.areaStyle.color = hexToRgb(colorConfig.main, 0.5)
} else {
// 這里是自定義顏色的顏色值
// rgba的顏色值
var rgbValue = hexToRgb(rgbaToHex(component.config["areaColor_" + m]), 0.5);
option.series[m].itemStyle.normal.color = component.config["areaColor_" + m];
option.series[m].itemStyle.normal.lineStyle.color = component.config["areaColor_" + m];
option.series[m].itemStyle.normal.areaStyle.color = rgbValue
}
option.series[m].stack = component.config["stack_" + m];
if (VSUtils.isEmpty(option.series[m].stack) || !option.series[m].stack) {
delete option.series[m].stack
}
break;
// 如果是柱線混合圖
case "mixed":
if (option.series[m].yAxisIndex == null || option.series[m].yAxisIndex >= option.yAxis.length) {
option.series[m].yAxisIndex = 0
}
option.yAxis[option.series[m].yAxisIndex].name = scope.compileFormulaString(component.config["measureAlias_" + m]);
if (option.yAxis[option.series[m].yAxisIndex].name == null || option.yAxis[option.series[m].yAxisIndex].name.length == 0) {
option.yAxis[option.series[m].yAxisIndex].name = measures[m].label
}
option.series[m].stack = component.config["stack_" + m];
if (VSUtils.isEmpty(option.series[m].stack) || !option.series[m].stack) {
delete option.series[m].stack
}
if (component.config["type_" + m] != null) {
option.series[m].type = component.config["type_" + m]
}
if (component.config["columnColor_" + m] != null) {
option.series[m].itemStyle.normal.color = component.config["columnColor_" + m];
if (option.series[m].itemStyle.normal.lineStyle == null) {
option.series[m].itemStyle.normal.lineStyle = {}
}
option.series[m].itemStyle.normal.lineStyle.color = component.config["columnColor_" + m]
}
if (component.config["yAxisIndex_" + m] != null) {
option.series[m].yAxisIndex = component.config["yAxisIndex_" + m]
} else {
option.series[m].yAxisIndex = 0
}
break
}
// 度量名
var legendValue = measures[m].label;
// console.log(legendValue)
// 如果度量為null和數組長度為0
if (component.config["measureAlias_" + m] != null && component.config["measureAlias_" + m].length > 0) {
// 度量名字賦值給echarts對象屬性
option.series[m].name = scope.compileFormulaString(component.config["measureAlias_" + m]);
legendValue = scope.compileFormulaString(component.config["measureAlias_" + m])
}
console.log(legendData)
// 將度量名push成一個數組
legendData.push(legendValue);
if (option.series[m].name == null || option.series[m].name.length == 0) {
// 對象合并合并名稱
option.series[m].name = measures[m].label
}
}
component.context.originalXAxisLabels = null;
// console.log(xAxisLabels)
if (!VSUtils.isEmpty(component.config.xAxisLabelScript)) {
// 復制x軸維度數組
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)
}
}
// x軸的數據賦值
option.xAxis[0].data = xAxisLabels;
if (option.legend != null) {
// 如果維度沒有名可賦值
option.legend.data = legendData
}
var yAxis0MeasureCount = 0;
var yAxis1MeasureCount = 0;
for (var i = 0; i < option.series.length; i++) {
if (option.series[i].yAxisIndex == null || parseInt(option.series[i].yAxisIndex) === 0) {
yAxis0MeasureCount++
} else {
yAxis1MeasureCount++
}
}
if (yAxis0MeasureCount > 1 || option.legend.show === true) {
option.yAxis[0].name = ""
}
if ((yAxis1MeasureCount > 1 || option.legend.show === true) && option.yAxis.length > 1) {
option.yAxis[1].name = ""
}
if (!VSUtils.isEmpty(component.config.barCategoryGap)) {
option.series[0].barCategoryGap = component.config.barCategoryGap + "%"
}
if (!VSUtils.isEmpty(component.config.barGap)) {
option.series[0].barGap = component.config.barGap + "%"
}
if (option.yAxis.length > 0) {
delete option.yAxis[0].name
}
if (option.yAxis.length > 1) {
delete option.yAxis[1].name
}
delete option.yAxis[0].min;
delete option.yAxis[0].max;
if (!VSUtils.isEmpty(component.config.yAxis0Max)) {
option.yAxis[0].max = parseFloat(component.config.yAxis0Max)
}
if (!VSUtils.isEmpty(component.config.yAxis0Min)) {
option.yAxis[0].min = parseFloat(component.config.yAxis0Min)
}
if (!VSUtils.isEmpty(component.config.yAxis0ValueRangeScript)) {
try {
var f = eval("(function(){ " + Base64.decode(component.config.yAxis0ValueRangeScript) + "})");
var range = f.call(null);
option.yAxis[0].min = range[0];
option.yAxis[0].max = range[1]
} catch (e) {
console.log(e)
}
}
// 判斷 相同的組件
switch (component.type) {
case "column":
case "area":
case "mixed":
case "line":
// 循環遍歷數據
for (var i = 0; i < option.series.length; i++) {
option.series[i].seriesIndex = i;
// 設置echarts屬性
if (option.series[i].itemStyle.normal.label == null) {
option.series[i].itemStyle.normal.label = {}
}
// 提示框顯示的數據
option.series[i].itemStyle.normal.label.show = component.config.showDataLabel;
// 提示框里的設置項屬性
option.series[i].itemStyle.emphasis = option.series[i].itemStyle.normal;
if (component.config.dataLabelPosition != null) {
// 如果為折線和柱狀圖
if (component.type === "mixed" && option.series[i].type === "line") {
option.series[i].itemStyle.normal.label.position = "top";
option.series[i].itemStyle.normal.label.y = 1
} else {
option.series[i].itemStyle.normal.label.position = component.config.dataLabelPosition
}
}
// 提示框的數據
option.series[i].itemStyle.normal.label.formatter = function (param) {
// 索引
var identifier = param.series.seriesIndex;
console.log(identifier)
var unit = component.config["unit_" + identifier];
var value = param.data;
if (!VSUtils.isEmpty(component.config.dataLabelValueScript)) {
try {
// 計算字符串函數
var f = eval("(function(value, values, measure, xAxisValue, xAxisValues){ " + Base64.decode(component.config.dataLabelValueScript) + "})");
value = f.call(null, value, param.data, measures[param.series.seriesIndex], param.name, option.xAxis[0].data)
} catch (e) {
console.log(e)
}
return value
} else {
if (unit == null) {
unit = ""
}
if (component.config["valueType_" + identifier] != null && component.config["valueType_" + identifier] === "percent") {
value = value * 100;
unit = "%"
}
value = $vsUtils.processValue(value, component.config["digit_" + identifier]);
res = $vsUtils.comdifyValue(value) + unit;
return res
}
};
// 默認字體12有設置的用設置的
var fontSize = component.config.dataLabelFontSize ? component.config.dataLabelFontSize : 12;
// 默認顏色值 判斷
var fontColor = component.config.dataLabelFontColor ? component.config.dataLabelFontColor : "#999999";
// 設置字體顏色值
option.series[i].itemStyle.normal.label.textStyle = {
fontSize: fontSize,
color: fontColor
}
}
}
switch (component.type) {
case "column":
case "area":
case "line":
// 標記線判斷開啟或關閉 看有沒有設置項
if (component.config.marklines == null || component.config.marklines.length == 0) {
delete option.series[0].markline
}
// 初始新數組
var marklineDataArr = [];
// 顏色值
var marklineColor = component.config.marklineColor;
if (VSUtils.isEmpty(marklineColor)) {
marklineColor = "#2990EA"
}
for (var i = 0; i < component.config.marklines.length; i++) {
var marklineItem = component.config.marklines[i];
var value = component.config[marklineItem.valueBind];
// x軸y軸的數據
var arr = [{
xAxis: -1,
yAxis: value
}, {
xAxis: option.xAxis[0].data.length - 1,
yAxis: value,
value: value
}];
// 標記線數據
marklineDataArr.push(arr)
}
// echarts組件里的屬性
option.series[0].markLine = {
clickable: false,
itemStyle: {
normal: {
color: marklineColor,
label: {
position: "right",
textStyle: {
fontSize: 12
},
formatter: function (param) {
if (!VSUtils.isEmpty(component.config.markLineLabelScript)) {
try {
// 計算字符串
var f = eval("(function(value){ " + Base64.decode(component.config.markLineLabelScript) + "})");
return f.call(null, param.value)
} catch (e) {
console.log(e)
}
}
// return出value度量值
return param.value
}
}
}
},
// 新的數據
data: marklineDataArr
}
}
// 判斷指標聯動打開和關閉
if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) {
// 聯動新的度量
var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures);
// 設置空數組
var newSeries = [];
for (var i = 0; i < measures.length; i++) {
if (newMeasures[i] != null) {
// push進去數組echarts所需要的data
newSeries.push(option.series[i])
}
}
option.series = newSeries
}
setTimeout(function () {
// 如果沒有提示框則直接禁用
if (component.context.chart.component.tooltip != null) {
component.context.chart.component.tooltip.hideTip()
}
// 重新繪制圖形并清除以前的
setTimeout(function () {
component.context.chart.setOption(option, true)
})
});
// 判斷提示框的顯示和隱藏
if (component.config.hideOnFirstShow && !component.context.firstShowTooltip) {
component.context.firstShowTooltip = true;
return
}
setTimeout(function () {
var cachedSelectedValue = scope.getCachedDimensionValue(dimensions[dimensions.length - 1].name);
if (cachedSelectedValue != null) {
var dataIndex = -1;
for (var i = 0; i < component.config.chartConfig.xAxis[0].data.length; i++) {
var xAxisValue = "" + component.config.chartConfig.xAxis[0].data[i];
if (component.context.originalXAxisLabels != null && component.context.originalXAxisLabels.length > i) {
xAxisValue = component.context.originalXAxisLabels[i]
}
if (xAxisValue === "" + cachedSelectedValue) {
dataIndex = i;
break
}
}
if (dataIndex > -1) {
setTimeout(function () {
component.context.chart.component.tooltip.showTip({
dataIndex: dataIndex,
seriesIndex: 0
})
}, showtip_timeout)
}
}
}, 10)
};
~~~
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸（new）
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明