路徑：D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js
一 添加關系
~~~
,{
name: "",
type: "echartsRelationship",
coverImage: contextPath + "/images/componenttypes/" + locale + "/widget/zh_baiduMap.png?v=3",
coverImageWidth: "50%",
tip: "走向關系圖"
}
~~~
二 添加對象option
~~~
// 關系圖對象 start
echartsRelationshipOptionTemplate = {
background:'rgba(0,0,0,0)',
title:{
show:false
},
// tooltip: {
// formatter: function(x) {
// if(x.data.des == undefined){
// return ''
// }
// return x.data.des;
// }
// },
tooltip: {
trigger: 'item',
formatter: "{b}"
},
series: [{
type: 'graph',
layout: 'force',
symbolSize: 30,
roam: true,
edgeSymbol: ['circle', 'arrow'],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20,
color:'#ff8800'
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
focusNodeAdjacency:false,
lineStyle: {
normal: {
width: 2,
color: 'red',
curveness: 0 //邊的曲度，支持從 0 到 1 的值，值越大曲度越大。
}
},
edgeLabel: {
normal: {
show: true,
formatter: function(x) {
return x.name;
}
}
},
label: {
normal: {
show: false,
textStyle: {},
color:'#fff'
}
},
data: [{
name: '侯亮平',
}, {
name: '李達康',
}, {
name: '祁同偉',
}, {
name: '陳巖石',
}, {
name: '陸亦可',
}, {
name: '高育良',
}, {
name: '沙瑞金',
}, {
name: '高小琴',
}, {
name: '高小鳳'
}, {
name: '趙東來',
}, {
name: '程度',
}, {
name: '吳惠芬',
}, {
name: '趙瑞龍',
}, {
name: '趙立春',
}, {
name: '陳海',
}, {
name: '梁璐',
}, {
name: '劉新建'
}, {
name: '歐陽菁'
}, {
name: '吳心怡',
}, {
name: '蔡成功'
}, {
name: '丁義珍'
}],
}],
color: '#ff8800'
}
// 關系end
~~~
三 copy 組件對象 及初始化數據
~~~
case "echartsRelationship":
var links = [{
source: '高育良',
target: '侯亮平',
}, {
source: '高育良',
target: '祁同偉',
}, {
source: '趙立春',
target: '高育良',
}, {
source: '趙立春',
target: '趙瑞龍',
}, {
source: '趙立春',
target: '劉新建',
}, {
source: '李達康',
target: '趙立春',
}, {
source: '祁同偉',
target: '高小琴',
}, {
source: '陳巖石',
target: '陳海',
}, {
source: '陸亦可',
target: '陳海',
}, {
source: '沙瑞金',
target: '陳巖石',
}, {
source: '祁同偉',
target: '陳海',
}, {
source: '祁同偉',
target: '侯亮平',
}, {
source: '侯亮平',
target: '陳海',
}, {
source: '高育良',
target: '吳惠芬',
}, {
source: '陳海',
target: '趙東來',
}, {
source: '高小琴',
target: '高小鳳',
}, {
source: '趙東來',
target: '陸亦可',
}, {
source: '祁同偉',
target: '程度',
}, {
source: '高育良',
target: '高小鳳',
}, {
source: '趙瑞龍',
target: '祁同偉',
}, {
source: '李達康',
target: '趙東來',
}, {
source: '趙瑞龍',
target: '程度',
}, {
source: '沙瑞金',
target: '李達康',
}, {
source: '沙瑞金',
target: '高育良',
}, {
source: '祁同偉',
target: '梁璐',
}, {
source: '吳惠芬',
target: '梁璐',
}, {
source: '李達康',
target: '歐陽菁',
}, {
source: '趙瑞龍',
target: '劉新建',
}, {
source: '趙瑞龍',
target: '高小琴',
}, {
source: '趙瑞龍',
target: '高小鳳',
}, {
source: '吳心怡',
target: '陸亦可',
}, {
source: '吳心怡',
target: '吳惠芬',
}, {
source: '蔡成功',
target: '侯亮平',
}, {
source: '蔡成功',
target: '歐陽菁',
}, {
source: '歐陽菁',
target: '劉新建',
}, {
source: '劉新建',
target: '趙瑞龍',
}, {
source: '李達康',
target: '丁義珍',
}, {
source: '高小琴',
target: '丁義珍',
}, {
source: '祁同偉',
target: '丁義珍',
}, {
source: '趙瑞龍',
target: '丁義珍',
}]
option = angular.copy(echartsRelationshipOptionTemplate);
option.series[0].links =links;
break;
~~~
四 處理數據函數
~~~
//echarts關系圖
internalRefreshechartsRelationshipModelData = function(){
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
if (data == null || data.length < 1 || dimensions.length < 1) {
return
}
var option = component.config.chartConfig;
var data = component.context.data;
// console.log(option)
var node = [];
var node_line = [];
var legendData = [];
var chartData = [];
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
}
}
}
/*
string 字符串;
str 指定字符;
split(),用于把一個字符串分割成字符串數組;
split(str)[0],讀取數組中索引為0的值（第一個值）,所有數組索引默認從0開始;
*/
function getStr(string,str){
var str_before = string.split(str)[0];
var str_after = string.split(str)[1];
node.push(str_before,str_after);
var value = data[i][measures[measureIdx].name];
node_line.push({
source: str_before,
target: str_after,
// name : value
})
}
// 雙層循環改變原數組(數組去重)
// function removeArrayRepElement(arr){
// for (var i = 0; i < arr.length; i++) {
// for (var j = 0; j < arr.length; j++) {
// if (arr[i] == arr[j] && i != j) {//將后面重復的數刪掉
// arr.splice(j, 1);
// }
// }
// }
// return arr;
// }
for (var i = 0; i < data.length; i++) {
var nodeData = data[i][dimensions[dimensions.length - 1].name];
getStr(nodeData,'-')
}
if (component.config["measureAlias_" + measureIdx] != null && component.config["measureAlias_" + measureIdx].length > 0) {
option.series[0].name = component.config["measureAlias_" + measureIdx]
}
option.series[0].seriesIndex = measureIdx;
// 雙層循環改變原數組(數組去重)
function removeArrayRepElement(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {//將后面重復的數刪掉
arr.splice(j, 1);
}
}
}
return arr;
}
var nodeArr = removeArrayRepElement(node);
for(var i = 0;i<nodeArr.length;i++){
var dd = nodeArr[i];
if(dd){
chartData.push({
name: nodeArr[i]
});
}
}
// console.log(chartData)
// 數組里的對象去重復
let newdData = {};
let log = console.log.bind(console);
person = chartData.reduce((cur,next) => {
newdData[next.name] ? "" : newdData[next.name] = true && cur.push(next);
return cur;
},[]) //設置cur默認類型為數組，并且初始值為空的數組
// log(person);
// console.log(node_line)
option.series[0].data = person;
option.series[0].links =node_line;
component.context.chart.setOption(option, true);
}
// end
~~~
五 調用數據處理函數
~~~
case "echartsRelationship":
internalRefreshechartsRelationshipModelData();
break;
~~~
六 buildDataDescription函數里
scope.$on(event_chartDimensionValueChange, function (s, event) {}）里添加
~~~
case "echartsRelationship":
var dataIndex = -1;
// console.log(component.config.chartConfig)
var option = component.config.chartConfig;
console.log(option)
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) {
console.log(component.config.chartConfig.series[0].data[i].name)
dataIndex = i;
break
}
}
console.log(dataIndex)
if (dataIndex < 0) {
component.context.chart.dispatchAction({
type: "hideTip"
});
return
}
if (dataIndex > -1) {
console.log(event.source.value)
component.context.chart.dispatchAction({
type: "showTip",
name: event.source.value,
seriesIndex: 0
})
}
break;
~~~
六 echarts 事件
~~~
case "echartsRelationship":
component.context.chart.on("mouseover", function (param) {
if (component.config.datasourceConfig.measures == null || component.config.datasourceConfig.dimensions == null) {
return
}
var data = component.context.data;
var dataIndex = param.dataIndex;
var to = param.data.name;
if (to == null || param.value == null || param.value === "-") {
return
}
component.context.tooltipName = to;
scope.notifyDimensionValueChange(null, scope.getLastDimension(), to)
});
break;
~~~
七 在氣泡圖下面寫如下配置項
~~~
// echarts 關系圖
case "echartsRelationship":
chartCategory.groups.push({
title: {
text: "配置"
},
elements: [{
title: "線條顏色",
type: "colorpicker",
bind: "lineColor"
},{
title: "線條曲度",
type: "configSlide",
bind: "lineCurve",
config: {
slideStart: 1,
slideEnd: 100
}
},{
title: "線條寬度",
type: "configSlide",
bind: "lineWidth",
config: {
slideStart: 1,
slideEnd: 30
}
},{
title: "圓點大小",
type: "configSlide",
bind: "borderMax",
config: {
slideStart: 28,
slideEnd: 100
}
},{
title: "原點顏色",
type: "colorpicker",
bind: "dianColor"
},{
title: "顯示文字",
type: "switch",
bind: "fontShow",
on: vsLang.on,
off: vsLang.off
},{
title: "字體顏色",
type: "colorpicker",
bind: "fontColor"
},{
title: "字體大小",
type: "configSlide",
bind: "fontSize",
config: {
slideStart: 12,
slideEnd: 30
}
},{
title: "高亮",
type: "switch",
bind: "gaoliang",
on: vsLang.on,
off: vsLang.off
}]
})
break
~~~
八 相對還是在氣泡圖下面添加監聽的配置項的代碼
~~~
case "echartsRelationship":
scope.$watch("component.config.dianColor", function(newValue, oldValue) {
if (newValue != null) {
var option = component.config.chartConfig;
option.color = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽線條顏色
scope.$watch("component.config.lineColor", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].lineStyle.normal.color = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽線條曲度
scope.$watch("component.config.lineCurve", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].lineStyle.normal.curveness = 0.1 * newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽線條寬度
scope.$watch("component.config.lineWidth", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].lineStyle.normal.width = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽圓點大小
scope.$watch("component.config.borderMax", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].symbolSize = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽文字顯示
scope.$watch("component.config.fontShow", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].label.normal.show = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽字體顏色
scope.$watch("component.config.fontColor", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].label.normal.color = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 監聽字體顏色
scope.$watch("component.config.fontSize", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].label.normal.fontSize = newValue;
scope.component.context.chart.setOption(option, true);
}
});
// 是否開啟高亮
scope.$watch("component.config.gaoliang", function (newValue) {
// console.log(newValue)
if (newValue != null) {
var option = component.config.chartConfig;
option.series[0].focusNodeAdjacency = newValue;
scope.component.context.chart.setOption(option, true);
}
});
break;
~~~
設計頁完
分享頁
路徑
D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js
一 寫在氣泡圖數據處理的上面
~~~
//echarts關系圖
internalRefreshechartsRelationshipModelData = function(){
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
if (data == null || data.length < 1 || dimensions.length < 1) {
return
}
var option = component.config.chartConfig;
var data = component.context.data;
// console.log(option)
var node = [];
var node_line = [];
var legendData = [];
var chartData = [];
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
}
}
}
/*
string 字符串;
str 指定字符;
split(),用于把一個字符串分割成字符串數組;
split(str)[0],讀取數組中索引為0的值（第一個值）,所有數組索引默認從0開始;
*/
function getStr(string,str){
var str_before = string.split(str)[0];
var str_after = string.split(str)[1];
node.push(str_before,str_after);
var value = data[i][measures[measureIdx].name];
node_line.push({
source: str_before,
target: str_after,
// name : value
})
}
// 雙層循環改變原數組(數組去重)
function removeArrayRepElement(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {//將后面重復的數刪掉
arr.splice(j, 1);
}
}
}
return arr;
}
for (var i = 0; i < data.length; i++) {
var nodeData = data[i][dimensions[dimensions.length - 1].name];
getStr(nodeData,'-')
}
if (component.config["measureAlias_" + measureIdx] != null && component.config["measureAlias_" + measureIdx].length > 0) {
option.series[0].name = component.config["measureAlias_" + measureIdx]
}
option.series[0].seriesIndex = measureIdx;
// 雙層循環改變原數組(數組去重)
function removeArrayRepElement(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {//將后面重復的數刪掉
arr.splice(j, 1);
}
}
}
return arr;
}
var nodeArr = removeArrayRepElement(node);
for(var i = 0;i<nodeArr.length;i++){
var dd = nodeArr[i];
if(dd){
chartData.push({
name: nodeArr[i]
});
}
}
// 數組里的對象去重復
let newdData = {};
let log = console.log.bind(console);
person = chartData.reduce((cur,next) => {
newdData[next.name] ? "" : newdData[next.name] = true && cur.push(next);
return cur;
},[]) //設置cur默認類型為數組，并且初始值為空的數組
// console.log(nodeArr)
// console.log(node)
// console.log(legendData)
// console.log(chartData)
// console.log(node_line)
option.series[0].data = person;
option.series[0].links =node_line;
component.context.chart.setOption(option, true);
}
// end
~~~
二 調用數據處理函數
~~~
case "echartsRelationship":
internalRefreshechartsRelationshipModelData();
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說明文檔
- 色斑圖加透明