路径：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说明文档
- 色斑图加透明