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