@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" />
237 lines (232 loc) • 7.63 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const dayjs = require('dayjs');
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 clsfix = "dv-aims-air-time-series-analysis";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
dataType: "day",
startTime: dayjs().subtract(6, "d").valueOf(),
endTime: dayjs().valueOf(),
factorCodes: "aqi,a34004,a34002,a21026,a21004,a05024,a21005",
codeType: "grid",
codes: "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: 60,
containLabel: true
},
tooltip: {
trigger: "axis",
padding: 8,
background: "rgba(1, 11, 18, 0.6)",
formatter: (params) => {
const title = params[0] ? params[0].name : "";
const optionSeries = chartsFullOptions.value.options.series;
const strArr = params.map((item) => {
const symbol = optionSeries[item.seriesIndex].symbol;
let markerHtml = `<span class="${clsfix}-circle" style="background-color:${item.color};"></span>`;
if (symbol === "rect")
markerHtml = `<span class="${clsfix}-rect" style="background-color:${item.color};"></span>`;
else if (symbol === "triangle")
markerHtml = `<span class="${clsfix}-triangle" style="border-bottom:10px solid ${item.color};"></span>`;
else if (symbol === "diamond")
markerHtml = `<span class="${clsfix}-diamond" style="border-color:${item.color};"></span>`;
else if (symbol === "roundRect")
markerHtml = `<span class="${clsfix}-roundRect" style="background-color:${item.color};"></span>`;
return `<div>
${markerHtml}
<span style="display: inline-block;width: 40px;">${item.seriesName}</span>
<span style="display: inline-block;text-align: right;width: 40px;">${Number(item.value) > 0 ? `${item.value}` : "--"}</span>
${item.data.unit && item.data.unit !== "--" ? `<span style="display: inline-block;text-align: right;width: 50px;">${item.data.unit}</span>` : ""}
</div>`;
});
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)",
formatter: (value) => formatterTime(value)
},
data: xData
},
yAxis: [
{
type: "value",
name: "μg/m³",
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)"]
}
}
},
{
type: "value",
name: "mg/m³",
nameTextStyle: {
color: "var(--dv-color-text-secondary)",
padding: [0, 0, 0, 30]
},
splitNumber: 3,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: "var(--dv-color-text-secondary)"
},
splitLine: {
show: true,
lineStyle: {
color: ["rgba(255, 255, 255, 0)"]
}
}
}
],
legend: {
show: true,
top: 0,
itemGap: 3,
textStyle: {
color: "var(--dv-color-text-primary)",
fontSize: 12
},
itemWidth: 16,
itemHeight: 8
},
series
}
};
};
const formatterTime = (value) => {
switch (props.apiParams.dataType) {
case "year":
return value;
case "month":
return value;
case "day":
return dayjs(value).format("MM-DD");
case "hour":
return dayjs(value).format("HH");
default:
return "";
}
};
const fetchData = () => {
const colors = [
"#ec7eff",
"#0062FF",
"#0AAEFF",
"#2AC94F",
"#FF792E",
"#F84439",
"#FFB443"
];
const symbols = [
"circle",
"circle",
"circle",
"rect",
"triangle",
"diamond",
"roundRect"
];
index.getTimeAnalyzeData(props.apiParams).then((res) => {
if (res.data && res.data) {
const data = res.data;
const xData = data.times;
const series = data.factorsOrSites.map((item, index) => {
return {
name: item.name,
type: "line",
data: item.values.map((c) => {
return {
value: c,
unit: item.unit
};
}),
color: colors[index],
symbol: symbols[index],
symbolSize: 8,
yAxisIndex: item.key === "CO" ? 1 : 0
};
});
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;