This commit is contained in:
parent
a3807a2214
commit
ec0d91663f
|
|
@ -1,365 +0,0 @@
|
|||
import { defineComponent, watch, ref } from 'vue';
|
||||
// 声明类型
|
||||
const PropsType = {
|
||||
cdata: {
|
||||
type: Object,
|
||||
require: true
|
||||
}
|
||||
} as const
|
||||
|
||||
// 定义主体
|
||||
export default defineComponent({
|
||||
props: PropsType,
|
||||
setup(props) {
|
||||
// 定义 ref
|
||||
const chartRef = ref()
|
||||
// 定义颜色
|
||||
const colorList = {
|
||||
linearYtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f5b44d"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearGtoB: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#43dfa2"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c98e8"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
areaBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(35,184,210,.2)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(35,184,210,0)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// 配置项
|
||||
let options ={}
|
||||
|
||||
// 监听
|
||||
watch(
|
||||
() => props.cdata,
|
||||
(val: any) => {
|
||||
options = {
|
||||
title: {
|
||||
text: "",
|
||||
textStyle: {
|
||||
color: "#D3D6DD",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtext: val.year + "/" + val.weekCategory[6],
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16
|
||||
},
|
||||
top: 50,
|
||||
left: 80
|
||||
},
|
||||
legend: {
|
||||
top: 120,
|
||||
left: 80,
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
data: ["平均指标", "我的指标"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
radar: {
|
||||
center: ["68%", "27%"],
|
||||
radius: "40%",
|
||||
name: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
shadowBlur: 25,
|
||||
shadowColor: "#000",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: "服务态度",
|
||||
max: val.maxData
|
||||
},
|
||||
{
|
||||
name: "产品质量",
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: "任务效率",
|
||||
max: 12
|
||||
},
|
||||
{
|
||||
name: "售后保障",
|
||||
max: 3.5
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: 90,
|
||||
right: 80,
|
||||
bottom: '15%',
|
||||
top: "50%"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
},
|
||||
data: val.weekCategory
|
||||
},
|
||||
// 下方Y轴
|
||||
yAxis: {
|
||||
name: "工单",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14
|
||||
},
|
||||
max: val.maxData,
|
||||
splitNumber: 4,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "radar",
|
||||
symbolSize: 0,
|
||||
data: [
|
||||
{
|
||||
value: val.radarDataAvg[6],
|
||||
name: "平均指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f8d351"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "#f8d351",
|
||||
shadowBlur: 25,
|
||||
shadowColor: "rgba(248,211,81,.3)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -10,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: val.radarData[6],
|
||||
name: "我的指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#43dfa2"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: colorList.linearGtoB,
|
||||
shadowBlur: 15,
|
||||
shadowColor: "rgba(0,0,0,.2)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colorList.linearBtoG,
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: colorList.areaBtoG
|
||||
}
|
||||
},
|
||||
data: val.weekLineData,
|
||||
lineSmooth: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
type: "average",
|
||||
name: "平均值"
|
||||
}
|
||||
],
|
||||
precision: 0,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "平均值: \n {c}"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "rgba(248,211,81,.7)"
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
position: "top",
|
||||
formatter: "{c} m",
|
||||
backgroundColor: "rgba(28,152,232,.2)",
|
||||
padding: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "占位背景",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#000",
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barWidth: "50%",
|
||||
data: val.weekMaxData,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
}
|
||||
// 手动触发更新
|
||||
if (chartRef.value) {
|
||||
// 通过初始化参数打入数据
|
||||
chartRef.value.initChart(options)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
return () => {
|
||||
const height = "480px"
|
||||
const width = "100%"
|
||||
|
||||
return <div>
|
||||
<echart ref={chartRef} height={height} width={width} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,363 @@
|
|||
<template>
|
||||
<div :style="{ height, width }" ref="chartRef"></div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import * as echarts from "echarts";
|
||||
import { watch,ref } from "vue";
|
||||
// 接收 props
|
||||
const props = defineProps<{
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: string[],
|
||||
radarData: string[],
|
||||
radarDataAvg: string[],
|
||||
maxData: number,
|
||||
weekMaxData: string[],
|
||||
weekLineData: string[],
|
||||
};
|
||||
}>();
|
||||
|
||||
const height = "450px";
|
||||
const width = "1000px";
|
||||
// 定义 ref
|
||||
const chartRef = ref();
|
||||
|
||||
const colorList = {
|
||||
linearYtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f5b44d"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearGtoB: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#43dfa2"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
linearBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1c98e8"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28f8de"
|
||||
}
|
||||
]
|
||||
},
|
||||
areaBtoG: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(35,184,210,.2)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(35,184,210,0)"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
let options = ref({});
|
||||
// echarts 实例
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
watch(() => props.cdata, (val: typeof props.cdata) => {
|
||||
options.value = {
|
||||
title: {
|
||||
text: "",
|
||||
textStyle: {
|
||||
color: "#D3D6DD",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtext: val.year + "/" + val.weekCategory[6],
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16
|
||||
},
|
||||
top: 50,
|
||||
left: 80
|
||||
},
|
||||
legend: {
|
||||
top: 120,
|
||||
left: 80,
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
data: ["平均指标", "我的指标"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
radar: {
|
||||
center: ["68%", "27%"],
|
||||
radius: "40%",
|
||||
name: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
shadowBlur: 25,
|
||||
shadowColor: "#000",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: "服务态度",
|
||||
max: val.maxData
|
||||
},
|
||||
{
|
||||
name: "产品质量",
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: "任务效率",
|
||||
max: 12
|
||||
},
|
||||
{
|
||||
name: "售后保障",
|
||||
max: 3.5
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: 90,
|
||||
right: 80,
|
||||
bottom: "15%",
|
||||
top: "50%"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
},
|
||||
data: val.weekCategory
|
||||
},
|
||||
// 下方Y轴
|
||||
yAxis: {
|
||||
name: "工单",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14
|
||||
},
|
||||
max: val.maxData,
|
||||
splitNumber: 4,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "radar",
|
||||
symbolSize: 0,
|
||||
data: [
|
||||
{
|
||||
value: val.radarDataAvg[6],
|
||||
name: "平均指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f8d351"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "#f8d351",
|
||||
shadowBlur: 25,
|
||||
shadowColor: "rgba(248,211,81,.3)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -10,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: val.radarData[6],
|
||||
name: "我的指标",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#43dfa2"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: colorList.linearGtoB,
|
||||
shadowBlur: 15,
|
||||
shadowColor: "rgba(0,0,0,.2)",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colorList.linearBtoG,
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: colorList.areaBtoG
|
||||
}
|
||||
},
|
||||
data: val.weekLineData,
|
||||
lineSmooth: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
type: "average",
|
||||
name: "平均值"
|
||||
}
|
||||
],
|
||||
precision: 0,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "平均值: \n {c}"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "rgba(248,211,81,.7)"
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
position: "top",
|
||||
formatter: "{c} m",
|
||||
backgroundColor: "rgba(28,152,232,.2)",
|
||||
padding: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "占位背景",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#000",
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barWidth: "50%",
|
||||
data: val.weekMaxData,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
};
|
||||
// 手动触发更新
|
||||
if (chartRef.value) {
|
||||
if (!chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
chartInstance.setOption(options.value);
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
deep: true
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
import { defineComponent, reactive, onMounted, ref, onUnmounted } from "vue";
|
||||
import Draw from "./draw";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Draw,
|
||||
},
|
||||
setup() {
|
||||
const drawTiming = ref(0);
|
||||
const cdata = reactive({
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: [],
|
||||
});
|
||||
|
||||
// methods
|
||||
const setData = () => {
|
||||
// 清空轮询数据
|
||||
cdata.weekCategory = [];
|
||||
cdata.weekMaxData = [];
|
||||
cdata.weekLineData = [];
|
||||
cdata.radarData = [];
|
||||
cdata.radarDataAvg = [];
|
||||
|
||||
const dateBase = new Date();
|
||||
cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
const date = new Date();
|
||||
cdata.weekCategory.unshift(
|
||||
[date.getMonth() + 1, date.getDate() - i].join("/")
|
||||
);
|
||||
|
||||
// 折线图数据
|
||||
cdata.weekMaxData.push(cdata.maxData);
|
||||
const distance = Math.round(Math.random() * 11000 + 500);
|
||||
cdata.weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
const averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
const hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
const radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
cdata.radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
const distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
const radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg,
|
||||
];
|
||||
cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
};
|
||||
|
||||
// 定时函数
|
||||
const drawTimingFn = () => {
|
||||
setData();
|
||||
drawTiming.value = setInterval(() => {
|
||||
setData();
|
||||
}, 6000);
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
drawTimingFn();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(drawTiming.value);
|
||||
});
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div>
|
||||
<Draw cdata={cdata} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<Draw :cdata="cdata" />
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import Draw from "./draw.vue";
|
||||
import { onMounted, onUnmounted, reactive,ref } from "vue";
|
||||
|
||||
const drawTiming:any = ref(0);
|
||||
const cdata = reactive({
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: [],
|
||||
});
|
||||
|
||||
const setData = () => {
|
||||
// 清空轮询数据
|
||||
cdata.weekCategory = [];
|
||||
cdata.weekMaxData = [];
|
||||
cdata.weekLineData = [];
|
||||
cdata.radarData = [];
|
||||
cdata.radarDataAvg = [];
|
||||
|
||||
const dateBase = new Date();
|
||||
cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
const date = new Date();
|
||||
cdata.weekCategory.unshift(
|
||||
[date.getMonth() + 1, date.getDate() - i].join("/")
|
||||
);
|
||||
|
||||
// 折线图数据
|
||||
cdata.weekMaxData.push(cdata.maxData);
|
||||
const distance = Math.round(Math.random() * 11000 + 500);
|
||||
cdata.weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
const averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
const hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
const radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
cdata.radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
const distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
const radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg,
|
||||
];
|
||||
cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
};
|
||||
|
||||
const drawTimingFn = () => {
|
||||
setData();
|
||||
drawTiming.value = setInterval(() => {
|
||||
setData();
|
||||
}, 6000);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
drawTimingFn();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(drawTiming.value);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<i class="iconfont icon-chart-area" />
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2 mt-1">数据统计图</span>
|
||||
<span class="fs-xl text mx-2 mt-1">数据统计图123132</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chart from "./chart/index";
|
||||
import Chart from "./chart/index.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" class>
|
||||
|
|
|
|||
|
|
@ -1,97 +0,0 @@
|
|||
import { defineComponent, ref, watch, shallowReactive } from 'vue'
|
||||
|
||||
// 声明类型
|
||||
const PropsType = {
|
||||
cdata: {
|
||||
type: Object,
|
||||
require: true
|
||||
}
|
||||
} as const
|
||||
|
||||
// 定义主体
|
||||
export default defineComponent({
|
||||
props: PropsType,
|
||||
setup(props) {
|
||||
// 定义 ref
|
||||
const chartRef = ref()
|
||||
// 配置项
|
||||
let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})
|
||||
|
||||
watch(
|
||||
() => props.cdata,
|
||||
(val: any) => {
|
||||
options = {
|
||||
color: [
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293',
|
||||
'#e7bcf3',
|
||||
'#8378ea'
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
icon: 'circle',
|
||||
bottom: 0,
|
||||
x: 'center',
|
||||
data: val.xData,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '通过率统计',
|
||||
type: 'pie',
|
||||
radius: [10, 50],
|
||||
roseType: 'area',
|
||||
center: ['50%', '40%'],
|
||||
itemStyle: {
|
||||
borderRadius: 5
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: val.seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
// 手动触发更新
|
||||
if (chartRef.value) {
|
||||
// 通过初始化参数打入数据
|
||||
chartRef.value.initChart(options)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
return () => {
|
||||
const height = "220px"
|
||||
const width = "260px"
|
||||
|
||||
return <div>
|
||||
<echart ref={chartRef} options={options} height={height} width={width} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div :style="{ height, width }" ref="chartRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowReactive, watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
|
||||
const height = "220px";
|
||||
const width = "260px";
|
||||
const props = defineProps<{
|
||||
cdata: {
|
||||
xData: string[],
|
||||
seriesData: {
|
||||
value: number,
|
||||
name: string
|
||||
}[]
|
||||
};
|
||||
}>();
|
||||
|
||||
// 定义 ref
|
||||
const chartRef = ref();
|
||||
|
||||
// 配置项
|
||||
let options = shallowReactive({ color: null, tooltip: null, toolbox: null, calculable: null, legend: null, series: null });
|
||||
// echarts 实例
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
watch(
|
||||
() => props.cdata,
|
||||
(val: any) => {
|
||||
options = {
|
||||
color: [
|
||||
"#37a2da",
|
||||
"#32c5e9",
|
||||
"#9fe6b8",
|
||||
"#ffdb5c",
|
||||
"#ff9f7f",
|
||||
"#fb7293",
|
||||
"#e7bcf3",
|
||||
"#8378ea"
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
calculable: true,
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
icon: "circle",
|
||||
bottom: 0,
|
||||
x: "center",
|
||||
data: val.xData,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "通过率统计",
|
||||
type: "pie",
|
||||
radius: [10, 50],
|
||||
roseType: "area",
|
||||
center: ["50%", "40%"],
|
||||
itemStyle: {
|
||||
borderRadius: 5
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: val.seriesData
|
||||
}
|
||||
]
|
||||
};
|
||||
// // 手动触发更新
|
||||
// if (chartRef.value) {
|
||||
// // 通过初始化参数打入数据
|
||||
// chartRef.value.initChart(options)
|
||||
// }
|
||||
// 手动触发更新
|
||||
if (chartRef.value) {
|
||||
if (!chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
chartInstance.setOption(options);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import { defineComponent, onUnmounted, reactive } from 'vue'
|
||||
import Draw from './draw'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Draw,
|
||||
},
|
||||
setup() {
|
||||
let intervalInstance = null
|
||||
const cdata = reactive({
|
||||
xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
|
||||
seriesData: [
|
||||
{ value: 10, name: '数据1' },
|
||||
{ value: 5, name: '数据2' },
|
||||
{ value: 15, name: '数据3' },
|
||||
{ value: 25, name: '数据4' },
|
||||
{ value: 20, name: '数据5' },
|
||||
{ value: 35, name: '数据6' },
|
||||
],
|
||||
})
|
||||
intervalInstance = setInterval(() => {
|
||||
const data = cdata.seriesData
|
||||
cdata.seriesData = data.map((e) => {
|
||||
return { value: e.value + 10, name: e.name }
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalInstance)
|
||||
})
|
||||
return () => {
|
||||
return (
|
||||
<div>
|
||||
<Draw cdata={cdata} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<Draw :cdata=cdata />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onUnmounted, reactive } from "vue";
|
||||
import Draw from './draw.vue'
|
||||
let intervalInstance = null
|
||||
|
||||
const cdata = reactive({
|
||||
xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
|
||||
seriesData: [
|
||||
{ value: 10, name: '数据1' },
|
||||
{ value: 5, name: '数据2' },
|
||||
{ value: 15, name: '数据3' },
|
||||
{ value: 25, name: '数据4' },
|
||||
{ value: 20, name: '数据5' },
|
||||
{ value: 35, name: '数据6' },
|
||||
],
|
||||
})
|
||||
|
||||
intervalInstance = setInterval(() => {
|
||||
const data = cdata.seriesData
|
||||
cdata.seriesData = data.map((e) => {
|
||||
return { value: e.value + 10, name: e.name }
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalInstance)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -42,14 +42,14 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
|
||||
import Chart from "./chart/index";
|
||||
import Chart from "./chart/index.vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
setup() {
|
||||
// 下层数据
|
||||
const dataArr = [
|
||||
const dataArr = reactive([
|
||||
{
|
||||
number: 150,
|
||||
text: "今日构建总量",
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
number: 571,
|
||||
text: "未通过数量",
|
||||
},
|
||||
];
|
||||
]);
|
||||
// 对应图标
|
||||
const iconFont = [
|
||||
"icon-diagnose",
|
||||
|
|
@ -74,8 +74,8 @@
|
|||
"icon-cloudupload",
|
||||
"icon-clouddownload",
|
||||
];
|
||||
const numberData = reactive([]);
|
||||
let intervalInstance = null;
|
||||
const numberData:any = reactive([]);
|
||||
let intervalInstance:any = null;
|
||||
onMounted(() => {
|
||||
setData();
|
||||
changeTiming();
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
},
|
||||
},
|
||||
text: e.text,
|
||||
});
|
||||
} );
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}, 2000);
|
||||
};
|
||||
const changeNumber = () => {
|
||||
numberData.forEach((item, index) => {
|
||||
numberData.forEach((item:any, index:any) => {
|
||||
item.config.number[0] += ++index;
|
||||
item.config = { ...item.config };
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,131 +0,0 @@
|
|||
import { defineComponent, watch, shallowReactive } from 'vue'
|
||||
|
||||
// 声明类型
|
||||
const PropsType = {
|
||||
cdata: {
|
||||
type: Object,
|
||||
require: true
|
||||
}
|
||||
} as const
|
||||
|
||||
// 定义主体
|
||||
export default defineComponent({
|
||||
props: PropsType,
|
||||
setup(props) {
|
||||
// 定义固定配置项
|
||||
const lineStyle = {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
}
|
||||
};
|
||||
// 配置项
|
||||
let options = shallowReactive({radar:null,series:null})
|
||||
|
||||
watch(
|
||||
() => props.cdata,
|
||||
(val: any) => {
|
||||
options = {
|
||||
radar: {
|
||||
indicator: val.indicatorData,
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
radius: ["0%", "65%"],
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
"rgba(238, 197, 102, 0.1)",
|
||||
"rgba(238, 197, 102, 0.2)",
|
||||
"rgba(238, 197, 102, 0.4)",
|
||||
"rgba(238, 197, 102, 0.6)",
|
||||
"rgba(238, 197, 102, 0.8)",
|
||||
"rgba(238, 197, 102, 1)"
|
||||
].reverse()
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(238, 197, 102, 0.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "北京",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: val.dataBJ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F9713C"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "上海",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: val.dataSH,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#B3E4A1"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "广州",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: val.dataGZ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
return () => {
|
||||
const height = "200px"
|
||||
const width = "260px"
|
||||
|
||||
return <div>
|
||||
<echart options={options} height={height} width={width} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
|
||||
<template>
|
||||
<div :style="{ height, width }" ref="chartRef"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { shallowReactive, watch,ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps<{
|
||||
cdata: {
|
||||
indicatorData: {
|
||||
name:string,
|
||||
max:number
|
||||
},
|
||||
dataBJ:number[][]
|
||||
dataGZ: number[][]
|
||||
dataSH:number[][]
|
||||
};
|
||||
}>();
|
||||
|
||||
// 定义固定配置项
|
||||
const lineStyle = {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
}
|
||||
};
|
||||
// 配置项
|
||||
let options = shallowReactive({radar:null,series:null})
|
||||
|
||||
// 定义 ref
|
||||
const chartRef = ref();
|
||||
const height = "200px"
|
||||
const width = "260px"
|
||||
// echarts 实例
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
watch(
|
||||
() => props.cdata,
|
||||
(val: any) => {
|
||||
options = {
|
||||
radar: {
|
||||
indicator: val.indicatorData,
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
radius: ["0%", "65%"],
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
"rgba(238, 197, 102, 0.1)",
|
||||
"rgba(238, 197, 102, 0.2)",
|
||||
"rgba(238, 197, 102, 0.4)",
|
||||
"rgba(238, 197, 102, 0.6)",
|
||||
"rgba(238, 197, 102, 0.8)",
|
||||
"rgba(238, 197, 102, 1)"
|
||||
].reverse()
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(238, 197, 102, 0.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "北京",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: val.dataBJ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F9713C",
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "上海",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: val.dataSH,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#B3E4A1"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "广州",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: val.dataGZ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
if (chartRef.value) {
|
||||
if (!chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
chartInstance.setOption(options);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import { defineComponent, reactive } from 'vue'
|
||||
import Draw from './draw'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Draw
|
||||
},
|
||||
setup() {
|
||||
const cdata = reactive({
|
||||
indicatorData: [
|
||||
{ name: "数据1", max: 300 },
|
||||
{ name: "数据2", max: 250 },
|
||||
{ name: "数据3", max: 300 },
|
||||
{ name: "数据4", max: 5 },
|
||||
{ name: "数据5", max: 200 },
|
||||
{ name: "数据6", max: 100 }
|
||||
],
|
||||
dataBJ: [
|
||||
[94, 69, 114, 2.08, 73, 39, 22],
|
||||
[99, 73, 110, 2.43, 76, 48, 23],
|
||||
[31, 12, 30, 0.5, 32, 16, 24],
|
||||
[42, 27, 43, 1, 53, 22, 25],
|
||||
[154, 117, 157, 3.05, 92, 58, 26],
|
||||
[234, 185, 230, 4.09, 123, 69, 27],
|
||||
[160, 120, 186, 2.77, 91, 50, 28]
|
||||
],
|
||||
dataGZ: [
|
||||
[84, 94, 140, 2.238, 68, 18, 22],
|
||||
[93, 77, 104, 1.165, 53, 7, 23],
|
||||
[99, 130, 227, 3.97, 55, 15, 24],
|
||||
[146, 84, 139, 1.094, 40, 17, 25],
|
||||
[113, 108, 137, 1.481, 48, 15, 26],
|
||||
[81, 48, 62, 1.619, 26, 3, 27],
|
||||
[56, 48, 68, 1.336, 37, 9, 28]
|
||||
],
|
||||
dataSH: [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
[65, 27, 78, 0.86, 45, 29, 2],
|
||||
[83, 60, 84, 1.09, 73, 27, 3],
|
||||
[109, 81, 121, 1.28, 68, 51, 4],
|
||||
[106, 77, 114, 1.07, 55, 51, 5],
|
||||
[109, 81, 121, 1.28, 68, 51, 6],
|
||||
[106, 77, 114, 1.07, 55, 51, 7]
|
||||
]
|
||||
})
|
||||
return () => {
|
||||
return <div>
|
||||
<draw cdata={cdata} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<Draw :cdata=cdata />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
import Draw from "./draw.vue";
|
||||
import { onUnmounted,reactive } from "vue";
|
||||
|
||||
let intervalInstance = null;
|
||||
const cdata = reactive({
|
||||
indicatorData: [
|
||||
{ name: "数据1", max: 300 },
|
||||
{ name: "数据2", max: 250 },
|
||||
{ name: "数据3", max: 300 },
|
||||
{ name: "数据4", max: 5 },
|
||||
{ name: "数据5", max: 200 },
|
||||
{ name: "数据6", max: 100 }
|
||||
],
|
||||
dataBJ: [
|
||||
[94, 69, 114, 2.08, 73, 39, 22],
|
||||
[99, 73, 110, 2.43, 76, 48, 23],
|
||||
[31, 12, 30, 0.5, 32, 16, 24],
|
||||
[42, 27, 43, 1, 53, 22, 25],
|
||||
[154, 117, 157, 3.05, 92, 58, 26],
|
||||
[234, 185, 230, 4.09, 123, 69, 27],
|
||||
[160, 120, 186, 2.77, 91, 50, 28]
|
||||
],
|
||||
dataGZ: [
|
||||
[84, 94, 140, 2.238, 68, 18, 22],
|
||||
[93, 77, 104, 1.165, 53, 7, 23],
|
||||
[99, 130, 227, 3.97, 55, 15, 24],
|
||||
[146, 84, 139, 1.094, 40, 17, 25],
|
||||
[113, 108, 137, 1.481, 48, 15, 26],
|
||||
[81, 48, 62, 1.619, 26, 3, 27],
|
||||
[56, 48, 68, 1.336, 37, 9, 28]
|
||||
],
|
||||
dataSH: [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
[65, 27, 78, 0.86, 45, 29, 2],
|
||||
[83, 60, 84, 1.09, 73, 27, 3],
|
||||
[109, 81, 121, 1.28, 68, 51, 4],
|
||||
[106, 77, 114, 1.07, 55, 51, 5],
|
||||
[109, 81, 121, 1.28, 68, 51, 6],
|
||||
[106, 77, 114, 1.07, 55, 51, 7]
|
||||
]
|
||||
});
|
||||
intervalInstance = setInterval(() => {
|
||||
const data = cdata.indicatorData as any;
|
||||
cdata.indicatorData = data.map((e) => {
|
||||
return { value: e.max, name: e.name };
|
||||
});
|
||||
}, 1000);
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalInstance);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -20,8 +20,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
import Chart from "./chart/index.tsx";
|
||||
|
||||
import Chart from "./chart/index.vue";
|
||||
const config = reactive({
|
||||
data: [
|
||||
{ name: "南阳", value: 167 },
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export const WEEK = ["周日", "周一", "周二", "周三", "周四", "周五",
|
|||
|
||||
// 主题名称与副标题名称
|
||||
export const title = "大数据可视化平台";
|
||||
export const subtitle = ["数据分析1", "数据分析2", "vue-big-screen"];
|
||||
export const subtitle = ["数据分析1", "数据分析2", "数据分析3"];
|
||||
|
||||
export const moduleInfo: ModuleInfo = [
|
||||
// 中间的几个模块
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<div class="content-box">
|
||||
<div>
|
||||
<dv-border-box-12>
|
||||
<!-- <CenterLeft1 /> -->
|
||||
<CenterLeft1 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
<!-- 中间 -->
|
||||
<div>
|
||||
<!-- <CenterRight1 /> -->
|
||||
<CenterRight1 />
|
||||
</div>
|
||||
<div>
|
||||
<dv-border-box-13>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<BottomLeft />
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-12>
|
||||
<!-- <BottomRight /> -->
|
||||
<BottomRight />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,14 +111,14 @@
|
|||
import { title, subtitle, moduleInfo } from "./constant/index";
|
||||
// 有用的 已修改的组件
|
||||
import BottomLeft from "./components/bottomLeft/index.vue";
|
||||
import BottomRight from './components/bottomRight/index.vue'
|
||||
import CenterRight2 from "./components/centerRight2/index.vue";
|
||||
|
||||
import CenterLeft1 from './components/centerLeft1/index.vue'
|
||||
import CenterRight1 from "./components/centerRight1/index.vue";
|
||||
// 未修改的组件
|
||||
// import CenterLeft1 from "./components/centerLeft1/index.vue";
|
||||
// import CenterLeft2 from "./components/centerLeft2/index.vue";
|
||||
// import Center from "./components/center/index.vue";
|
||||
// import CenterRight1 from "./components/centerRight1/index.vue";
|
||||
// import BottomRight from "./components/bottomRight/index.vue";
|
||||
|
||||
|
||||
// * 颜色
|
||||
const decorationColors = ["#568aea", "#000000"];
|
||||
|
|
|
|||
Loading…
Reference in New Issue