feat: 外观、撑杆、钩机监测模块的图表对接接口
parent
abbab281af
commit
d364741783
@ -1,206 +1,222 @@
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array as PropType<Array<{ value: number; name: string }>>,
|
||||
required: true,
|
||||
datas: {
|
||||
type: Object,
|
||||
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 = {
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
bottom: "5%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#B4C0CC",
|
||||
fontSize: 12,
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById("poleDailyDetectionChart");
|
||||
const mainChart = echarts.init(chartDom);
|
||||
let finalData = [];
|
||||
|
||||
for (let key in props.datas) {
|
||||
finalData.push({
|
||||
name: key + "日",
|
||||
value: props.datas[key],
|
||||
});
|
||||
}
|
||||
// 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 = [];
|
||||
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: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#B4C0CC",
|
||||
];
|
||||
const seriesData = xAxisData.map((item, index) => {
|
||||
return {
|
||||
value: seriesData1[index],
|
||||
itemStyle: {
|
||||
borderRadius: [2, 2, 0, 0],
|
||||
color: color[0],
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
bottom: "5%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#B4C0CC",
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#B4C0CC",
|
||||
opacity: 0.2,
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: seriesData,
|
||||
barWidth: barWidth,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: seriesData,
|
||||
barWidth: barWidthBg,
|
||||
barGap: "-120%",
|
||||
itemStyle: {
|
||||
opacity: 0.2,
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#B4C0CC",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "pictorialBar",
|
||||
data: seriesData,
|
||||
symbolPosition: "end",
|
||||
symbolSize: [barWidth, 7],
|
||||
z: 12,
|
||||
symbolOffset: [-3, -3],
|
||||
label: {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#B4C0CC",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "pictorialBar",
|
||||
data: seriesData,
|
||||
symbolPosition: "end",
|
||||
symbolSize: [barWidthBg, 6],
|
||||
itemStyle: {
|
||||
opacity: 0.2,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#B4C0CC",
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
z: 11,
|
||||
symbolOffset: [-3, -3],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById("poleDailyDetectionChart");
|
||||
const mainChart = echarts.init(chartDom);
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: seriesData,
|
||||
barWidth: barWidth,
|
||||
},
|
||||
{
|
||||
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);
|
||||
};
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
watch(
|
||||
() => props.datas,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
initChart();
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="poleDailyDetectionChart" style="width: 100%; height: 100%"></div>
|
||||
<div id="poleDailyDetectionChart" style="width: 862px; height: 100%"></div>
|
||||
</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