@xiaomengqiang/charts
Version:
hcharts library for web visualization
199 lines (196 loc) • 8.72 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import { DOUBLEBASICOPTION, CHARTTYPENAME, BASICUNIT } from './BaseOption.js';
import merge from '../../util/merge.js';
import defendXSS from '../../util/defendXSS.js';
import { isArray, isString } from '../../util/type.js';
import { handleBarColor } from './handleSeries.js';
import cloneDeep from '../../util/cloneDeep.js';
import chartToken from './chartToken.js';
/**
* Copyright (c) 2024 - present OpenTiny HUICharts Authors.
* Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
function handleGridWidth(baseOpt, padding, chartInstance) {
var right = padding[1];
var left = padding[3];
var containerWidth = chartInstance.getWidth();
var isStrR = isString(right);
var isStrL = isString(left);
var isPtR = isStrR && right.includes('%');
var isPtL = isStrL && left.includes('%');
baseOpt.grid[0].left = left;
baseOpt.grid[1].right = right;
// 左右都是百分比
if (isPtR && isPtL) {
var width = (100 - parseInt(left) - parseInt(right)) / 2;
baseOpt.grid[0].width = width + "%";
baseOpt.grid[1].width = width + "%";
return;
}
var leftPadding = isPtL ? containerWidth * parseInt(left) / 100 : parseInt(left);
var rightPadding = isPtR ? containerWidth * parseInt(right) / 100 : parseInt(right);
var horizontalPadding = leftPadding + rightPadding;
var gridWidth = (containerWidth - horizontalPadding) / 2;
baseOpt.grid[0].width = gridWidth;
baseOpt.grid[1].width = gridWidth;
}
function handleDoubleGrid(baseOpt, iChartOpt, chartInstance) {
var padding = iChartOpt.padding;
baseOpt.grid[0].top = padding[0];
baseOpt.grid[0].bottom = padding[2];
baseOpt.grid[1].top = padding[0];
baseOpt.grid[1].bottom = padding[2];
handleGridWidth(baseOpt, padding, chartInstance);
}
function handleMergeOption(target, source) {
target.forEach(function (item, index) {
merge(item, isArray(source) ? source[index] : source);
});
}
function handleGrid(baseOpt, iChartOpt, doubleSide, chartInstance) {
if (doubleSide) {
baseOpt.grid = cloneDeep(DOUBLEBASICOPTION.grid);
handleDoubleGrid(baseOpt, iChartOpt, chartInstance);
} else {
baseOpt.grid[0].containLabel = false;
}
if (iChartOpt.grid) {
handleMergeOption(baseOpt.grid, iChartOpt.grid);
}
}
function handleYaxis(baseOpt, iChartOpt, dataSet, doubleSide) {
if (doubleSide) {
baseOpt.yAxis = cloneDeep(DOUBLEBASICOPTION.yAxis);
baseOpt.yAxis[0].show = true;
baseOpt.yAxis[0].axisLine.lineStyle.color = chartToken.axisLineColor;
baseOpt.yAxis[0].data = dataSet.barName[0];
baseOpt.yAxis[1].data = dataSet.barName[1];
} else {
baseOpt.yAxis[0].inverse = true;
baseOpt.yAxis[0].show = false;
baseOpt.yAxis[0].data = iChartOpt.name === CHARTTYPENAME.ProcessBarChart ? dataSet.barName : dataSet.seriesName;
baseOpt.yAxis[0].type = 'category';
}
if (iChartOpt.yAxis) {
handleMergeOption(baseOpt.yAxis, iChartOpt.yAxis);
}
}
function handleXaxis(baseOpt, doubleSide, iChartOpt) {
if (doubleSide) {
baseOpt.xAxis = cloneDeep(DOUBLEBASICOPTION.xAxis);
} else {
baseOpt.xAxis[0].show = false;
baseOpt.xAxis[0].type = 'value';
// 保证图表能横向撑满容器
baseOpt.xAxis[0].max = 'dataMax';
}
if (iChartOpt.xAxis) {
handleMergeOption(baseOpt.xAxis, iChartOpt.xAxis);
}
}
function handleDataZoom(baseOpt, initIchartOption) {
if (initIchartOption.dataZoom) {
handleMergeOption(baseOpt.dataZoom, initIchartOption.dataZoom);
}
}
function handleLegend(baseOpt, dataSet, doubleSide, initIchartOption) {
if (doubleSide) {
baseOpt.legend.data = dataSet.seriesName.map(function (item) {
return {
name: item
};
});
} else {
baseOpt.legend.show = false;
}
if (initIchartOption.legend) {
merge(baseOpt.legend, initIchartOption.legend);
}
}
function handleTipValue(params, dataSet, doubleSide) {
var value;
if (doubleSide) {
value = dataSet.barData[Math.floor(params.seriesIndex / 2)][params.dataIndex]._initValue || dataSet.barData[Math.floor(params.seriesIndex / 2)][params.dataIndex].value;
} else {
value = dataSet.barData[params.dataIndex]._initValue || dataSet.barData[params.dataIndex].value;
}
return value;
}
function handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide) {
var _iChartOpt$tooltip;
var unit = iChartOpt.unit,
tipHtml = iChartOpt.tipHtml;
if (tipHtml) {
baseOpt.tooltip.formatter = tipHtml;
return;
}
var innerUnit = unit || unit === '' ? unit : BASICUNIT;
var isItemTooltip = baseOpt.tooltip.trigger === 'item';
var ichartTooltipFormatter = iChartOpt == null ? void 0 : (_iChartOpt$tooltip = iChartOpt.tooltip) == null ? void 0 : _iChartOpt$tooltip.formatter;
baseOpt.tooltip.formatter = function (echartsParams) {
var params = isItemTooltip ? echartsParams : echartsParams[0];
var name = params.name;
var seriesName = params.seriesName;
var value = handleTipValue(params, dataSet, doubleSide);
var color = seriesName === 'background' || seriesName === 'backgroundLeft' || seriesName === 'backgroundRight' ? handleBarColor(params, iChartOpt, dataSet, doubleSide, true) : params.color;
var validData = value === null || value === undefined;
if (ichartTooltipFormatter) {
var customParams = _extends({}, params, {
value: value,
color: color,
data: value,
unit: innerUnit
});
return ichartTooltipFormatter(customParams);
}
if (name === 'null') return;
var htmlString = "\n <div>\n <span style=\"display:inline-block;width:10px;height:10px;\n border-radius:5px;background-color:" + defendXSS(color) + ";\">\n </span>\n <span style=\"margin-left:5px;\">\n <span style=\"display:inline-block;margin-right:8px;min-width:80px;\">" + defendXSS(name) + "</span> \n <span style=\"font-weight:bold\">" + (validData ? '--' : defendXSS(value)) + defendXSS(innerUnit) + "</span>\n </span>\n </div>\n ";
return htmlString;
};
}
function handleStackTipFormatter(baseOpt, iChartOpt) {
baseOpt.tooltip.trigger = 'axis';
var tipHtml = iChartOpt.tipHtml;
if (tipHtml) {
baseOpt.tooltip.formatter = tipHtml;
return;
}
baseOpt.tooltip.formatter = function (params) {
var name = params[0].name;
if (name === 'null') return;
var htmlString = "<div style=\"margin-bottom:4px;\">" + defendXSS(name) + "</div>";
params.forEach(function (param, index) {
if (index > 1) {
var value = param.data._initValue || param.data.value;
htmlString += "<div>\n <span style=\"display:inline-block;width:10px;height:10px;\n border-radius:5px;background-color:" + defendXSS(param.color) + ";\">\n </span>\n <span style=\"margin-left:5px;\">\n <span style=\"display:inline-block;margin-right:8px;min-width:80px;\">" + defendXSS(param.seriesName) + "</span>\n <span style=\"font-weight:bold\">" + (defendXSS(value) || (defendXSS(value) === 0 ? defendXSS(value) : '--')) + (defendXSS(iChartOpt.unit) || '') + "</span>\n </span>\n </div>\n";
}
});
return htmlString;
};
}
function handleTooltip(baseOpt, iChartOpt, dataSet, doubleSide) {
baseOpt.tooltip.axisPointer.type = 'none';
baseOpt.tooltip.trigger = 'item';
if (iChartOpt.tooltip) {
merge(baseOpt.tooltip, iChartOpt.tooltip);
// 当不显示tip的时候鼠标移动上去没有小手效果
if (iChartOpt.tooltip.show === false) {
baseOpt.series.forEach(function (item) {
item.cursor = 'auto';
});
}
}
if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide);
} else {
handleStackTipFormatter(baseOpt, iChartOpt);
}
}
export { handleDataZoom, handleGrid, handleLegend, handleTooltip, handleXaxis, handleYaxis };