feat: 外观、撑杆、钩机监测模块的图表对接接口
parent
abbab281af
commit
d364741783
@ -0,0 +1,92 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array as PropType<Array<{ value: number; name: string }>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
colors: { type: Array as PropType<Array<string>>, default: () => [] },
|
||||||
|
});
|
||||||
|
|
||||||
|
const chartContainer = ref<HTMLDivElement | null>(null);
|
||||||
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
const colorsArr = ['#FFCC4A','#028FF5','#06EA7C','#8500FF','#FF7D05','#00D1FF']
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chartContainer.value) return;
|
||||||
|
chartInstance = echarts.init(chartContainer.value);
|
||||||
|
setTimeout(() => {
|
||||||
|
chartInstance?.resize();
|
||||||
|
updateChart();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新图表配置
|
||||||
|
const updateChart = () => {
|
||||||
|
if (!chartInstance) return;
|
||||||
|
|
||||||
|
chartInstance.setOption({
|
||||||
|
legend: {
|
||||||
|
type: "scroll",
|
||||||
|
orient: "vertical",
|
||||||
|
left: "70%",
|
||||||
|
align: "left",
|
||||||
|
top: "middle",
|
||||||
|
itemWidth: 16, // 图例项宽度
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: { color: "#FFF" },
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["30%", "80%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
label: { show: false },
|
||||||
|
itemStyle: {
|
||||||
|
color: (params) =>
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: props.colors[params.dataIndex] },
|
||||||
|
{ offset: 1, color: colorsArr[params.dataIndex] },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: props.data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期管理
|
||||||
|
onMounted(() => {
|
||||||
|
initChart();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (chartInstance) {
|
||||||
|
chartInstance.dispose();
|
||||||
|
chartInstance = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 响应式更新
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
async () => {
|
||||||
|
await nextTick();
|
||||||
|
updateChart();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 窗口大小监听
|
||||||
|
// onMounted(() => {
|
||||||
|
// window.addEventListener("resize", () => chartInstance?.resize());
|
||||||
|
// });
|
||||||
|
|
||||||
|
// onUnmounted(() => {
|
||||||
|
// window.removeEventListener("resize", () => chartInstance?.resize());
|
||||||
|
// });
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div ref="chartContainer" style="width: 100%; height: 100%" />
|
||||||
|
</template>
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array as PropType<Array<{ value: number; name: string }>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
colors: { type: Array as PropType<Array<string>>, default: () => [] },
|
||||||
|
});
|
||||||
|
|
||||||
|
const chartContainer = ref<HTMLDivElement | null>(null);
|
||||||
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
const colorsArr = ['#3FE3FA','#FF4D00']
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chartContainer.value) return;
|
||||||
|
chartInstance = echarts.init(chartContainer.value);
|
||||||
|
setTimeout(() => {
|
||||||
|
chartInstance?.resize();
|
||||||
|
updateChart();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新图表配置
|
||||||
|
const updateChart = () => {
|
||||||
|
if (!chartInstance) return;
|
||||||
|
|
||||||
|
chartInstance.setOption({
|
||||||
|
legend: {
|
||||||
|
type: "scroll",
|
||||||
|
orient: "vertical",
|
||||||
|
left: "70%",
|
||||||
|
align: "left",
|
||||||
|
top: "middle",
|
||||||
|
itemWidth: 16, // 图例项宽度
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: { color: "#FFF" },
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["40%", "80%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
label: { show: false },
|
||||||
|
itemStyle: {
|
||||||
|
color: (params) =>
|
||||||
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: props.colors[params.dataIndex] },
|
||||||
|
{ offset: 1, color: colorsArr[params.dataIndex] },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: props.data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期管理
|
||||||
|
onMounted(() => {
|
||||||
|
initChart();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (chartInstance) {
|
||||||
|
chartInstance.dispose();
|
||||||
|
chartInstance = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 响应式更新
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
async () => {
|
||||||
|
await nextTick();
|
||||||
|
updateChart();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 窗口大小监听
|
||||||
|
// onMounted(() => {
|
||||||
|
// window.addEventListener("resize", () => chartInstance?.resize());
|
||||||
|
// });
|
||||||
|
|
||||||
|
// onUnmounted(() => {
|
||||||
|
// window.removeEventListener("resize", () => chartInstance?.resize());
|
||||||
|
// });
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div ref="chartContainer" style="width: 100%; height: 100%" />
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue