路徑：D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js
添加組件對象
```
{
name: "",
type: "boxplot",
coverImage: contextPath + "/images/componenttypes/" + locale + "/echarts/zh_world.png",
coverImageWidth: "50%",
tip: "盒須圖"
}
```
添加箱線圖模板對象
```
// 箱線圖對象
var boxplotOptionTemplate = {
animationDuration: 500,
title: {
show:false
},
tooltip: {
show: true,
trigger: "item",
axisPointer: {
type: 'shadow'
}
},
toolbox: { //可視化的工具箱
show: false,
feature: {
dataView: { //數據視圖
show: true
},
restore: { //重置
show: true
},
saveAsImage: {//保存圖片
show: true
}
}
},
dataZoom: {
show: false,
realtime: true,
showDetail: true,
handleSize: 12,
height: 30,
type: 'slider',
backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色
fillerColor:"rgba(167,183,204,0.6)", //選中范圍的填充顏色。
borderColor:"#ddd", //邊框顏色。
filterMode: 'filter',
throttle:100,
left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'
top:"bottom", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //組件離容器右側的距離,'20%'
bottom:"0%", //組件離容器下側的距離,'20%'
},
grid: {
x: 42,
y: 30,
x2: 11,
y2: 50,
borderWidth: 0,
borderColor: "#f0f0f0"
},
xAxis: {
type: 'category',
data: ['支付寶','微信','銀聯','閃付','京東','移動支付'],
nameTextStyle: {
color: '#3259B8',
fontSize: 14,
},
axisTick:{
show:false,
},
axisLine: {
lineStyle: {
color: '#3259B8',
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#3259B8',
fontSize: 14,
},
axisLabel:{
formatter:'{value}',
},
axisLine: {
lineStyle: {
color: '#3259B8',
}},
splitLine: {
lineStyle: {
color: '#A7BAFA',
},
}
},
series: [{
name: 'boxplot',
type: 'boxplot',
data: '',
tooltip: {
formatter: function (param) {
return [
'grade: ' + param.name,
'upper: ' + param.data[4],
'Q3: ' + param.data[3],
'median: ' + param.data[2],
'Q1: ' + param.data[1],
'lower: ' + param.data[0]
].join('<br/>')
}
},
itemStyle: {
normal:{
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#F02FC2' // 0% 處的顏色
}, {
offset: 1,
color: '#3EACE5' // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
},
borderWidth:2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(240,47,194,0.7)' // 0% 處的顏色
}, {
offset: 1,
color: 'rgba(62,172,299,0.7)' // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
},
}
},
},
]
}
// end
```
核心處理數據函數
```
var internalRefreshBoxplotModelData = function () {
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
var chartData = [];
var chartDataMap = {};
var measureIdx = 0;
console.log(data)
/**
* 箱體圖需要兩個維度 一個度量
* 生成圖形，需要將data按最后一個維度將度量進行分組
*/
// x軸數據
var xAxisData = [];
// 箱體數據需要的數組
var seriesData = [];
// 箱體數據名稱的數組，主要是為了顯示異常值的維度名稱
var seriesDataName = [];
// 根據倒數第二個維度，獲取X軸數組
for (var i = 0; i < data.length; i++) {
var value = data[i][dimensions[dimensions.length - 2].name];
var isAdd = true;
for (var d = 0; d < xAxisData.length; d++) {
if (xAxisData[d] == value) {
isAdd = false;
break;
}
}
if (isAdd) {
xAxisData[xAxisData.length] = value;
}
}
// 根據倒數第二和倒數第一個維度 + 倒數第一個度量 獲取度量值 組成箱體數據需要的數組
for (var d = 0; d < xAxisData.length; d++) {
var xv = xAxisData[d];
var seriesGroupData = [];
var seriesGroupDataName = [];
for (var i = 0; i < data.length; i++) {
var dimensions1 = data[i][dimensions[dimensions.length - 2].name];
if (xv == dimensions1) {
seriesGroupData[seriesGroupData.length] = data[i][measures[measures.length - 1].name];
seriesGroupDataName[seriesGroupDataName.length] = { name: data[i][dimensions[dimensions.length - 1].name], value: data[i][measures[measures.length - 1].name]};
}
}
seriesData[seriesData.length] = seriesGroupData;
seriesDataName[seriesDataName.length] = seriesGroupDataName;
}
// 根據箱體需要的數組調用echart生成 箱體數據 因為原生的生成方法 異常值沒有維度名稱，此處修改為把維度名稱傳進去并在異常值中顯示維度名稱
var seriesLoadData = echarts.dataTool.prepareBoxplotData(seriesData, null, seriesDataName);
option.xAxis.data = xAxisData;
// 異常值對象 此處動態添加
var outliers = {
name: '異常值',
type: 'scatter',
itemStyle: {
normal: {
color: 'red'
}
},
symbolSize:5,
data: seriesLoadData.outliers,
label: {
show: true,
formatter: "{@[2]}",
position: 'right',
}
}
var series = [];
series[0] = option.series[0];
series[0].data = seriesLoadData.boxData;
series[1] = outliers;
option.series = series;
component.context.chart.setOption(option, true);
};
```
添加調用數據處理的函數
```
case "boxplot":
internalRefreshBoxplotModelData();
break;
```
設置2個維度 如圖的位置 搜索 _buildGaugeThresholdDescription
```
// 添加箱體圖支持兩個維度
switch (component.type) {
case "boxplot":
scope.component.config.chartDimensionCount = 2;
break;
}
```
在樹圖配置項下面添加
```
case "boxplot":
chartCategory.groups.push({
// 圖例
title: {
text: "基本配置"
},
elements: [
{
title: "工具箱",
type: "switch",
bind: "showRoam",
on: vsLang.on,
off: vsLang.off
}]
});
// 箱線圖軸線配置
chartCategory.groups.push({
// 圖例
title: {
text: "軸線配置"
},
elements: [{
// x軸顏色
title: "x軸顏色",
type: "colorpicker",
bind: "boxplotColorX"
},{
// y軸顏色
title: "y軸顏色",
type: "colorpicker",
bind: "boxplotColorY"
},{
// 分割線顏色
title: "分割線顏色",
type: "colorpicker",
bind: "boxplotColorXf"
},{
// 箱線寬度
title: "箱線寬度",
type: "configSlide",
bind: "boxplotBorder",
config: {
slideEnd: 20
}
}]
});
// 盒須圖漸變色
chartCategory.groups.push({
// 圖例
title: {
text: "漸變色配置"
},
elements: [{
// 箱體顏色一
title: "箱體顏色一",
type: "colorpicker",
bind: "boxplotColorOne"
},{
// 箱體顏色二
title: "箱體顏色二",
type: "colorpicker",
bind: "boxplotColorTow"
},{
// 箱線顏色一
title: "箱線顏色一",
type: "colorpicker",
bind: "boxplotColorOneLine"
},{
// 箱線顏色二
title: "箱線顏色二",
type: "colorpicker",
bind: "boxplotColorTowLine"
}]
});
break;
```
樹圖監聽下面 加 箱線圖的監聽
```
// 監聽箱線圖
case "boxplot":
scope.$watch("component.config.showRoam", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.toolbox.show = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// x軸顏色
scope.$watch("component.config.boxplotColorX", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.xAxis.axisLine.lineStyle.color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// y軸顏色
scope.$watch("component.config.boxplotColorY", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.yAxis.axisLine.lineStyle.color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// 分割軸顏色
scope.$watch("component.config.boxplotColorXf", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.yAxis.splitLine.lineStyle.color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// 漸變色1
scope.$watch("component.config.boxplotColorOne", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.color.colorStops[0].color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// 漸變色2
scope.$watch("component.config.boxplotColorTow", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.color.colorStops[1].color = newValue;
scope.component.context.chart.setOption(option, true)
}
});// 漸變色1
scope.$watch("component.config.boxplotColorOneLine", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.borderColor.colorStops[0].color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// 漸變色2
scope.$watch("component.config.boxplotColorTowLine", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.borderColor.colorStops[1].color = newValue;
scope.component.context.chart.setOption(option, true)
}
});
// 箱線寬度
scope.$watch("component.config.boxplotBorder", function (newValue) {
if (newValue != null) {
// console.log(newValue)
var option = component.config.chartConfig;
option.series[0].itemStyle.normal.borderWidth = newValue;
scope.component.context.chart.setOption(option, true)
}
});
break;
```
在配置項及監聽提示窗屬性里 添加case "boxplot": 如圖
在配置項及監聽拖動小組件里 添加case "boxplot": 如圖
深拷貝對象 angular.copy
```
case "boxplot":
option = angular.copy(boxplotOptionTemplate);
var data = echarts.dataTool.prepareBoxplotData([[30645,53490,66640.5,89123,159949,],[19464,46454,59139,83479,19464,],[16704,46041,60155,86818,159980,],[21543,41619.75,58819.5,87540,159978,],[15202,35757,44721,59916.5,159825,],[22158,34754.5,49718,71637,139972,],]);
option.series[0].data = data.boxData;
break;
```
分享頁
D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js
核心數據處理函數
```
var internalRefreshBoxplotModelData = function () {
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
var chartData = [];
var chartDataMap = {};
var measureIdx = 0;
console.log(data)
/**
* 箱體圖需要兩個維度 一個度量
* 生成圖形，需要將data按最后一個維度將度量進行分組
*/
// x軸數據
var xAxisData = [];
// 箱體數據需要的數組
var seriesData = [];
// 箱體數據名稱的數組，主要是為了顯示異常值的維度名稱
var seriesDataName = [];
// 根據倒數第二個維度，獲取X軸數組
for (var i = 0; i < data.length; i++) {
var value = data[i][dimensions[dimensions.length - 2].name];
var isAdd = true;
for (var d = 0; d < xAxisData.length; d++) {
if (xAxisData[d] == value) {
isAdd = false;
break;
}
}
if (isAdd) {
xAxisData[xAxisData.length] = value;
}
}
// 根據倒數第二和倒數第一個維度 + 倒數第一個度量 獲取度量值 組成箱體數據需要的數組
for (var d = 0; d < xAxisData.length; d++) {
var xv = xAxisData[d];
var seriesGroupData = [];
var seriesGroupDataName = [];
for (var i = 0; i < data.length; i++) {
var dimensions1 = data[i][dimensions[dimensions.length - 2].name];
if (xv == dimensions1) {
seriesGroupData[seriesGroupData.length] = data[i][measures[measures.length - 1].name];
seriesGroupDataName[seriesGroupDataName.length] = { name: data[i][dimensions[dimensions.length - 1].name], value: data[i][measures[measures.length - 1].name]};
}
}
seriesData[seriesData.length] = seriesGroupData;
seriesDataName[seriesDataName.length] = seriesGroupDataName;
}
// 根據箱體需要的數組調用echart生成 箱體數據 因為原生的生成方法 異常值沒有維度名稱，此處修改為把維度名稱傳進去并在異常值中顯示維度名稱
var seriesLoadData = echarts.dataTool.prepareBoxplotData(seriesData, null, seriesDataName);
option.xAxis.data = xAxisData;
// 異常值對象 此處動態添加
var outliers = {
name: '異常值',
type: 'scatter',
itemStyle: {
normal: {
color: 'red'
}
},
symbolSize:5,
data: seriesLoadData.outliers,
label: {
show: true,
formatter: "{@[2]}",
position: 'right',
}
}
var series = [];
series[0] = option.series[0];
series[0].data = seriesLoadData.boxData;
series[1] = outliers;
option.series = series;
component.context.chart.setOption(option, true);
};
```
調用數據處理方法
```
case "boxplot":
internalRefreshBoxplotModelData();
break;
```
發起聯動？
```
case "boxplot":
component.context.chart.on("mouseover", function (param) {
if (param.dataIndex < 0) {
return
}
if (component.context.tooltipName != null && "" + component.context.tooltipName === "" + param.name) {
return
}
component.context.tooltipName = param.name;
scope.notifyDimensionValueChange(null, scope.getLastDimension(), param.name)
});
break;
```
接收聯動？
```
case "boxplot":
var dataIndex = -1;
var option = component.config.chartConfig;
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.dispatchAction({
type: "hideTip"
});
return
}
if (dataIndex > -1) {
component.context.chart.dispatchAction({
type: "showTip",
name: event.source.value,
seriesIndex: 0
})
}
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說明文檔
- 色斑圖加透明