@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" />
236 lines (233 loc) • 6.99 kB
JavaScript
import { defineComponent, ref, toRefs, watch, nextTick, openBlock, createElementBlock, createElementVNode, createVNode, unref } from 'vue';
import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
import { getTrendComparisonData } from './api/index.mjs';
const _hoisted_1 = { class: "dv-wgms-factor-trend-comparison" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "DvWgmsFactorTrendComparison",
title: "要素趋势对比"
},
__name: "index",
props: {
height: { default: "200px" },
params: { default: () => {
return {
beginTime: 1694016e6,
endTime: 1694620799999,
factor: "64",
siteCode: "YYALGAE024",
siteId: "2399",
stationCode: "1",
timeType: "day"
};
} },
data: { default: null }
},
setup(__props, { expose: __expose }) {
const props = __props;
const option = ref(void 0);
const state = {
factorMap: [],
seriesData: [],
chartRef: null
// 图表实例
};
const { chartRef } = toRefs(state);
watch([() => props.params, () => props.data, () => props.isLazy], async () => {
await nextTick(() => {
!props.isLazy && initChart();
});
}, { deep: true, immediate: true });
const getChartData = async () => {
return await getTrendComparisonData(props.params);
};
const initChart = async () => {
let xData = [];
let data = [];
if (!props.data) {
const res = await getChartData();
data = res?.data || [];
} else {
data = props.data || [];
}
data.forEach((item) => {
const timesList = item.factorTimeDataList.map((item2) => item2.time);
const valueList = item.factorTimeDataList.map((item2) => item2.value);
xData = timesList.map((item2) => item2);
const obj = {
name: item.factorName,
type: "line",
symbolSize: 0,
yAxisIndex: item.factorCode === "w01016" ? 1 : item.factorCode === "w01010" ? 2 : 0,
data: valueList.map((item2) => item2 ?? null)
};
state.seriesData.push(obj);
});
await nextTick(async () => {
option.value = getChartOptions(xData, state.seriesData);
});
};
const getChartOptions = (xData, seriesData) => {
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "line"
// 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
show: true,
type: "scroll",
itemWidth: 12,
itemHeight: 12,
icon: "circle",
bottom: 10,
textStyle: {
color: "var(--dv-color-text-primary)",
fontSize: "var(--dv-text-body2)"
}
},
grid: {
top: 60,
left: "15%",
right: 35,
bottom: 40,
containLabel: true
},
color: ["#2AC94F", "#FFE200", "#FF99C3", "#00FFFD", "#ff99c3", "#00fffd", "#ff7815", "#ef33ff"],
xAxis: [
{
type: "category",
data: xData,
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: "var(--dv-color-fill-lighter)"
}
},
axisLabel: {
textStyle: {
fontSize: "var(--dv-text-number2)",
fontFamily: "var(--dv-font-family-number)",
color: "var(--dv-color-text-primary)"
}
},
axisTick: {
show: false,
interval: 24
}
}
],
yAxis: [
{
name: "因子值\n(mg/L)",
nameTextStyle: {
color: "var(--dv-color-text-secondary)",
fontSize: "var(--dv-text-body2)",
align: "center",
padding: [0, 0, 0, 0]
},
type: "value",
offset: 60,
axisLabel: {
formatter: "{value}",
textStyle: {
color: "var(--dv-color-text-secondary)",
fontSize: "var(--dv-text-number2)",
fontFamily: "var(--dv-font-family-number)",
align: "center",
padding: [0, 0, 0, 5]
}
},
splitArea: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: "var(--dv-color-fill-lighter)"
}
},
axisTick: { show: false },
axisPointer: {
snap: true
}
},
{
name: "叶绿素a\n(μg/L)",
nameTextStyle: {
align: "center",
color: "var(--dv-color-text-secondary)",
fontSize: "var(--dv-text-body2)",
padding: [0, 0, 0, 0]
},
type: "value",
position: "left",
offset: 10,
axisLabel: {
formatter: "{value}",
textStyle: {
color: "var(--dv-color-text-secondary)",
fontSize: "var(--dv-text-number2)",
fontFamily: "var(--dv-font-family-number)",
align: "center"
},
padding: [0, 0, 0, 0]
},
splitLine: { show: false },
axisTick: { show: false },
axisPointer: {
snap: true
}
},
{
name: "水温\n(℃)",
nameTextStyle: {
align: "center",
color: "var(--dv-color-text-secondary)",
fontSize: "var(--dv-text-body2)",
padding: [0, 0, 0, 20]
},
type: "value",
position: "right",
offset: 10,
axisLabel: {
formatter: "{value}",
textStyle: {
color: "var(--dv-color-text-secondary)",
fontSize: "var(--dv-text-number2)",
fontFamily: "var(--dv-font-family-number)",
align: "center"
},
padding: [0, 0, 0, 20]
},
splitLine: { show: false },
axisTick: { show: false },
axisPointer: {
snap: true
}
}
],
series: seriesData
};
};
__expose({
reload: initChart
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", {
id: "chart",
ref_key: "chartRef",
ref: chartRef,
class: "chart"
}, [
createVNode(_sfc_main$1, { options: unref(option) }, null, 8, ["options"])
], 512)
]);
};
}
});
export { _sfc_main as default };