@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
238 lines (233 loc) • 8.6 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const dayjs = require('dayjs');
const fpiTgFactorTools = require('fpi-tg-factor-tools');
require('../common/BasicEcharts/index.js');
const index = require('./api/index.js');
const index_vue_vue_type_script_setup_true_lang = require('../common/BasicEcharts/index.vue.js');
require('../common/BasicEcharts/index.vue2.js');
const upSvg = `<i style='width: 14px;font-size: 14px;display: inline-block;'>
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="red" d="M572.235 205.282v600.365a30.118 30.118 0 1 1-60.235 0V205.282L292.382 438.633a28.913 28.913 0 0 1-42.646 0 33.43 33.43 0 0 1 0-45.236l271.058-288.045a28.913 28.913 0 0 1 42.647 0L834.5 393.397a33.43 33.43 0 0 1 0 45.176 28.913 28.913 0 0 1-42.647 0l-219.618-233.23z"></path></svg>
</i>`;
const downSvg = `<i style='width: 14px;font-size: 14px;display: inline-block;'>
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="green" d="M544 805.888V168a32 32 0 1 0-64 0v637.888L246.656 557.952a30.72 30.72 0 0 0-45.312 0 35.52 35.52 0 0 0 0 48.064l288 306.048a30.72 30.72 0 0 0 45.312 0l288-306.048a35.52 35.52 0 0 0 0-48 30.72 30.72 0 0 0-45.312 0L544 805.824z"></path></svg>
</i>`;
const clsfix = "dv-aims-tb-hb-analysis";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
dataType: "month",
startTime: dayjs().subtract(11, "M").valueOf(),
endTime: dayjs().valueOf(),
factorCode: "cieq",
codeType: "grid",
code: "0101000000"
}) }
},
setup(__props) {
const props = __props;
const chartsFullOptions = vue.ref({ options: null });
const generateOption = (xData, series) => {
return {
options: {
grid: {
left: 20,
bottom: 10,
right: 20,
top: 40,
containLabel: true
},
tooltip: {
trigger: "axis",
padding: 8,
background: "rgba(1, 11, 18, 0.6)",
formatter: (params) => {
const title = getTootipName();
const strArr = params.map((item) => {
let str1 = `<div>
${item.marker}
<span style="display: inline-block;width: 100px;">${item.data.leftTitle}</span>
<span style="display: inline-block;text-align: right;width: 60px;">${item.value}${item.data.unit !== "--" && item.unit ? item.unit : ""}</span>
</div>`;
if (item.data.type !== "current") {
str1 += `
<div>
${item.marker}
<span style="display: inline-block;width: 100px;">${item.data.leftTitle2}</span>
<span style="display: inline-flex;align-items: center;justify-content: flex-end;width: 60px;">
${item.data.leftTitle2Value}
</span>
${item.data.upOrDown}
</div>
`;
}
return str1;
});
const str = strArr.join("");
return `<div>
<div>${title}</div>
${str}
</div>`;
}
},
xAxis: {
type: "category",
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: "var(--dv-color-text-primary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
},
data: xData
},
yAxis: {
type: "value",
name: getUnit(),
nameTextStyle: {
color: "var(--dv-color-text-secondary)",
padding: [0, 30, 0, 0]
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
},
splitNumber: 3,
splitLine: {
show: true,
lineStyle: {
color: ["var(--dv-color-border-light)"]
}
}
},
legend: {
show: true,
top: 0,
itemGap: 3,
textStyle: {
color: "var(--dv-color-text-primary)",
fontSize: 12
},
itemWidth: 16,
itemHeight: 8
},
series
}
};
};
const getTootipName = () => {
if (props.apiParams.factorCode === "cieq")
return "综合指数";
else
return fpiTgFactorTools.factorKeyTransform(props.apiParams.factorCode, "name");
};
const getUnit = () => {
return fpiTgFactorTools.factorKeyTransform(props.apiParams.factorCode, "unit");
};
const fetchData = () => {
index.getTbHbData(props.apiParams).then((res) => {
if (res.data && res.data) {
const data = res.data;
const xData = data.times.map(
(time) => ["quarter", "month", "week", "day"].includes(props.apiParams.dataType) ? time.slice(5) : ["hour"].includes(props.apiParams.dataType) ? time.slice(-2) : time
);
const list = [
{
name: "本期",
id: "current",
color: "#409eff",
key1: "currentPeriodValue",
key3: "times"
},
{
name: "上期",
id: "last",
color: "#fb9905",
key1: "lastPeriodValue",
key2: "lastPeriodRatio",
key3: "lastTimes"
},
{
name: "同期",
id: "same",
color: "#fb6868",
key1: "samePeriodValue",
key2: "samePeriodRatio",
key3: "sameTimes"
}
];
const series = list.map((item) => {
const values = data[item.key1];
const radios = data[item.key2];
const times = data[item.key3];
return {
name: item.name,
type: "line",
data: values.map((c, index) => {
const radioV = radios ? Number(radios[index]) : NaN;
let upOrDown = "";
if (!Number.isNaN(radioV)) {
if (radioV > 0)
upOrDown = upSvg;
else if (radioV < 0)
upOrDown = downSvg;
else
upOrDown = "";
}
return {
value: c,
type: item.id,
unit: data.unit,
leftTitle: `${item.name} ${times[index]}`,
leftTitle2: item.id === "same" ? "同比变化率" : item.id === "last" ? "环比变化率" : "",
leftTitle2Value: Number.isNaN(radioV) ? "--" : `${Math.abs(radioV)}%`,
upOrDown
};
}),
itemStyle: {
color: item.color
}
};
});
chartsFullOptions.value = generateOption(xData, series);
}
});
};
vue.onMounted(() => {
fetchData();
});
vue.watch(() => props.apiParams, () => {
fetchData();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${clsfix}-echarts`)
}, [
vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang.default), {
height: "100%",
"full-options": chartsFullOptions.value,
loading: false
}, null, 8, ["full-options"])
], 2)
], 2);
};
}
});
exports.default = _sfc_main;