:-: echarts組件添加--數形圖
#### 一.添加echarts數圖選擇對象
~~~
{
// 新增樹圖
name: "",
type: "treemap",
coverImage: contextPath + "/images/componenttypes/" + locale + "/echarts/pie.png",
coverImageWidth: a,
tip: "樹圖"
}
~~~
ps(type:"treemap" 重要--------)
* * * * *
二.設置樹圖的初始數據
`var treemapdata=[{"value":17.6,"name":"保險"},{"value":16.5,"name":"知識產權"},{"value":16.5,"name":"出版"},{"value":15.5,"name":"輕工業"},{"value":14.8,"name":"金融"},{"value":13.7,"name":"化工"},{"value":13.6,"name":"科技"},{"value":13.4,"name":"教育"},{"value":13.1,"name":"對外經貿合作"},{"value":12.6,"name":"節能"},{"value":12.6,"name":"電力"},{"value":12.6,"name":"資源綜合利用"},{"value":12.4,"name":"能源"},{"value":12.2,"name":"礦產"},{"value":12,"name":"信息產業"},{"value":12,"name":"基礎設施"},{"value":11.7,"name":"物流"},{"value":11.6,"name":"環境保護"},{"value":11.6,"name":"國家安全"},{"value":11.6,"name":"水運"}]`
ps(每一個代數據的圖形都需要初始化數據)
* * * * *
三.添加樹圖echarts組件基礎對象
~~~
// 樹圖對象
var treemapOptionTemplate = {
// backgroundColor: "#000",
// 標題
title: {
show: false
},
// 提示框
tooltip: {
show: true,
trigger: "item",
// 提示框里的數據
formatter: "{a} <br/>{b} : {c}",
axisPointer: {
type: "line"
},
position: function (p) {
console.log([p[1], p[1]])
return [0, p[1]]
}
},
series: [{
name: vsLang.sample_growth_rate,
type: 'treemap',
visibleMin: 300,
leafDepth: 2,
roam: false,
//是否開啟拖拽漫游（移動和縮放）
nodeClick: false,
//點擊節點后的行為,false無反應
breadcrumb: {
show: false
},
label: { //描述了每個矩形中，文本標簽的樣式。
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
},
align: 'center',
position: 'center'
}
},
itemStyle: {
normal: {
borderWidth: 1,
gapWidth: 2,
label: {
show: true,
distance: 0.5,
position:"bottom",
textStyle: {
fontSize: 12
},
formatter: "{b}"
},
labelLine: {
show: true,
length: 1
}
},
emphasis: {
label: {
show: false,
position: "center",
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
}
},
// 數據
data: treemapdata
}]
};
// end
~~~
四.在factory大對象里面添加新組件的判斷
~~~
// 是否顯示行為
isShowEventCategory: function (scope) {
switch (scope.component.type) {
case "column":
case "mixed":
case "pie":
case "treemap":
case "bar":
case "line":
return true
}
return false
},
// 樹圖顯示行為所以添加樹圖的屬性
~~~
* * * * *
~~~
// 聯動里面的指標聯動
supportReceiveMeasureLink: function (scope) {
switch (scope.component.type) {
case "column":
case "pie":
case "treemap":
case "bar":
case "line":
case "chinaAreaMap":
return true
}
return false
},
// 樹圖需要聯動所以添加樹圖的屬性
~~~
* * * * *
internalInit在這個函數里添加判斷--條件屬性（type="treemap"）
~~~
case "treemap":
// 組件需要的數據
var serieData = option.series[0].data;
提示框的位置
option.tooltip.position = function (p) {
return [0, p[1]]
};
break;
~~~
[教程](https://www.cnblogs.com/cupsuccess/p/6483284.html)
* * * * *
添加internalRefreshTreeMapModelData這個函數 重要 重要 重要。
~~~
var internalRefreshTreeMapModelData = function () {
// 綜合數據
var option = component.config.chartConfig;
// 維度
var dimensions = component.config.datasourceConfig.dimensions;
// 度量
var measures = component.config.datasourceConfig.measures;
console.log(measures)
var data = component.context.data;
// 判斷data是不是null
if (data == null) {
return
}
// 判斷度量選擇了幾個
if (measures.length>2) {
alert('請選擇一項指標')
return
}
// 初始化度量索引為0
var measureIdx = 0;
if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) {
var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures);
for (var i = 0; i < measures.length; i++) {
if (newMeasures[i] != null) {
measureIdx = i;
break
}
}
}
// 數據初始化為0
var serieData = [];
for (var i = 0; i < data.length; i++) {
var dimValue = data[i][dimensions[dimensions.length - 1].name];
// 函數在vs-utils.js
if (VSUtils.isEmpty(dimValue)) {
continue
}
// datapush進去每一個度量里的key 和 value
serieData.push({
name: dimValue,
value: data[i][measures[measureIdx].name]
});
}
console.log(serieData)
// 判斷如果數據沒有那么就為空數組
if (serieData.length == 0) {
serieData = [""];
}
// 數據賦值給echarts對象里面的data
option.series[0].data = serieData;
option.series[0].name = measures[measureIdx].label;
option.series[0].seriesIndex = measureIdx;
if (component.config["measureAlias_" + measureIdx] != null && component.config["measureAlias_" + measureIdx].length > 0) {
option.series[0].name = component.config["measureAlias_" + measureIdx]
}
// 處理提示框的數據
option.tooltip.formatter = function (p) {
if (component.config.tooltipStatus != null && component.config.tooltipStatus === "hide") {
return ""
}
var seriesIndex = option.series[0].seriesIndex;
if (!VSUtils.isEmpty(component.config.tooltipValueScript)) {
try {
var f = eval("(function(name, params, VSUtils){ " + Base64.decode(component.config.tooltipValueScript) + "})");
return f.call(null, p[1], p, VSUtils)
} catch (e) {
console.log(e)
}
}
console.log(component.config["unit_" + seriesIndex])
var unit = component.config["unit_" + seriesIndex];
if (unit == null) {
unit = ""
}
var displayValue = $vsUtils.processValue(p[2], component.config["digit_" + seriesIndex]);
console.log(displayValue)
console.log(p[1] + "<br/>" + p[0] + ": " + $vsUtils.comdifyValue(displayValue) + "" + unit + "(" + p[3] + "%)")
// 提示框里顯示的每一個指標的數據
return p[1] + "<br/>" + p[0] + ": " + $vsUtils.comdifyValue(displayValue);
};
rebuildPieChart(scope, element, option);
if (component.config.hideOnFirstShow && !component.context.firstShowTooltip) {
component.context.firstShowTooltip = true;
return
}
};
~~~
* * * * *
在所有組件data函數的下面加一個switch判斷
~~~
case "treemap":
internalRefreshTreeMapModelData();
break;
~~~
* * * * *
buildDataDescription在這個數據綁定函數里<br>
~~~
scope.$on(event_chartDimensionValueChange, function (s, event) {
// 添加內容
switch (component.type) {
case "treemap":
// 判斷提示框是顯示 還是隱藏或者禁用
if (!component.config.chartConfig.tooltip.show) {
component.context.chart.component.tooltip.hideTip();
return
}
var dataIndex = -1;
for (var i = 0; i < component.config.chartConfig.series[0].data.length; i++) {
if ("" + component.config.chartConfig.series[0].data[i].name === "" + event.source.value) {
dataIndex = i;
break
}
}
if (dataIndex < 0) {
component.context.chart.component.tooltip.hideTip();
return
}
if (dataIndex > -1) {
component.context.chart.component.tooltip.showTip({
// name: event.source.value,
// seriesIndex: 0
dataIndex: dataIndex,
seriesIndex: 0
})
}
break;
}
})
~~~
ps(里面 已經有判斷了 我們只需要添加單獨的判斷條件和邏輯代碼即可)
* * * * *
refreshMeasureCategoryDescription在這個函數里添加
* * * * *
~~~
case "treemap":
watchers.push(scope.$watch("component.config.measureAlias" + identifier, function (newValue) {
if (newValue != null) {
scope.$broadcast(event_refreshChartView, {})
}
}));
watchers.push(scope.$watch("component.config.unit" + identifier, function (newValue) {
if (newValue != null) {
scope.$broadcast(event_refreshChartView, {})
}
}));
break;
~~~
* * * * *
在已有的判斷里添加樹形圖 這里是判斷基本并監聽基本屬性改變值
* * * * *
~~~
switch (component.type) {
case "bar":
case "line":
case "area":
case "pie":
case "treemap":
case "mixed":
case "column":
scope.$watch("component.config.legendItemHeight", function (newValue, oldValue) {
if (newValue != null && oldValue != null) {
var option = component.config.chartConfig;
option.legend.itemHeight = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendItemWidth", function (newValue, oldValue) {
if (newValue != null && oldValue != null) {
var option = component.config.chartConfig;
option.legend.itemWidth = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.showLegend", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (option.legend == null) {
option.legend = {
show: false,
orient: "horizontal",
x: "right",
y: "top",
data: [vsLang.sample_revenue],
textStyle: {
color: "#999",
fontSize: 12
}
};
option.legend.show = newValue === "show";
scope.$broadcast(event_refreshChartView, {})
} else {
option.legend.show = newValue === "show";
scope.component.context.chart.setOption(option, true)
}
}
});
scope.$watch("component.config.legendSelectedModeObj", function (newValue) {
if (newValue != null) {
component.config.legendSelectedMode = newValue.value;
var option = component.config.chartConfig;
option.legend.selectedMode = newValue.value;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendOrient", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.orient = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendPosY", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.y = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendOffsetY", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.y = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendPosX", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.x = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendFontColor", function (newValue) {
if (isValidColorValue(newValue)) {
var option = component.config.chartConfig;
if (option.legend.textStyle == null) {
option.legend.textStyle = {}
}
option.legend.textStyle.color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendFontSize", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (option.legend.textStyle == null) {
option.legend.textStyle = {}
}
option.legend.textStyle.fontSize = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendItemGap", function (newValue) {
var option = component.config.chartConfig;
if (newValue != null) {
option.legend.itemGap = parseInt(newValue)
} else {
if (option.legend != null) {
delete option.legend.itemGap
}
}
scope.component.context.chart.setOption(option, true)
});
break
}
~~~
* * * * *
在buildChartWatchers函數里添加
~~~
case "treemap":
scope.$watchCollection("component.config.colorSeries", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.color = newValue;
rebuildPieChart(scope, element, option)
}
});
scope.$watch("component.config.pieSize", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (component.config.pieInnerSize == null) {
component.config.pieInnerSize = 0
}
option.series[0].radius = [component.config.pieInnerSize + "%", newValue + "%"];
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.pieInnerSize", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (component.config.pieSize == null) {
component.config.pieSize = parseInt(option.series[0].radius)
}
option.series[0].radius = [newValue + "%", component.config.pieSize + "%"];
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.showEmphasis", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (option.series[0].itemStyle.emphasis == null) {
option.series[0].itemStyle.emphasis = {
label: {
show: false,
position: "center",
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
}
}
option.series[0].itemStyle.emphasis.label.show = newValue === "show";
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.emphasisFontSize", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (option.series[0].itemStyle.emphasis == null) {
option.series[0].itemStyle.emphasis = {
label: {
show: false,
position: "center",
textStyle: {
fontSize: "30",
fontWeight: "bold"
}
}
}
}
option.series[0].itemStyle.emphasis.label.textStyle.fontSize = newValue + "";
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.itemStyleType", function (newValue) {
console.log(component.config)
if (newValue != null) {
var option = component.config.chartConfig;
console.log()
option.series[0].itemStyle.normal.show = newValue === "show";
option.series[0].itemStyle.normal.show = newValue === "show";
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.showLegend", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.show = newValue === "show";
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendOrient", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.orient = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendPosY", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.y = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendPosX", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.legend.x = newValue;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.pieCenterY", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (component.config.pieCenterX == null) {
component.config.pieCenterX = parseInt(option.series[0].center[0])
}
option.series[0].center = [component.config.pieCenterX + "%", newValue + "%"];
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.pieCenterX", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
if (component.config.pieCenterY == null) {
component.config.pieCenterY = parseInt(option.series[0].center[1])
}
option.series[0].center = [newValue + "%", component.config.pieCenterY + "%"];
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendValueType", function (newValue) {
if (newValue != null) {
var option = component.config.chartConfig;
scope.component.context.chart.setOption(option, true)
}
});
scope.$watch("component.config.legendSelectedModeObj", function (newValue) {
if (newValue != null) {
component.config.legendSelectedMode = newValue.value;
var option = component.config.chartConfig;
option.legend.selectedMode = newValue.value;
scope.component.context.chart.setOption(option, true)
}
});
break;
~~~
* * * * *
在buildChartOption函數里的switch判斷力添加
* * * * *
~~~
case "treemap":
option = angular.copy(treemapOptionTemplate);
break;
~~~
* * * * *
#### 五.在design.js里添加新組件對應的判斷和邏輯
在internalBuildEChartsComponent函數里添加
~~~
case "treemap":
var serieData = option.series[0].data;
option.tooltip.position = function (p) {
return [0, p[1]]
};
break;
~~~
* * * * *
同樣添加internalRefreshTreemapModelData函數
~~~
var internalRefreshTreemapModelData = function () {
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
var measureIdx = 0;
if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) {
var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures);
for (var i = 0; i < measures.length; i++) {
if (newMeasures[i] != null) {
measureIdx = i;
break
}
}
}
var serieData = [];
var legendData = [];
for (var i = 0; i < data.length; i++) {
var dimValue = data[i][dimensions[dimensions.length - 1].name];
if (VSUtils.isEmpty(dimValue)) {
continue
}
serieData.push({
name: dimValue,
value: data[i][measures[measureIdx].name]
});
legendData.push(dimValue)
}
console.log(serieData)
if (serieData.length == 0) {
serieData = [""];
legendData = [""]
}
option.series[0].data = serieData;
option.series[0].name = measures[measureIdx].label;
option.series[0].seriesIndex = measureIdx;
if (component.config["measureAlias_" + measureIdx] != null && component.config["measureAlias_" + measureIdx].length > 0) {
option.series[0].name = component.config["measureAlias_" + measureIdx]
}
option.tooltip.formatter = function (p) {
if (component.config.tooltipStatus != null && component.config.tooltipStatus === "hide") {
return ""
}
var seriesIndex = option.series[0].seriesIndex;
if (!VSUtils.isEmpty(component.config.tooltipValueScript)) {
try {
var f = eval("(function(name, params, VSUtils){ " + Base64.decode(component.config.tooltipValueScript) + "})");
return f.call(null, p[1], p, VSUtils)
} catch (e) {
console.log(e)
}
}
var unit = component.config["unit_" + seriesIndex];
if (unit == null) {
unit = ""
}
var displayValue = $vsUtils.processValue(p[2], component.config["digit_" + seriesIndex]);
// console.log(p[1] + "<br/>" + p[0] + ": " + $vsUtils.comdifyValue(displayValue) + "" + unit + "(" + p[3] + "%)")
return p[1] + "<br/>" + p[0] + ": " + $vsUtils.comdifyValue(displayValue);
};
console.log(legendData)
console.log(option)
option.data = legendData;
rebuildPieChart(scope, element, option);
if (component.config.hideOnFirstShow && !component.context.firstShowTooltip) {
component.context.firstShowTooltip = true;
return
}
if (component.config.chartConfig.tooltip.show) {
$timeout(function () {
var cachedSelectedValue = scope.getCachedDimensionValue(dimensions[dimensions.length - 1].name);
if (cachedSelectedValue != null) {
component.context.chart.component.tooltip.showTip({
name: cachedSelectedValue,
seriesIndex: 0
})
}
}, 800)
}
};
~~~
* * * * *
ps:和設置頁的data函數一樣
* * * * *
在refreshChartView函數里添加
~~~
case "treemap":
internalRefreshTreemapModelData();
break;
~~~
* * * * *
在已有的switch里添加一個判斷 (這里是判斷提示框的顯示隱藏禁用)
~~~
scope.$on(event_chartDimensionValueChange, function (s, event) {
switch (component.type) {
case "treemap":
if (!component.config.chartConfig.tooltip.show) {
return
}
var dataIndex = -1;
for (var i = 0; i < component.config.chartConfig.series[0].data.length; i++) {
if ("" + component.config.chartConfig.series[0].data[i].name === "" + event.source.value) {
dataIndex = i;
break
}
}
if (dataIndex < 0) {
component.context.chart.component.tooltip.hideTip();
return
}
if (dataIndex > -1) {
component.context.chart.component.tooltip.showTip({
name: event.source.value,
seriesIndex: 0
})
}
break;
}
}）
~~~
因為樹圖折現圖和餅圖基礎部分一樣 在已有的判斷力加上treemap屬性
~~~
switch (scope.component.type) {
case "mixed":
case "bar":
case "line":
case "treemap":
case "line":
case "column":
component.context.chart.on(echarts.config.EVENT.CLICK, function (param) {
var paramName = param.name;
if (component.context.originalYAxisLabels != null && component.context.originalYAxisLabels.length > param.dataIndex) {
paramName = component.context.originalYAxisLabels[param.dataIndex]
}
if (component.context.originalXAxisLabels != null && component.context.originalXAxisLabels.length > param.dataIndex) {
paramName = component.context.originalXAxisLabels[param.dataIndex]
}
if (!VSUtils.isEmpty(component.context.tooltipDataValue) && "" + component.context.tooltipDataValue === "" + paramName) {
scope.onComponentClickEvent(component, true)
}
});
break
}
~~~
- 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說明文檔
- 色斑圖加透明