@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" />
234 lines (231 loc) • 8.44 kB
JavaScript
import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref } from 'vue';
import dayjs from 'dayjs';
import { factorKeyTransform } from 'fpi-tg-factor-tools';
import '../common/BasicEcharts/index.mjs';
import { getTbHbData } from './api/index.mjs';
import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
import '../common/BasicEcharts/index.vue2.mjs';
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__ */ 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 = 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 factorKeyTransform(props.apiParams.factorCode, "name");
};
const getUnit = () => {
return factorKeyTransform(props.apiParams.factorCode, "unit");
};
const fetchData = () => {
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);
}
});
};
onMounted(() => {
fetchData();
});
watch(() => props.apiParams, () => {
fetchData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
createElementVNode("div", {
class: normalizeClass(`${clsfix}-echarts`)
}, [
createVNode(unref(_sfc_main$1), {
height: "100%",
"full-options": chartsFullOptions.value,
loading: false
}, null, 8, ["full-options"])
], 2)
], 2);
};
}
});
export { _sfc_main as default };