v3-charts
Version:
> 基于 Vue 封装的 Echarts5 图表组件
1,055 lines (1,054 loc) • 37.3 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, shallowRef, computed, ref, onMounted, watchEffect } from "vue-demi";
import { init } from "echarts";
import { merge } from "lodash";
import ExportJsonExcel from "js-export-excel";
import { useSize } from "ahooks-vue";
import { openBlock, createElementBlock, createElementVNode, resolveComponent, withDirectives, createVNode, vShow } from "vue";
var CHART_TYPE;
(function(CHART_TYPE2) {
CHART_TYPE2["line"] = "line";
CHART_TYPE2["bar"] = "bar";
CHART_TYPE2["pie"] = "pie";
CHART_TYPE2["histogram"] = "histogram";
})(CHART_TYPE || (CHART_TYPE = {}));
var ExportPng = "data:image/png;base64,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";
var ImagePng = "data:image/png;base64,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";
const labelColor = "#B3C0CC";
const axisColor = "rgba(0, 0, 0, 0.03)";
const color = [
"#407CFF",
"#21D39B",
"#F9697A",
"#9587F1",
"#83D587",
"#FFCD31"
];
const title = {
top: 12,
left: 12,
text: "\u8D1F\u5411\u8BA1\u6570\u8D8B\u52BF\u56FE",
textStyle: {
color: "#071238",
fontSize: 14,
fontWeight: "bold"
}
};
const toolbox = {
show: true,
right: 8,
top: 9,
itemSize: 16,
feature: {
saveAsImage: {
title: "\u5BFC\u51FA\u56FE\u7247",
icon: `image://${ImagePng}`,
iconStyle: {
color: `rgba(192, 196, 204, 1)`
},
emphasis: {
iconStyle: {
color: "#407cff"
}
}
},
mySaveAsExcel: {
show: true,
title: "\u5BFC\u51FA\u8868\u683C",
icon: `image://${ExportPng}`,
onclick: function({ option }) {
var _a;
const data = option.dataset[0].source;
const keys = Object.keys(data[0]);
const title2 = (_a = option.title[0]) == null ? void 0 : _a.text;
const options = {
fileName: title2 || "\u6570\u636E",
datas: [
{
sheetData: data,
sheetName: "sheet1",
sheetFilter: keys,
sheetHeader: keys,
columnWidths: keys.map(() => 12)
}
]
};
const toExcel = new ExportJsonExcel(options);
toExcel.saveExcel();
},
iconStyle: {
color: `rgba(192, 196, 204, 1)`
},
emphasis: {
iconStyle: {
color: "#407cff"
}
}
}
}
};
function getValue$1(series2) {
return series2.value[series2.seriesName];
}
const tooltip$2 = {
trigger: "axis",
axisPointer: {
type: "shadow",
shadowStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(150,150,150,0.3)"
},
{
offset: 1,
color: "rgba(150,150,150,0.3)"
}
]
}
}
},
textStyle: {
align: "left"
},
appendToBody: true,
formatter: (params) => {
params = [params].flat();
if (params.length === 1) {
params = params[0];
return `${params.name}<br/>${params.marker}${params.seriesName}
<span style="font-weight: 600; margin-left: 10px;">${getValue$1(params)}</span>`;
}
const str = [params[0].name];
let maxValue = 0;
for (const i of params) {
i.value && getValue$1(i) && maxValue < getValue$1(i) && (maxValue = getValue$1(i));
}
const lines = params.filter((i) => getValue$1(i) !== void 0).sort((a, b) => getValue$1(b) - getValue$1(a)).map((i) => {
const width = getValue$1(i) / maxValue * 100;
const name = `<span style='display:inline-block; font-size: 12px; line-height: 12px; color: #666; width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;'>${i.seriesName}</span>`;
const line = `<span style='display:inline-block; font-size: 12px; margin-right:5px; line-height: 12px; border-radius:2px;width:${width}px;height:8px;background-color:${i.color};'></span>`;
const value = `<span style='font-size:12px;'>${getValue$1(i) || 0}</span>`;
return `${i.marker}${name}: ${line} ${value}`;
}).filter(Boolean);
str.push(...lines.length > 10 ? [...lines.slice(0, 10), "..."] : lines);
return str.join("<br/>");
}
};
const grid$1 = {
top: 88,
left: 28,
right: 36,
bottom: 12,
containLabel: true
};
const legend$1 = {
type: "scroll",
icon: "rect",
left: 16,
top: 42,
itemWidth: 9,
itemHeight: 9,
itemGap: 16,
pageIconSize: 12,
textStyle: {
color: "#777",
padding: [3, 0, 0, 0]
}
};
const xAxis$2 = {
type: "category",
boundaryGap: false,
z: 1,
axisLine: {
lineStyle: {
color: axisColor
}
},
axisTick: {
show: true,
inside: false,
lineStyle: {
color: "rgba(0, 0, 0, 0.5)"
}
},
axisLabel: {
show: true,
color: labelColor,
fontSize: "12",
margin: 16
},
splitLine: {
show: false,
interval: 2,
lineStyle: {
color: "rgba(0, 0, 0, 0.03)"
}
}
};
const yAxis$1 = {
type: "value",
offset: 8,
axisLine: {
show: false,
lineStyle: {
color: labelColor
}
},
axisLabel: {
show: true,
color: labelColor,
fontSize: "12"
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: `rgba(0, 0, 0, 0.3)`
}
},
splitLine: {
show: true,
lineStyle: {
type: "solid",
color: "rgba(0, 0, 0, 0.04)"
}
},
scale: true,
splitNumber: 3
};
const series$2 = {
type: "line",
label: {
show: true
},
symbol: "circle"
};
const axisPointer = {
lineStyle: {},
shadowStyle: {
color: "rgba(0, 0, 0, 1)"
}
};
const COMMON_OPTIONS = {
color,
title,
tooltip: tooltip$2,
grid: grid$1,
toolbox,
legend: legend$1,
xAxis: xAxis$2,
yAxis: yAxis$1,
series: series$2,
axisPointer
};
const COMMON_SERIES = {
markLine: {
silent: true,
symbol: "none",
data: [],
lineStyle: {
color: "#E75E67",
width: 1,
type: "dotted"
},
label: {
show: true,
formatter: "{b}",
position: "insideStartTop",
distance: [0, 4]
},
animation: false
},
markPoint: {
symbol: "circle",
symbolSize: 8,
itemStyle: {
color: "rgba(0,0,0, 0)",
borderColor: "#F9697A",
borderWidth: 3
},
label: {
show: false,
formatter: (params) => {
var _a;
return `${(_a = params.data.coord[2]) != null ? _a : ""}${params.data.coord[1]}`;
},
position: "top",
color: "#E75E67",
distance: 4
}
}
};
function tramsformMarkLine(markLines) {
return markLines.map((i) => __spreadProps(__spreadValues({}, i), {
xAxis: i.yAxis,
yAxis: null
}));
}
const getSeriesIndex = (i) => {
const seriesIndex = (Array.isArray(i) ? i[0].seriesIndex : i.seriesIndex) || 0;
return seriesIndex;
};
function copySeriesByColumns(data, mergedOptions, type) {
var _a;
if (!data) {
return [{ type }];
}
const series2 = (_a = data.columns) == null ? void 0 : _a.slice(1).map((i, index) => {
var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
return __spreadProps(__spreadValues({}, mergedOptions.series), {
type,
markLine: __spreadProps(__spreadValues({}, (_b = (_a2 = mergedOptions.series) == null ? void 0 : _a2.markLine) != null ? _b : {}), {
data: (_e = (_d = (_c = mergedOptions.series) == null ? void 0 : _c.markLine) == null ? void 0 : _d.data) == null ? void 0 : _e.filter((i2) => getSeriesIndex(i2) === index)
}),
markPoint: __spreadProps(__spreadValues({}, (_g = (_f = mergedOptions.series) == null ? void 0 : _f.markPoint) != null ? _g : {}), {
data: (_j = (_i = (_h = mergedOptions.series) == null ? void 0 : _h.markPoint) == null ? void 0 : _i.data) == null ? void 0 : _j.filter((i2) => getSeriesIndex(i2) === index)
})
});
});
return series2;
}
function handleLineStyle(options) {
[options.series].flat().forEach((series2, index) => {
const color2 = options.color[index % options.color.length];
series2.lineStyle = __spreadValues({
shadowColor: transformColor(color2, 0.4)
}, series2.lineStyle);
});
}
function handleAreaStyle(options) {
[options.series].flat().forEach((series2, index) => {
if (index === 0) {
const color2 = options.color[index % options.color.length];
series2.areaStyle = __spreadValues({
color: linearColor(color2, color2, "column", 0.08, 0.01),
opacity: 1
}, series2.areaStyle);
}
});
}
function transformColor(color2, g = 0.15) {
const [, a, b, c] = color2.match(/#(\w{2})(\w{2})(\w{2})/) || [];
return `rgba(${+`0x${a}`},${+`0x${b}`},${+`0x${c}`},${g})`;
}
function linearColor(start, end, direction = "row", endOpacity = 1, startOpacity = 0.5) {
start = transformColor(start, startOpacity);
end = transformColor(end || start, endOpacity);
const xy = direction === "row" ? {
x: 1,
y: 1,
x2: 0,
y2: 0
} : {
x: 0,
y: 1,
x2: 0,
y2: 0
};
return __spreadProps(__spreadValues({
type: "linear"
}, xy), {
colorStops: [
{
offset: 0,
color: start
},
{
offset: 1,
color: end
}
]
});
}
const LINE_OPTIONS = {
axisPointer: {
type: "line"
},
series: __spreadProps(__spreadValues({}, COMMON_SERIES), {
type: "line",
label: {
show: true,
offset: [0, -2],
fontSize: 10
},
smooth: true,
lineStyle: {
width: 2,
shadowBlur: 8
},
symbol: "circle",
emphasis: {
lineStyle: {
width: 2,
shadowBlur: 10
},
symbolSize: 10
},
symbolSize: 5
})
};
function computeMarks(data, mark) {
var _a;
if (!((_a = data == null ? void 0 : data.rows) == null ? void 0 : _a.length)) {
return [];
}
const marks = mark.map((m) => {
var _a2, _b;
return [
{
seriesIndex: m.seriesIndex || 0,
symbol: "none",
lineStyle: {
color: "rgba(0,0,0, 0.2)"
},
label: {
position: (_a2 = m.position) != null ? _a2 : "end",
width: m.width,
overflow: "break",
align: (_b = m.align) != null ? _b : "right",
lineHeight: 20,
distance: [10, 0],
formatter: m.text
},
xAxis: m.xAxis,
yAxis: m.yAxis
},
{
symbol: "none",
xAxis: m.xAxis,
yAxis: m.y2Axis,
y: m.y2Axis ? void 0 : "40%"
}
];
});
return marks;
}
function getValue(series2) {
return series2.value[series2.seriesName];
}
function getLineOptions(data, {
unit,
propOptions,
limit,
sumSort,
limitLine,
markLine,
marks,
autoSmooth,
showMarkText
}) {
var _a, _b, _c, _d;
const markTips = showMarkText ? computeMarks(data, marks) : [];
const computedOptions = merge({}, LINE_OPTIONS, {
yAxis: {
axisLabel: {
formatter: (v) => `${v}${unit ? " " + unit : ""}`
}
},
series: {
smooth: autoSmooth ? Boolean((((_a = data == null ? void 0 : data.rows) == null ? void 0 : _a.length) || 0) > 15) : void 0,
label: {
fontSize: 12,
formatter: (params) => {
const v = params.data[params.seriesName] || "";
return `${v}${v && unit ? " " + unit : ""}`;
}
},
markLine: {
data: [...markLine, ...markTips]
},
markPoint: {
data: marks == null ? void 0 : marks.map((i) => ({
xAxis: i.xAxis,
yAxis: i.yAxis,
seriesIndex: i.seriesIndex
}))
}
}
}, propOptions);
let columns = (_b = data == null ? void 0 : data.columns) != null ? _b : [];
if (sumSort && (data == null ? void 0 : data.columns)) {
const dimensions = data.columns.slice(1);
const sumsMap = (_c = dimensions.map((key) => ({
key,
sum: data.rows.reduce((count, i) => {
var _a2;
return +(count || 0) + ((_a2 = i[key]) != null ? _a2 : 0);
})
})).reduce((map, i) => {
map[i.key] = i.sum;
return map;
}, {})) != null ? _c : {};
dimensions.sort((a, b) => sumsMap[a] > sumsMap[b] ? -1 : 1);
columns = [data.columns[0], ...dimensions];
}
let legend2 = {};
if (((_d = data == null ? void 0 : data.rows) == null ? void 0 : _d.length) && limit && columns.length - 1 > limit) {
legend2 = {
selected: columns.slice(1).reduce((map, i) => {
map[i] = true;
return map;
}, {})
};
for (const key of columns.slice(limit + 1)) {
legend2.selected[key] = false;
}
}
const finnalOptions = merge({}, COMMON_OPTIONS, computedOptions, {
legend: legend2,
dataset: {
dimensions: columns,
source: data == null ? void 0 : data.rows
},
tooltip: {
formatter(params) {
var _a2;
params = [params].flat();
const thisAxisMark = marks == null ? void 0 : marks.filter((i) => i.xAxis === params[0].axisValue);
const thisAxisMarkText = (_a2 = thisAxisMark == null ? void 0 : thisAxisMark.map((i) => `<span style="font-size: 12px; color: #999;">${i.text}</span>`).join("<br/>")) != null ? _a2 : "";
if (params.length === 1) {
params = params[0];
return `${params.name}<br/>${thisAxisMarkText ? thisAxisMarkText + "<br/>" : ""}${params.marker}${params.seriesName}
<span style="font-weight: 600; margin-left: 10px;">${getValue(params)}</span>`;
}
const str = [params[0].name];
thisAxisMarkText && str.push(thisAxisMarkText);
let maxValue = 0;
for (const i of params) {
i.value && getValue(i) && maxValue < getValue(i) && (maxValue = getValue(i));
}
const lines = params.filter((i) => getValue(i) !== void 0).sort((a, b) => getValue(b) - getValue(a)).map((i) => {
const width = getValue(i) / maxValue * 100;
const name = `${i.seriesName}`;
const line = `<span style='display:inline-block;margin-right:5px; line-height: 12px; border-radius:2px;width:${width}px;height:8px;background-color:${i.color};'></span>`;
const value = `<span style='font-size:12px;'>${getValue(i) || 0}</span>`;
return [`${i.marker}${name}`, `${line} ${value}`];
}).filter(Boolean);
const showEllipsis = lines.length > 10;
const htmlContent = `<div style="display: flex;font-size: 12px; color: #666;">
<div style="margin-right: 12px;">
${lines.slice(0, 10).map(([left]) => `<div style="height: 22px; max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">${left}</div>`).join("")}
</div>
<div>
${lines.slice(0, 10).map(([, right]) => `<div style="height: 22px;">${right}</div>`).join("")}
</div>
</div>`;
str.push(htmlContent);
showEllipsis && str.push("...");
return str.join("<br/>");
}
},
series: copySeriesByColumns(data, computedOptions, CHART_TYPE.line)
});
if (limitLine) {
finnalOptions.series = finnalOptions.series.slice(0, limitLine);
}
handleLineStyle(finnalOptions);
handleAreaStyle(finnalOptions);
return finnalOptions;
}
const tooltip$1 = {
formatter: null,
confine: true
};
const barMaxWidth$1 = 20;
const activeColor = "#21D39B";
const xAxis$1 = {
type: "value",
axisTick: {
show: true,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: `rgba(0, 0, 0, 0.1)`
}
},
splitLine: {
show: true
}
};
const yAxis = {
type: "category",
boundaryGap: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter(text) {
let str = text;
if (str.length > 12) {
str = str.substr(0, 10) + "...";
}
return `${str}`;
}
},
z: 10
};
const label$1 = {
show: true,
position: "right"
};
const series$1 = __spreadProps(__spreadValues({}, COMMON_SERIES), {
type: "bar",
itemStyle: {
borderRadius: [0, 2, 2, 0],
label: {
show: true,
position: "right"
}
},
emphasis: {
itemStyle: {
borderWidth: 0
},
label: {
formatter(params) {
return `${params.value[params.seriesName]} \u221A`;
}
}
},
select: {
label: {
color: activeColor,
formatter(params) {
return `${params.value[params.seriesName]} \u221A`;
}
},
itemStyle: {
color: activeColor,
borderWidth: 0
}
}
});
const legend = {
show: false
};
const grid = {
top: 48,
right: 54
};
const BAR_OPTIONS = {
label: label$1,
tooltip: tooltip$1,
barMaxWidth: barMaxWidth$1,
xAxis: xAxis$1,
yAxis,
series: series$1,
legend,
grid
};
function getBarOptions(data, { unit, propOptions, limit, markLine, sort, selectedMode }) {
var _a, _b, _c, _d;
const mergedOptions = merge({}, BAR_OPTIONS, {
xAxis: {
axisLabel: {
formatter: (v) => `${v}${unit ? " " + unit : ""}`
}
},
series: {
markLine: {
data: tramsformMarkLine(markLine),
label: {
position: "end",
distance: [4, 0]
}
},
selectedMode
}
}, propOptions);
const dataset = {
dimensions: data == null ? void 0 : data.columns,
source: data == null ? void 0 : data.rows
};
if ((data == null ? void 0 : data.columns) && sort) {
(_a = dataset.source) == null ? void 0 : _a.sort((a, b) => {
return a[data.columns[1]] - b[data.columns[1]];
});
}
if (limit) {
if (!sort) {
dataset.source = [...(_c = (_b = dataset.source) == null ? void 0 : _b.slice(0, limit)) != null ? _c : []].reverse();
} else {
dataset.source = (_d = dataset.source) == null ? void 0 : _d.slice(-limit);
}
}
const finnalOptions = merge({}, COMMON_OPTIONS, __spreadProps(__spreadValues({}, mergedOptions), {
dataset,
series: copySeriesByColumns(data, mergedOptions, CHART_TYPE.bar)
}));
return finnalOptions;
}
const PIE_OPTIONS = {
legend: {
show: true,
orient: "vertical",
top: "middle",
left: "70%",
itemGap: 16,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "#777",
fontSize: 12,
lineHeight: 10,
overflow: "truncate",
width: 100,
padding: [30, 0, 0, 0]
},
pageIconSize: 12,
padding: [
64,
5,
10,
5
]
},
xAxis: {
axisLine: {
show: false
}
},
series: {
type: "pie",
center: ["35%", "50%"],
radius: ["40%", "70%"],
label: {
formatter: `{d}%`
},
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2
}
},
tooltip: {
show: true,
trigger: "item",
formatter: (params) => {
function getValue2(series2) {
return series2.value[series2.dimensionNames[1]];
}
return `${params.marker} <span style='font-size:14px; color: ${params.color}'>${params.name}</span> <br/>
<span style='font-size:10px; margin-right: 4px;'>\u503C:</span>
<span style='font-size:12px; color: #666;'>${getValue2(params)}</span> <br/>
<span style='font-size:10px; margin-right: 4px;'>\u767E\u5206\u6BD4:</span>
<span style='font-size:12px; color: #666;'>${params.percent}%</span>`;
}
}
};
function getPieOptions(data, { propOptions, limit, sort, selectedMode }) {
var _a;
const mergedOptions = merge({}, PIE_OPTIONS, {
series: {
selectedMode
}
}, propOptions);
if ((data == null ? void 0 : data.columns) && sort) {
(_a = data.rows) == null ? void 0 : _a.sort((a, b) => {
return b[data.columns[1]] - a[data.columns[1]];
});
}
if ((data == null ? void 0 : data.rows.length) && limit && data.rows.length > limit) {
const limitedRows = [
...data.rows.slice(0, limit),
{
[data.columns[0]]: "\u5176\u5B83",
[data.columns[1]]: data.rows.slice(limit).reduce((count, i) => {
var _a2;
return count + i[(_a2 = data == null ? void 0 : data.columns[1]) != null ? _a2 : ""];
}, 0)
}
];
data = {
columns: data.columns,
rows: limitedRows
};
}
const finnalOptions = merge({}, COMMON_OPTIONS, __spreadProps(__spreadValues({}, mergedOptions), {
dataset: {
dimensions: data == null ? void 0 : data.columns,
source: data == null ? void 0 : data.rows
},
series: copySeriesByColumns(data, mergedOptions, CHART_TYPE.pie)
}));
return finnalOptions;
}
const label = {
show: true,
position: "top"
};
const tooltip = {
formatter(params) {
params = [params].flat();
const str = [params[0].name];
let maxValue = 0;
function getValue2(series2) {
return series2.value[series2.seriesName];
}
for (const i of params) {
maxValue < getValue2(i) && (maxValue = getValue2(i));
}
const lines = params.sort((a, b) => getValue2(b) - getValue2(a)).map((i) => {
const width = getValue2(i) / maxValue * 100;
const name = `<span style='display:inline-block; font-size: 12px; line-height: 12px; color: #666; width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;'>${i.seriesName}</span>`;
const line = `<span style='display:inline-block; font-size: 12px; margin-right:5px; line-height: 12px; border-radius:2px;width:${width}px;height:8px;background-color:${i.color};'></span>`;
const value = `<span style='font-size:12px;'>${getValue2(i) || 0}</span>`;
return `${i.marker}${name}: ${line} ${value}`;
}).filter(Boolean);
str.push(...lines.length > 10 ? [...lines.slice(0, 10), "..."] : lines);
return str.join("<br/>");
}
};
const barMaxWidth = 32;
const xAxis = {
boundaryGap: true,
axisTick: {
alignWithLabel: true,
lineStyle: {
color: `rgba(0, 0, 0, 0.3)`
}
},
axisLine: {
lineStyle: {
color: `rgba(0, 0, 0, 0.1)`
}
}
};
const series = __spreadProps(__spreadValues({}, COMMON_SERIES), {
type: "bar"
});
const HISTOGRAM_OPTIONS = {
label,
tooltip,
barMaxWidth,
xAxis,
series
};
function getHistogramOptions(data, { unit, propOptions, markLine }) {
const mergedOptions = merge({}, HISTOGRAM_OPTIONS, {
yAxis: {
axisLabel: {
formatter: (v) => `${v}${unit ? " " + unit : ""}`
}
},
series: {
markLine: {
data: markLine
}
}
}, propOptions);
const finnalOptions = merge({}, COMMON_OPTIONS, __spreadProps(__spreadValues({}, mergedOptions), {
dataset: {
dimensions: data == null ? void 0 : data.columns,
source: data == null ? void 0 : data.rows
},
series: copySeriesByColumns(data, mergedOptions, CHART_TYPE.bar)
}));
return finnalOptions;
}
const SPECTAIL_OPTIONS = {
line: getLineOptions,
bar: getBarOptions,
pie: getPieOptions,
histogram: getHistogramOptions
};
function getOptionsByType(data, configs) {
var _a;
const fn = (_a = SPECTAIL_OPTIONS[configs.type]) != null ? _a : () => COMMON_OPTIONS;
const mergedOptions = fn(data, configs);
return Object.freeze(mergedOptions);
}
var DataEmpty_vue_vue_type_style_index_0_lang = "";
const _sfc_main$2 = {};
const _hoisted_1$2 = { class: "v-charts-data-empty" };
function _sfc_render$2(_ctx, _cache) {
return openBlock(), createElementBlock("div", _hoisted_1$2, "\u6682\u65E0\u6570\u636E");
}
_sfc_main$2.render = _sfc_render$2;
var Loading_vue_vue_type_style_index_0_lang = "";
const _sfc_main$1 = {};
const _hoisted_1$1 = { class: "v-charts-component-loading" };
const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("div", { class: "loader" }, [
/* @__PURE__ */ createElementVNode("div", { class: "loading-spinner" }, [
/* @__PURE__ */ createElementVNode("svg", {
class: "circular",
viewBox: "25 25 50 50"
}, [
/* @__PURE__ */ createElementVNode("circle", {
class: "path",
cx: "50",
cy: "50",
r: "20",
fill: "none"
})
])
])
], -1);
const _hoisted_3 = [
_hoisted_2$1
];
function _sfc_render$1(_ctx, _cache) {
return openBlock(), createElementBlock("div", _hoisted_1$1, _hoisted_3);
}
_sfc_main$1.render = _sfc_render$1;
var _sfc_main = defineComponent({
name: "VChart",
props: {
data: Object,
options: Object,
type: { type: String, default: "line" },
loading: { type: Boolean, default: false },
unit: String,
limit: { type: Number, default: 0 },
sumSort: { type: Boolean, default: false },
limitLine: { type: Number, default: 0 },
markLine: { type: Array, default: () => [] },
markLines: { type: Array },
marks: { type: Array, default: () => [] },
showMarkText: { type: Boolean, default: false },
sort: { type: Boolean, default: true },
selectedMode: {
type: [Boolean, String],
default: false
},
defaultSelectNum: { type: Number, default: 3 },
autoSmooth: { type: Boolean, default: true }
},
components: {
DataEmpty: _sfc_main$2,
Loading: _sfc_main$1
},
emits: ["click", "select"],
setup(props, { emit }) {
const data = shallowRef(computed(() => props.data));
const isDataEmpty = computed(() => {
var _a, _b;
return Boolean(!((_b = (_a = data.value) == null ? void 0 : _a.rows) == null ? void 0 : _b.length));
});
const chartRef = ref(null);
const ContainerRef = ref(null);
const instance = { value: null };
function resize() {
var _a;
(_a = instance.value) == null ? void 0 : _a.resize();
}
onMounted(() => {
instance.value = init(chartRef.value);
let chartOptions = null;
watchEffect(() => {
var _a, _b, _c, _d;
chartOptions = getOptionsByType(data.value, {
type: (_a = props.type) != null ? _a : CHART_TYPE.line,
unit: props.unit,
limit: props.limit,
sumSort: props.sumSort,
limitLine: props.limitLine,
propOptions: props.options,
markLine: (_b = props.markLines) != null ? _b : props.markLine,
marks: props.marks,
showMarkText: props.showMarkText,
sort: props.sort,
selectedMode: props.selectedMode,
defaultSelectNum: props.defaultSelectNum,
autoSmooth: props.autoSmooth
});
if ((_c = data.value) == null ? void 0 : _c.rows) {
(_d = instance.value) == null ? void 0 : _d.setOption(chartOptions, {
notMerge: true
});
}
});
useSize(ContainerRef, {
onChange() {
resize();
}
});
instance.value.on("click", (params) => {
emit("click", params);
});
instance.value.on("selectchanged", ({ selected }) => {
const selectedValues = selected.length ? selected[0].dataIndex.map((index) => {
const dimension = chartOptions.dataset.dimensions[0];
return chartOptions.dataset.source[index][dimension];
}) : [];
console.log(selectedValues);
emit("select", selectedValues);
});
instance.value.on("mouseover", (params) => {
var _a;
console.log(params);
if (params.componentType === "markPoint") {
(_a = instance.value) == null ? void 0 : _a.dispatchAction({
type: "showTip",
seriesIndex: params.dataIndex
});
}
});
});
return {
chartRef,
ContainerRef,
isDataEmpty,
resize,
instance
};
}
});
var Chart_vue_vue_type_style_index_0_scoped_true_lang = "";
const _hoisted_1 = {
style: { "min-height": "100px", "position": "relative" },
ref: "ContainerRef"
};
const _hoisted_2 = {
ref: "chartRef",
style: { "height": "100%" }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DataEmpty = resolveComponent("DataEmpty");
const _component_Loading = resolveComponent("Loading");
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, null, 512),
withDirectives(createVNode(_component_DataEmpty, null, null, 512), [
[vShow, _ctx.isDataEmpty && !_ctx.loading]
]),
withDirectives(createVNode(_component_Loading, null, null, 512), [
[vShow, _ctx.loading]
])
], 512);
}
_sfc_main.render = _sfc_render;
_sfc_main.__scopeId = "data-v-0ffcffc3";
export { _sfc_main as VChart };