🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
~~~ 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) }; ~~~