@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" />
220 lines (217 loc) • 7.84 kB
JavaScript
import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, unref } from 'vue';
import { FACTOR_LEVEL_TEXT } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import '../common/BasicEcharts/index.mjs';
import '../common/BasicNoData/index.mjs';
import { getMulAirLevelRate } from './api/index.mjs';
import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
import '../common/BasicEcharts/index.vue2.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';
const clsfix = "dv-aims-mul-grid-air-quality-level-month-ratio";
const noDataColor = "var(--dv-color-text-secondary)";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
time: dayjs().subtract(1, "h").valueOf(),
gridCode: "0100000000",
timeType: "year"
}) }
},
setup(__props) {
const props = __props;
const chartsFullOptions = ref({ options: null });
const generateOption = (xData, series) => {
return {
options: {
grid: {
left: 10,
bottom: 30,
right: 10,
top: 30,
containLabel: true
},
tooltip: {
trigger: "axis",
padding: 8,
background: "rgba(1, 11, 18, 0.6)",
formatter: (params) => {
const title = params[0] ? params[0].name : "";
const strArr = params.map((item) => {
return `<div>
${item.marker}
<span style="display: inline-block;width: 60px;">${item.seriesName}</span>
<span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(item.data.day)) ? "--天" : `${item.data.day}天`}</span>
<span style="display: inline-block;text-align: right;width: 40px;">${typeof item.data.value === "number" ? `${item.data.value}%` : "--%"}</span>
</div>`;
});
const str = strArr.join("");
const data = params[0] ? params[0].data : {};
const str2 = `
<div style="border-top: 1px solid #f2f2f2;margin-top: 12px;padding-top: 12px;padding-left: 20px;">
<span style="display: inline-block;width: 60px;">优良率</span>
<span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.fineCount)) ? "--天" : `${data.fineCount}天`}</span>
<span style="display: inline-block;text-align: right;width: 40px;">${Number.isNaN(Number(data.fineRate)) ? "--%" : `${data.fineRate}%`}</span>
</div>
<div style="padding-left: 20px;">
<span style="display: inline-block;width: 60px;">超标率</span>
<span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.opCount)) ? "--天" : `${data.opCount}天`}</span>
<span style="display: inline-block;text-align: right;width: 40px;">${Number.isNaN(Number(data.opRate)) ? "--%" : `${data.opRate}%`}</span>
</div>
<div style="padding-left: 20px;">
<span style="display: inline-block;width: 60px;">优良率</span>
<span style="display: inline-block;text-align: right;width: 40px;margin-right:10px;">${Number.isNaN(Number(data.heavyPollutionCount)) ? "--天" : `${data.heavyPollutionCount}天`}</span>
</div>
`;
return `<div>
<div>${title}</div>
${str}
${str2}
</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: "%",
nameTextStyle: {
color: "var(--dv-color-text-secondary)",
padding: [0, 30, 0, 0]
},
splitNumber: 3,
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)"
},
splitLine: {
show: true,
lineStyle: {
color: ["var(--dv-color-border-light)"]
}
}
},
legend: {
show: true,
bottom: 0,
itemGap: 4,
textStyle: {
color: "var(--dv-color-text-primary)",
fontSize: 12
},
itemWidth: 12,
itemHeight: 12,
icon: "circle",
itemStyle: {
borderWidth: 0
}
},
series
}
};
};
const list = [
{
name: "优",
value: []
},
{
name: "良",
value: []
},
{
name: "轻度污染",
value: []
},
{
name: "中度污染",
value: []
},
{
name: "重度污染",
value: []
},
{
name: "严重污染",
value: []
}
];
const fetchData = () => {
getMulAirLevelRate(props.apiParams).then((res) => {
if (res.data && res.data.length) {
const data = res.data;
const xData = data.map((c) => c.name);
const newList = list.map((c, index) => {
const values = data.map((item) => {
return {
...item,
value1: item.levelRates[index],
value2: item.levelCounts[index]
};
});
const obj = FACTOR_LEVEL_TEXT.find((i) => c.name.includes(i.label));
return {
name: c.name,
data: values.map((c2) => {
return {
value: c2.value1,
day: c2.value2,
...c2
};
}),
type: "bar",
stack: "x",
color: obj ? obj.color : noDataColor,
barWidth: 15
};
});
chartsFullOptions.value = generateOption(xData, newList);
}
});
};
onMounted(() => {
fetchData();
});
watch(() => props.apiParams, () => {
fetchData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
createElementVNode("div", {
class: normalizeClass(`${clsfix}-echarts`)
}, [
Boolean(chartsFullOptions.value.options) ? (openBlock(), createBlock(unref(_sfc_main$1), {
key: 0,
height: "100%",
"full-options": chartsFullOptions.value,
loading: false
}, null, 8, ["full-options"])) : (openBlock(), createBlock(unref(_BasicNoData), { key: 1 }))
], 2)
], 2);
};
}
});
export { _sfc_main as default };