feat: 外观、撑杆、钩机监测模块的图表对接接口
parent
abbab281af
commit
d364741783
@ -1,206 +1,222 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
datas: {
|
||||||
type: Array as PropType<Array<{ value: number; name: string }>>,
|
type: Object,
|
||||||
required: true,
|
default: () => {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const data1 = [
|
|
||||||
{
|
|
||||||
name: "1日",
|
|
||||||
value: 220,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2日",
|
|
||||||
value: 148,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "3日",
|
|
||||||
value: 195,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "4日",
|
|
||||||
value: 245,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "5日",
|
|
||||||
value: 148,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "6日",
|
|
||||||
value: 95,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "7日",
|
|
||||||
value: 56,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "8日",
|
|
||||||
value: 45,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "9日",
|
|
||||||
value: 250,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "10日",
|
|
||||||
value: 48,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "11日",
|
|
||||||
value: 95,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "12日",
|
|
||||||
value: 128,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "13日",
|
|
||||||
value: 34,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "14日",
|
|
||||||
value: 123,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "15日",
|
|
||||||
value: 175,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "16日",
|
|
||||||
value: 148,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
let xAxisData = [];
|
|
||||||
let seriesData1 = [];
|
|
||||||
data1.forEach((item) => {
|
|
||||||
xAxisData.push(item.name);
|
|
||||||
seriesData1.push(item.value);
|
|
||||||
});
|
|
||||||
var barWidth = 16;
|
|
||||||
var barWidthBg = 25;
|
|
||||||
const color = [
|
|
||||||
{
|
|
||||||
type: "linear",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "rgba(16, 53, 41, 0.10)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "rgba(57, 161, 59, 1)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const seriesData = xAxisData.map((item, index) => {
|
|
||||||
return {
|
|
||||||
value: seriesData1[index],
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: [2, 2, 0, 0],
|
|
||||||
color: color[0],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const option = {
|
const initChart = () => {
|
||||||
grid: {
|
const chartDom = document.getElementById("poleDailyDetectionChart");
|
||||||
left: "1%",
|
const mainChart = echarts.init(chartDom);
|
||||||
right: "1%",
|
let finalData = [];
|
||||||
bottom: "5%",
|
|
||||||
top: "15%",
|
for (let key in props.datas) {
|
||||||
containLabel: true,
|
finalData.push({
|
||||||
},
|
name: key + "日",
|
||||||
xAxis: {
|
value: props.datas[key],
|
||||||
data: xAxisData,
|
});
|
||||||
axisLine: {
|
}
|
||||||
show: false,
|
// const data1 = [
|
||||||
},
|
// {
|
||||||
axisTick: {
|
// name: "1日",
|
||||||
show: false,
|
// value: 220,
|
||||||
},
|
// },
|
||||||
axisLabel: {
|
// {
|
||||||
show: true,
|
// name: "2日",
|
||||||
color: "#B4C0CC",
|
// value: 148,
|
||||||
fontSize: 12,
|
// },
|
||||||
|
// {
|
||||||
|
// name: "3日",
|
||||||
|
// value: 195,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "4日",
|
||||||
|
// value: 245,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "5日",
|
||||||
|
// value: 148,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "6日",
|
||||||
|
// value: 95,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "7日",
|
||||||
|
// value: 56,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "8日",
|
||||||
|
// value: 45,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "9日",
|
||||||
|
// value: 250,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "10日",
|
||||||
|
// value: 48,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "11日",
|
||||||
|
// value: 95,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "12日",
|
||||||
|
// value: 128,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "13日",
|
||||||
|
// value: 34,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "14日",
|
||||||
|
// value: 123,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "15日",
|
||||||
|
// value: 175,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "16日",
|
||||||
|
// value: 148,
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
let xAxisData = [];
|
||||||
|
let seriesData1 = [];
|
||||||
|
finalData.forEach((item) => {
|
||||||
|
xAxisData.push(item.name);
|
||||||
|
seriesData1.push(item.value);
|
||||||
|
});
|
||||||
|
var barWidth = 16;
|
||||||
|
var barWidthBg = 25;
|
||||||
|
const color = [
|
||||||
|
{
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(16, 53, 41, 0.10)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(57, 161, 59, 1)",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
},
|
];
|
||||||
yAxis: {
|
const seriesData = xAxisData.map((item, index) => {
|
||||||
axisLine: {
|
return {
|
||||||
show: true,
|
value: seriesData1[index],
|
||||||
lineStyle: {
|
itemStyle: {
|
||||||
color: "#B4C0CC",
|
borderRadius: [2, 2, 0, 0],
|
||||||
|
color: color[0],
|
||||||
},
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
left: "1%",
|
||||||
|
right: "1%",
|
||||||
|
bottom: "5%",
|
||||||
|
top: "15%",
|
||||||
|
containLabel: true,
|
||||||
},
|
},
|
||||||
axisLabel: {
|
xAxis: {
|
||||||
show: true,
|
data: xAxisData,
|
||||||
color: "#B4C0CC",
|
axisLine: {
|
||||||
fontSize: 12,
|
show: false,
|
||||||
},
|
},
|
||||||
splitLine: {
|
axisTick: {
|
||||||
lineStyle: {
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
color: "#B4C0CC",
|
color: "#B4C0CC",
|
||||||
opacity: 0.2,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
yAxis: {
|
||||||
series: [
|
axisLine: {
|
||||||
{
|
show: true,
|
||||||
type: "bar",
|
lineStyle: {
|
||||||
data: seriesData,
|
color: "#B4C0CC",
|
||||||
barWidth: barWidth,
|
},
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
data: seriesData,
|
|
||||||
barWidth: barWidthBg,
|
|
||||||
barGap: "-120%",
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.2,
|
|
||||||
},
|
},
|
||||||
},
|
axisLabel: {
|
||||||
{
|
|
||||||
type: "pictorialBar",
|
|
||||||
data: seriesData,
|
|
||||||
symbolPosition: "end",
|
|
||||||
symbolSize: [barWidth, 7],
|
|
||||||
z: 12,
|
|
||||||
symbolOffset: [-3, -3],
|
|
||||||
label: {
|
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
color: "#B4C0CC",
|
||||||
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
},
|
splitLine: {
|
||||||
{
|
lineStyle: {
|
||||||
type: "pictorialBar",
|
color: "#B4C0CC",
|
||||||
data: seriesData,
|
opacity: 0.2,
|
||||||
symbolPosition: "end",
|
},
|
||||||
symbolSize: [barWidthBg, 6],
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 0.2,
|
|
||||||
},
|
},
|
||||||
z: 11,
|
|
||||||
symbolOffset: [-3, -3],
|
|
||||||
},
|
},
|
||||||
],
|
series: [
|
||||||
};
|
{
|
||||||
|
type: "bar",
|
||||||
const initChart = () => {
|
data: seriesData,
|
||||||
const chartDom = document.getElementById("poleDailyDetectionChart");
|
barWidth: barWidth,
|
||||||
const mainChart = echarts.init(chartDom);
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
data: seriesData,
|
||||||
|
barWidth: barWidthBg,
|
||||||
|
barGap: "-120%",
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pictorialBar",
|
||||||
|
data: seriesData,
|
||||||
|
symbolPosition: "end",
|
||||||
|
symbolSize: [barWidth, 7],
|
||||||
|
z: 12,
|
||||||
|
symbolOffset: [-3, -3],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pictorialBar",
|
||||||
|
data: seriesData,
|
||||||
|
symbolPosition: "end",
|
||||||
|
symbolSize: [barWidthBg, 6],
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
},
|
||||||
|
z: 11,
|
||||||
|
symbolOffset: [-3, -3],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
mainChart.setOption(option);
|
mainChart.setOption(option);
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
watch(
|
||||||
initChart();
|
() => props.datas,
|
||||||
});
|
(newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
initChart();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="poleDailyDetectionChart" style="width: 100%; height: 100%"></div>
|
<div id="poleDailyDetectionChart" style="width: 862px; height: 100%"></div>
|
||||||
</template>
|
</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 = ['#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