wetrade-design
Version:
一款多语言支持Vue3的UI框架
1,177 lines (1,175 loc) • 38.9 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _extends from "@babel/runtime/helpers/esm/extends";
import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { ref, defineComponent, provide, reactive, onMounted, onUpdated, nextTick, watch, computed } from 'vue';
import _ from 'lodash';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { barlineChartContextKey } from './constants';
import { getColors } from '../../_util/chartsColors';
import XAxis from './xAxis';
import Legend from './legend';
import Spin from '../../spin';
import * as echarts from 'echarts';
import { combineTooltipFormatter } from './computed';
import { SeriesType } from './const';
import { hexToRgba } from '../../utils/common';
import { numberFormat, bigNumberUnit } from 'wetrade-tools';
import BigNumber from 'bignumber.js';
export var QuotationColorMap = {
redUp: 0,
greenUp: 1
};
export var BarLineChartProps = function BarLineChartProps() {
return {
quotationColor: {
type: Number,
default: 0
},
loading: {
type: Boolean,
default: false
},
chartData: {
type: Object,
default: function _default() {
return {
x: [],
data: []
};
}
},
grid: {
type: Array,
default: function _default() {
return [];
}
},
unit: {
type: [String, Array],
default: ''
},
colors: {
type: Array,
default: function _default() {
return [];
}
},
height: {
type: String,
default: '300px'
},
scene: {
type: [String, Array],
default: 'bar'
},
isStack: {
type: Boolean,
default: false
},
stack: {
type: Array,
default: function _default() {
return [];
}
},
isArea: {
type: Boolean,
default: false
},
top: {
type: Number,
default: 50
},
right: {
type: [Number, String],
default: 4
},
left: {
type: Number,
default: 28
},
bottom: {
type: Number,
default: 8
},
barWidth: {
type: [String, Number],
default: '20%'
},
// 柱子的最大宽度
barMaxWidth: {
type: [String, Number],
default: 32
},
// 柱条的最小宽度
barMinWidth: {
type: [String, Number],
default: 18
},
// 柱条之间的距离 数值为百分比 相对于柱条的宽度
barGap: {
type: String,
default: '20%'
},
cursor: {
type: String,
default: 'pointer'
},
showLegend: {
type: Boolean,
default: false
},
// 图例
legend: {
type: Array,
default: function _default() {
return [];
}
},
// 图例样式
legendPosition: {
type: Object,
default: function _default() {
return {
bottom: 20
};
}
},
showXAxis: {
type: Boolean,
default: false
},
tooltipAxisPointerType: {
type: String,
default: 'shadow'
},
tooltipAxisPointerLineType: {
type: String,
default: 'solid'
},
// 图例是否支持取消选择
selectedMode: {
type: Boolean,
default: false
},
// 图例选中状态表，动态配置图例显示项，适用于 selectedMode = true 时
selectedModel: {
type: Object,
default: function _default() {
return {};
}
},
xAxis: {
type: Array,
default: function _default() {
return [];
}
},
showXAxisLabel: {
type: Boolean,
default: true
},
xLabelInterval: {
type: [String, Number],
default: 'auto'
},
xLabelSize: {
type: Number,
default: 12
},
// x轴文字块的内边距, 例：[3, 4, 5, 6]、4
xLabelPadding: {
type: [Array, Number],
default: 0
},
xAxisBoundaryGap: {
type: [Boolean, Array],
default: true
},
xLabelAlign: {
type: String,
default: 'center'
},
// 是否显示Y轴
showYAxis: {
type: Boolean,
default: true
},
// 是否显示Y轴label
showYAxisLabel: {
type: Boolean,
default: true
},
// y轴配置
yAxis: {
type: Array,
default: function _default() {
return [];
}
},
// 显示总数label 仅在bar堆叠场景下有效
showTotalLabel: {
type: [Boolean, Array],
default: false
},
showYAxisSplitLine: {
type: Boolean,
default: true
},
// 显示千分位符号 on:打开 off:关闭，如果是单个字符串则全部开 or 关，如果是数组则根据对应的数组顺序去开 or 关 只用于 tooltip
thousandthSign: {
type: [Array, String],
default: 'off'
},
// 小数点位数 单个数值则全部应用，为数组则按顺序应用 只用于 legend 和 tooltip
pointerNum: {
type: [Number, Array],
default: 2
},
showTooltip: {
type: Boolean,
default: true
},
toolTipPatchFunc: {
default: null
},
// 数据对应 y 轴的下标，仅在 yAxis 长度大于 1 时有效,必须与 yAxis 对应，否则会异常
yAxisIndex: {
type: [Number, Array],
default: 0
},
yAxisUnit: {
type: [String, Array],
default: ''
},
yAxisPointerNum: {
type: [Number, Array],
default: 0
},
// y 轴千分位
yAxisthousandthSign: {
type: [String, Array],
default: 'on'
},
// x 轴 label 是否换行
xLabelWrap: {
type: Boolean,
default: false
},
xLabelLineFontNum: {
type: Number,
default: 5
},
// 显示默认数值 这样会保存默认小数位
showDefaultNum: {
type: Boolean,
default: false
},
// tooltip 的位置是否支持自定义 true 重新计算 tooltip 的位置
tooltipControlPos: {
type: Boolean,
default: false
},
// 计算 tooltip 位置的函数
computedPosition: {
type: Function,
default: function _default() {
return null;
}
},
// Y 轴的数值是否需要换算，单位有万，亿，万亿，默认不换算
isYAxisConversion: {
type: [Boolean, Array],
default: false
},
// y轴数值转换后的小数位显示规则 true 按有效小数位显示 false 按yAxisPointerNum值显示
yAxisConversionDecimal: {
type: Boolean,
default: false
},
// tooltip的数值是否需要换算，单位有万，亿，万亿，默认不换算
isTooltipConversion: {
type: [Boolean, Array],
default: false
},
// 柱条最小高度，可用于防止某数据项的值过小而影响交互
// 设置了最小高度，data 传值时，不需要最小高度的值要传 null，传 0 会展示最小高度，null 不会
barMinHeight: {
type: Number,
default: 0
},
// tooltip 头部文字是否显示 头部为日期或文案，是否需要显示等
showTipHeaderText: {
type: Boolean,
default: true
},
// tooltip底部显示的文字label内容
bottomText: {
type: String,
default: ''
},
// tooltip中值是否需要向下取整
roundDown: {
type: Boolean,
default: false
},
// tooltip底部显示的内容的值集合
bottomValueList: {
type: Array,
default: function _default() {
return [];
}
},
// 为 null 的数据是否绘制为 0，图表绘制为0，图例显示为--
isNullShow: {
type: Boolean,
default: false
},
// 是否连接null
isConnectedNull: {
type: Boolean,
default: false
},
// label是否要删除[]及内容, 使用于tooltip；场景：selectedModel为true时，需要增加唯一标识确定不同的label，显示时需删除
isLabelRemoveId: {
type: Boolean,
default: false
},
// tooltip formatter
combineTooltipFormatter: {
default: function _default() {
return combineTooltipFormatter;
}
},
showSymbol: {
type: Boolean,
default: false
},
symbolType: {
type: String,
default: 'circle'
},
// tooltip是否直接展示字符串
showStringValue: {
type: Boolean,
default: false
},
// 图例 - 数据
legendList: {
type: Array,
default: function _default() {
return [];
}
},
// 图例 - 大于1行时，是否显示左右箭头
isShowTotal: {
type: Boolean,
default: false
},
/** 图例 - 边距
* in 图例与文字间的间距
* out 图例与图例间的间距
* */
spacing: {
type: Object,
default: function _default() {
return {
in: 10,
out: 24
};
}
},
showCustomX: {
type: Boolean,
default: true
},
showCustomXAll: {
type: Boolean,
default: false
},
showCustomLegend: {
type: Boolean,
default: true
},
lineStyleWidth: {
type: Number,
default: 1
},
// 当前下标线条是实线还是虚线，仅对scene=line有效
seriesLine: {
type: Array,
default: function _default() {
return [];
}
},
confine: {
type: Boolean,
default: false
},
xLabelOverflow: {
type: Boolean,
default: false
},
totalLabelColor: {
type: [String, Array],
default: '#165DFF'
},
isTooltipLabelShow: {
type: Boolean,
default: false
},
isMarkLine: {
type: Boolean,
default: false
},
mouseOutView: {
type: Function,
default: function _default() {
return {};
}
},
renderer: {
type: String,
default: 'svg'
},
isNumberDefault: {
type: Boolean,
default: false
},
// 供账目分析-账目差值、银行等数据场景用, tooltip的label是否要取chart.x里的值
showTooltipCurName: {
type: Boolean,
default: false
},
customXAxis: {
type: Array,
default: function _default() {
return [];
}
},
customSeries: {
type: Array,
default: function _default() {
return [];
}
},
emphasisFocus: {
type: Boolean,
default: false
},
areaOpacity: {
type: Number,
default: 0.1
},
areaColorOpacity: {
type: Number,
default: 1
},
isSmooth: {
type: [Boolean, Number],
default: false
}
};
};
var BarLineChart = defineComponent({
name: 'WdBarLineChart',
XAxis: XAxis,
Legend: Legend,
props: BarLineChartProps(),
slots: ['mark'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
expose = _ref.expose,
slots = _ref.slots;
var _useConfigInject = useConfigInject('barLineChart', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
// 如果X轴为自定义的对象数组，图表绘制时取text字段；如果X轴为字符串数组，直接用；
var xAxisArr = computed(function () {
return props.chartData.x.map(function (t) {
return (t === null || t === void 0 ? void 0 : t.realText) || (t === null || t === void 0 ? void 0 : t.text) || t;
});
});
var wrapRef = ref();
var mainRef = ref();
var myChart = null;
var resizeOb = ref(null);
// 原始x轴label是否换行处理, 遍历字符串数组，按需要求余
var handleXLabel = function handleXLabel(val) {
var fontNum = props.xLabelLineFontNum;
var str = '';
for (var i = 0; i < val.length; i++) {
str += val[i];
if (!((i + 1) % fontNum)) str += '\n';
}
return str;
};
// 适配
var handlerResize = function handlerResize() {
myChart.resize();
};
// 鼠标移出图表后节流执行mouseOutView，举例：投管-持有资产-收益走势图
var handlerMouseOutView = _.throttle(function () {
props.mouseOutView();
}, 300);
// 初始化系列数据
var getSeries = function getSeries() {
var _props$customSeries;
var series = [];
var legend = props.legend;
// 指定图表的配置项和数据, 防止名称一样颜色会自动渲染成一致
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var nColor = props.colors.length > 0 ? props.colors : colors.COMMONCOLOR;
// 如果为自定义图表，在此生成series，主要用于隐藏部分不需要显示的柱状占位的问题 举例：账目汇总-美股-交易概览-费率对比
if ((_props$customSeries = props.customSeries) !== null && _props$customSeries !== void 0 && _props$customSeries.length) {
series = _.cloneDeep(props.customSeries);
for (var i = 0, length = (_series = series) === null || _series === void 0 ? void 0 : _series.length; i < length; i++) {
var _series;
_extends(series[i], {
barWidth: props.barWidth,
barMaxWidth: props.barMaxWidth,
barMinWidth: props.barMinWidth,
barMinHeight: props.barMinHeight,
barGap: props.barGap,
type: props.scene
});
}
return series;
}
// 其余柱状图
for (var _i = 0, _length = (_props$chartData = props.chartData) === null || _props$chartData === void 0 ? void 0 : _props$chartData.data.length; _i < _length; _i++) {
var _props$chartData, _props$yAxisIndex;
var data = props.chartData.data[_i];
// 如果null需要绘制为0, 需要把data转为0
if (props.isNullShow) {
data = data.map(function (t) {
return !t ? 0 : t;
});
}
var nowColor = nColor[_i % nColor.length];
var dataScene = typeof props.scene === 'string' ? props.scene : props.scene[_i];
series[_i] = {
name: legend[_i],
type: dataScene,
data: data,
color: nowColor,
connectNulls: props.isConnectedNull,
itemStyle: {
color: nowColor
},
emphasis: {
focus: props.emphasisFocus ? 'series' : false
},
smooth: props.isSmooth
};
// 根据不同的场景类型添加不同的配置
if (dataScene === SeriesType.BAR) {
_extends(series[_i], {
barWidth: props.barWidth,
barMaxWidth: props.barMaxWidth,
barMinWidth: props.barMinWidth,
barMinHeight: props.barMinHeight,
barGap: props.barGap,
cursor: (props === null || props === void 0 ? void 0 : props.cursor) || 'pointer'
});
props.isStack && _extends(series[_i], {
stack: props.stack.length ? props.stack[_i] : 'total'
});
}
if (dataScene === SeriesType.LINE) {
var _props$chartData2;
var lineType = props.seriesLine.length ? props.seriesLine[_i] : 'solid';
_extends(series[_i], {
showSymbol: (xAxisArr.value.length > 1 ? false : true) || props.showSymbol,
symbol: props.symbolType,
symbolSize: 7,
lineStyle: {
width: props.lineStyleWidth,
type: lineType,
opacity: props.isMarkLine ? 0 : 1
},
itemStyle: {
borderWidth: 2,
borderColor: colors.SYMBOL_BORDER_COLOR
},
markLine: {
silent: true,
symbol: 'none',
data: []
}
});
if (props.isMarkLine && ((_props$chartData2 = props.chartData) === null || _props$chartData2 === void 0 ? void 0 : _props$chartData2.data.length) > 1) {
series[_i].markLine.data.push({
name: legend[_i],
yAxis: props.chartData.data[_i][0],
lineStyle: {
color: nowColor,
type: 'solid',
opacity: props.isMarkLine ? 1 : 0
},
label: {
show: false
}
});
}
// 面积图增加渐变
props.isArea && _extends(series[_i], {
areaStyle: {
opacity: props.areaOpacity,
color: props.areaColorOpacity || props.areaColorOpacity == 0 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: nowColor
}, {
offset: 1,
color: hexToRgba(nowColor, props.areaColorOpacity)
}]) : null // 背景颜色透明度 最深色 ~ 最浅色的比例配置
}
});
// stack 根据是否配置显示
props.isStack && _extends(series[_i], {
stack: props.stack.length ? props.stack[_i] : 'total'
});
}
var yAxisIndex = _typeof(props.yAxisIndex) === 'object' && ((_props$yAxisIndex = props.yAxisIndex) === null || _props$yAxisIndex === void 0 ? void 0 : _props$yAxisIndex.length) > 0 && typeof props.yAxisIndex !== 'number' ? props.yAxisIndex[_i] : props.yAxisIndex;
if (props.yAxis.length > 0) {
_extends(series[_i], {
yAxisIndex: yAxisIndex
});
}
}
return series;
};
var handleSeries = function handleSeries() {
var series = getSeries();
series.map(function (item, index) {
return _extends(item, {
barMinHeight: props.barMinHeight,
label: {
show: typeof props.showTotalLabel === 'boolean' ? props.showTotalLabel : props.showTotalLabel[index],
fontSize: 12,
position: 'top',
color: typeof props.totalLabelColor === 'string' ? props.totalLabelColor : props.totalLabelColor[index] || '#165DFF',
formatter: function formatter(params) {
var unit = props.unit.length > 0 && typeof props.unit !== 'string' ? props.unit[index] : props.unit;
// 是否显示小数位
var pointerNum = typeof props.pointerNum !== 'number' ? props.pointerNum[index] : props.pointerNum;
// 是否显示千位符
var symbol = props.thousandthSign.length > 0 && typeof props.thousandthSign !== 'string' ? props.thousandthSign[index] : props.thousandthSign;
// 是否要转换为万、亿
var isConversion = typeof props.isTooltipConversion === 'boolean' ? props.isTooltipConversion : props.isTooltipConversion[index];
// 跟随tooltip是否换算规则
var value = params.value;
value = numberFormat(value, {
decimal: pointerNum,
t: symbol === 'on',
r: isConversion ? BigNumber.ROUND_HALF_UP : props.roundDown ? BigNumber.ROUND_DOWN : BigNumber.ROUND_HALF_UP,
os: isConversion
});
return value + unit;
}
}
});
});
return series;
};
var init = function init() {
var _myChart, _myChart2, _props$customSeries2, _props$customSeries3, _props$customSeries4;
(_myChart = myChart) === null || _myChart === void 0 ? void 0 : _myChart.clear();
if (![null].includes(myChart)) (_myChart2 = myChart) === null || _myChart2 === void 0 ? void 0 : _myChart2.dispose();
myChart = echarts.init(mainRef.value, null, {
renderer: props.renderer
});
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var colorList = props.colors.length > 0 ? props.colors : colors.COMMONCOLOR;
var shadowParams = (_props$customSeries2 = props.customSeries) !== null && _props$customSeries2 !== void 0 && _props$customSeries2.length ? {} : {
color: colors.POINTER_SHADOW
};
// 指定图表的配置项和数据
var option = {
color: colorList,
grid: props.grid.length ? props.grid : {
top: props.top,
left: props.left,
right: props.right,
bottom: props.bottom
},
tooltip: {
show: props.showTooltip,
trigger: 'axis',
transitionDuration: 0,
confine: props.confine,
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: (_props$customSeries3 = props.customSeries) !== null && _props$customSeries3 !== void 0 && _props$customSeries3.length ? 'none' : props.tooltipAxisPointerType,
lineStyle: {
color: colors.POINTER_LINE,
type: props.tooltipAxisPointerLineType
},
shadowStyle: _objectSpread({}, shadowParams),
label: {
show: props.isTooltipLabelShow,
backgroundColor: colors.BAR_TOOLTIP_LABEL_COLOR,
color: '#fff',
padding: 5,
fontWeight: 600,
fontSize: 10,
margin: 5,
formatter: function formatter(e) {
return "".concat(e.value);
}
},
z: 0
},
padding: props.showTipHeaderText ? 12 : [2, 12, 12, 12],
backgroundColor: colors.TOOLTIP_BG,
borderColor: colors.TOOLTIP_BDBGC,
textStyle: {
color: colors.TEXT,
fontSize: 12,
fontWeight: 600
},
extraCssText: "box-shadow: ".concat(colors.NEW_TREND_TOOLTIP_SHADOW, ";"),
formatter: function formatter(params) {
return props.combineTooltipFormatter({
params: params,
props: props
});
},
position: function position(point, params, dom, rect, size) {
// tooltip太多时，是否换行处理 解决超出浏览器看不到tooltip的问题
return props.computedPosition(point, params, dom, rect, size);
}
},
legend: _objectSpread(_objectSpread({
show: props.showLegend
}, props.legendPosition), {}, {
itemWidth: props.scene === SeriesType.LINE ? 10 : 8,
itemHeight: props.scene === SeriesType.LINE ? 3 : 8,
itemGap: 24,
selectedMode: props.selectedMode,
padding: [0, 20, 0, 0],
textStyle: {
fontStyle: '12px',
color: colors.TEXT,
lineHeight: 22
},
itemStyle: {
borderWidth: 0
},
data: props.legend
}),
textStyle: {
color: colors.TEXT
},
xAxis: handleXAxis(),
yAxis: handleYAxis(),
series: props.showTotalLabel ? handleSeries() : getSeries()
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event === null || event === void 0 ? void 0 : event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
emit('handleUpdateAxisPointer', dimension);
}
});
// 使用指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.getZr().on('globalout', handlerMouseOutView);
if (!props.emphasisFocus || !((_props$customSeries4 = props.customSeries) !== null && _props$customSeries4 !== void 0 && _props$customSeries4.length)) return;
// 鼠标移入柱子高亮，其他透明度变低
var allColor = [];
myChart.on('mouseover', function (e) {
// 遍历补齐所有颜色，避免颜色循环时相互影响
var findObj = undefined;
for (var i = 0, len = (_props$customSeries5 = props.customSeries) === null || _props$customSeries5 === void 0 ? void 0 : _props$customSeries5.length; i < len; i++) {
var _props$customSeries5, _props$customSeries$i;
allColor.push(colorList[i % colorList.length]);
if (!findObj && ((_props$customSeries$i = props.customSeries[i]) === null || _props$customSeries$i === void 0 ? void 0 : _props$customSeries$i.name) === e.seriesName) {
findObj = props.customSeries[i];
}
}
var color = [];
allColor.forEach(function (t, i) {
var _findObj;
color.push(i !== ((_findObj = findObj) === null || _findObj === void 0 ? void 0 : _findObj.selfIndex) ? hexToRgba(t) : t);
});
option.color = color;
myChart.setOption(option);
});
myChart.on('mouseout', function () {
option.color = allColor;
myChart.setOption(option);
});
};
var handleXAxis = function handleXAxis() {
var _props$customXAxis;
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var xAxis = [];
var defaultXAxisItem = function defaultXAxisItem() {
{
return {
data: xAxisArr.value,
show: props.showXAxis,
boundaryGap: props.xAxisBoundaryGap,
axisTick: {
// 刻度
show: false
},
axisLine: {
lineStyle: {
color: colors.AXISLINE,
type: 'dashed'
}
},
axisLabel: {
show: props.showXAxisLabel,
fontFamily: 'custom-fonts',
interval: props.xLabelInterval,
align: props.xLabelAlign,
showMinLabel: true,
showMaxLabel: true,
fontSize: props.xLabelSize,
lineHeight: 16,
padding: props.xLabelPadding,
formatter: function formatter(value) {
// 是否需要换行
if (props.xLabelWrap) {
return handleXLabel(value);
}
return value;
}
},
splitLine: {
lineStyle: {
color: colors.AXISLINE
}
}
};
}
};
var curXAxis = (_props$customXAxis = props.customXAxis) !== null && _props$customXAxis !== void 0 && _props$customXAxis.length ? props.customXAxis : props.xAxis;
if ((curXAxis === null || curXAxis === void 0 ? void 0 : curXAxis.length) > 0) {
for (var i = 0; i < curXAxis.length; i++) {
var _props$customSeries6, _props$customSeries7;
var defaultItem = defaultXAxisItem();
var shadowParams = (_props$customSeries6 = props.customSeries) !== null && _props$customSeries6 !== void 0 && _props$customSeries6.length ? {
color: colors.POINTER_SHADOW
} : {};
var item = _.cloneDeep(defaultItem);
if ((_props$customSeries7 = props.customSeries) !== null && _props$customSeries7 !== void 0 && _props$customSeries7.length && !i) {
item.axisPointer = {
type: props.tooltipAxisPointerType,
shadowStyle: _objectSpread({}, shadowParams)
};
}
_extends(item, props.xAxis[i]);
xAxis.push(item);
}
return xAxis;
}
return defaultXAxisItem();
};
// Y轴处理
var handleYAxis = function handleYAxis() {
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var yAxis = [];
// 默认yAxis数据
var defaultYAxisItem = function defaultYAxisItem() {
var unit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var
// 单位
pointerNum = arguments.length > 1 ? arguments[1] : undefined;
var
// y 轴小数位
symbol = arguments.length > 2 ? arguments[2] : undefined;
var
// y 轴千分位
isConversion = arguments.length > 3 ? arguments[3] : undefined;
return {
show: props.showYAxis,
axisLabel: {
color: colors.CHART_TICK,
fontFamily: 'custom-fonts',
show: props.showYAxisLabel,
formatter: function formatter(value) {
var val = value;
if (isConversion) {
var conversion = bigNumberUnit({
value: val,
isConversion: true,
decimal: props.yAxisConversionDecimal ? undefined : pointerNum
});
return (conversion === null || conversion === void 0 ? void 0 : conversion.value) + (conversion === null || conversion === void 0 ? void 0 : conversion.unit) + unit;
}
if (!props.showDefaultNum) {
val = numberFormat(value, {
decimal: pointerNum,
t: symbol === 'on'
});
}
return val + unit;
}
},
splitLine: {
show: props.showYAxisSplitLine,
lineStyle: {
type: 'dashed',
color: colors.AXISLINE
}
},
axisLine: {
show: false // y轴线隐藏
},
axisTick: {
show: false // 刻度隐藏
}
};
};
if (props.yAxis.length > 0) {
for (var i = 0; i < props.yAxis.length; i++) {
var unit = typeof props.yAxisUnit !== 'string' ? props.yAxisUnit[i] : props.yAxisUnit;
var pointerNum = props.yAxisPointerNum.length > 0 && typeof props.yAxisPointerNum !== 'number' ? props.yAxisPointerNum[i] : props.yAxisPointerNum;
var symbol = props.yAxisthousandthSign.length > 0 && typeof props.yAxisthousandthSign !== 'string' ? props.yAxisthousandthSign[i] : props.yAxisthousandthSign;
var isConversion = typeof props.isYAxisConversion === 'boolean' ? props.isYAxisConversion : props.isYAxisConversion[i];
var defaultItem = defaultYAxisItem(unit, pointerNum, symbol, isConversion);
var item = _.cloneDeep(defaultItem);
_extends(item, props.yAxis[i]);
yAxis.push(item);
}
return yAxis;
}
return defaultYAxisItem();
};
// 更新数据
var updateData = function updateData() {
var _props$customSeries8, _props$customSeries9;
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var shadowParams = (_props$customSeries8 = props.customSeries) !== null && _props$customSeries8 !== void 0 && _props$customSeries8.length ? {} : {
color: colors.POINTER_SHADOW
};
var option = {
grid: props.grid.length ? props.grid : {
top: props.top,
left: props.left,
right: props.right,
bottom: props.bottom
},
tooltip: {
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: (_props$customSeries9 = props.customSeries) !== null && _props$customSeries9 !== void 0 && _props$customSeries9.length ? 'none' : props.tooltipAxisPointerType,
lineStyle: {
color: colors.POINTER_LINE,
type: props.tooltipAxisPointerLineType
},
shadowStyle: _objectSpread({}, shadowParams),
label: {
show: props.isTooltipLabelShow,
backgroundColor: colors.BAR_TOOLTIP_LABEL_COLOR,
color: '#fff',
padding: 5,
fontWeight: 600,
fontSize: 10,
margin: 5,
formatter: function formatter(e) {
return "".concat(e.value);
}
},
z: 0
}
},
legend: {
data: props.legend,
selected: props.selectedModel
},
xAxis: {
data: xAxisArr.value,
axisLabel: {
interval: props.xLabelInterval,
formatter: function formatter(value) {
// 是否需要换行
if (props.xLabelWrap) {
return handleXLabel(value);
}
return value;
}
}
},
yAxis: handleYAxis(),
series: props.showTotalLabel ? handleSeries() : getSeries()
};
myChart.setOption(option);
handlerResize();
};
// 更新Y轴颜色
var updateYAxisColor = function updateYAxisColor() {
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var defaultYAxis = {
axisLabel: {
color: colors.CHART_TICK
},
splitLine: {
lineStyle: {
color: colors.AXISLINE
}
}
};
var yAxis = [];
if (props.yAxis.length > 0) {
for (var i = 0; i < props.yAxis.length; i++) {
yAxis.push(defaultYAxis);
}
return yAxis;
}
return defaultYAxis;
};
// 更新主题色
var updateColor = function updateColor() {
var _props$customSeries10;
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor);
var yAxis = updateYAxisColor();
var xAxis = handleXAxis();
var shadowParams = (_props$customSeries10 = props.customSeries) !== null && _props$customSeries10 !== void 0 && _props$customSeries10.length ? {} : {
color: colors.POINTER_SHADOW
};
var option = {
color: props.colors.length > 0 ? props.colors : colors.COMMONCOLOR,
legend: {
textStyle: {
color: colors.TEXT
}
},
textStyle: {
color: colors.TEXT
},
tooltip: {
backgroundColor: colors.TOOLTIP_BG,
borderColor: colors.TOOLTIP_BDBGC,
axisPointer: {
lineStyle: {
color: colors.POINTER_LINE
},
shadowStyle: _objectSpread({}, shadowParams)
},
textStyle: {
color: colors.TEXT
},
extraCssText: "box-shadow: ".concat(colors.NEW_TREND_TOOLTIP_SHADOW, ";")
},
xAxis: xAxis,
yAxis: yAxis,
series: props.showTotalLabel ? handleSeries() : getSeries()
};
myChart.setOption(option);
};
// 更新图例
var updateSelected = function updateSelected() {
var option = {
animation: false,
legend: {
selected: props.selectedModel
}
};
myChart.setOption(option);
};
// 点击图例
var onLegendChange = function onLegendChange(t) {
emit('legendChange', t);
};
// 根据 tooltip 的配置项显示提示框
var showTip = function showTip(_ref2) {
var seriesIndex = _ref2.seriesIndex,
dataIndex = _ref2.dataIndex;
myChart.dispatchAction({
type: 'showTip',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
};
// 隐藏 tooltip
var hideTip = function hideTip() {
myChart.dispatchAction({
type: 'hideTip'
});
};
watch(function () {
return [configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode, props.quotationColor];
}, function () {
nextTick(function () {
return updateColor();
});
});
provide(barlineChartContextKey, reactive({
barlineChartElement: mainRef,
wrapElement: wrapRef
}));
onMounted(function () {
var _resizeOb$value;
init();
resizeOb.value = new ResizeObserver(function () {
handlerResize();
});
if (mainRef.value) (_resizeOb$value = resizeOb.value) === null || _resizeOb$value === void 0 ? void 0 : _resizeOb$value.observe(mainRef.value);
});
onUpdated(function () {
var _resizeOb$value2;
(_resizeOb$value2 = resizeOb.value) === null || _resizeOb$value2 === void 0 ? void 0 : _resizeOb$value2.disconnect();
});
expose({
/** @description update data */
updateData: updateData,
/** @description update color */
updateColor: updateColor,
/** @description update selectedModel*/
updateSelected: updateSelected,
/** @description onRisize */
handlerResize: handlerResize,
/** @description echart init */
init: init,
/** @description Display prompt box */
showTip: showTip,
hideTip: hideTip
});
return function () {
var _props$legendList, _props$legend;
var XAXISDOM, LEGENDDOM;
if (props.showCustomX) {
var _props$grid, _props$grid2;
XAXISDOM = _createVNode(XAxis, {
"left": (_props$grid = props.grid) !== null && _props$grid !== void 0 && _props$grid.length ? props.grid[0].left || 0 : props.left,
"right": (_props$grid2 = props.grid) !== null && _props$grid2 !== void 0 && _props$grid2.length ? props.grid[0].right : props.right,
"xLabelList": props.chartData.x,
"is-show-tooltip-axis": props.tooltipAxisPointerType,
"show-custom-x-all": props.showCustomXAll,
"xLabelOverflow": props.xLabelOverflow
}, null);
}
if (props.showCustomLegend && ((_props$legendList = props.legendList) !== null && _props$legendList !== void 0 && _props$legendList.length || (_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length)) {
var _props$legendList2;
LEGENDDOM = _createVNode(Legend, {
"legendList": (_props$legendList2 = props.legendList) !== null && _props$legendList2 !== void 0 && _props$legendList2.length ? props.legendList : props.legend,
"isShowTotal": props.isShowTotal,
"selectedMode": props.selectedMode,
"isLabelRemoveId": props.isLabelRemoveId,
"colors": props.colors,
"scene": props.scene,
"spacing": props.spacing,
"onLegendChange": onLegendChange
}, slots);
}
return _createVNode(Spin, {
"spinning": props.loading
}, {
default: function _default() {
return [_createVNode("div", null, [_createVNode("div", {
"style": "height: ".concat(props.height),
"class": "".concat(prefixCls.value),
"ref": mainRef
}, null), XAXISDOM, LEGENDDOM])];
}
});
};
}
});
export default BarLineChart;