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" />
|
<i class="iconfont icon-chart-area" />
|
||||||
</span>
|
</span>
|
||||||
<div class="d-flex">
|
<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>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Chart from "./chart/index";
|
import Chart from "./chart/index.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" class>
|
<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">
|
<script lang="ts">
|
||||||
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
|
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
|
||||||
import Chart from "./chart/index";
|
import Chart from "./chart/index.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
Chart,
|
Chart,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
// 下层数据
|
// 下层数据
|
||||||
const dataArr = [
|
const dataArr = reactive([
|
||||||
{
|
{
|
||||||
number: 150,
|
number: 150,
|
||||||
text: "今日构建总量",
|
text: "今日构建总量",
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
number: 571,
|
number: 571,
|
||||||
text: "未通过数量",
|
text: "未通过数量",
|
||||||
},
|
},
|
||||||
];
|
]);
|
||||||
// 对应图标
|
// 对应图标
|
||||||
const iconFont = [
|
const iconFont = [
|
||||||
"icon-diagnose",
|
"icon-diagnose",
|
||||||
|
|
@ -74,8 +74,8 @@
|
||||||
"icon-cloudupload",
|
"icon-cloudupload",
|
||||||
"icon-clouddownload",
|
"icon-clouddownload",
|
||||||
];
|
];
|
||||||
const numberData = reactive([]);
|
const numberData:any = reactive([]);
|
||||||
let intervalInstance = null;
|
let intervalInstance:any = null;
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setData();
|
setData();
|
||||||
changeTiming();
|
changeTiming();
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
text: e.text,
|
text: e.text,
|
||||||
});
|
} );
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -103,7 +103,7 @@
|
||||||
}, 2000);
|
}, 2000);
|
||||||
};
|
};
|
||||||
const changeNumber = () => {
|
const changeNumber = () => {
|
||||||
numberData.forEach((item, index) => {
|
numberData.forEach((item:any, index:any) => {
|
||||||
item.config.number[0] += ++index;
|
item.config.number[0] += ++index;
|
||||||
item.config = { ...item.config };
|
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">
|
<script setup lang="ts">
|
||||||
import { reactive } from "vue";
|
import { reactive } from "vue";
|
||||||
import Chart from "./chart/index.tsx";
|
import Chart from "./chart/index.vue";
|
||||||
|
|
||||||
const config = reactive({
|
const config = reactive({
|
||||||
data: [
|
data: [
|
||||||
{ name: "南阳", value: 167 },
|
{ name: "南阳", value: 167 },
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ export const WEEK = ["周日", "周一", "周二", "周三", "周四", "周五",
|
||||||
|
|
||||||
// 主题名称与副标题名称
|
// 主题名称与副标题名称
|
||||||
export const title = "大数据可视化平台";
|
export const title = "大数据可视化平台";
|
||||||
export const subtitle = ["数据分析1", "数据分析2", "vue-big-screen"];
|
export const subtitle = ["数据分析1", "数据分析2", "数据分析3"];
|
||||||
|
|
||||||
export const moduleInfo: ModuleInfo = [
|
export const moduleInfo: ModuleInfo = [
|
||||||
// 中间的几个模块
|
// 中间的几个模块
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@
|
||||||
<div class="content-box">
|
<div class="content-box">
|
||||||
<div>
|
<div>
|
||||||
<dv-border-box-12>
|
<dv-border-box-12>
|
||||||
<!-- <CenterLeft1 /> -->
|
<CenterLeft1 />
|
||||||
</dv-border-box-12>
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 中间 -->
|
<!-- 中间 -->
|
||||||
<div>
|
<div>
|
||||||
<!-- <CenterRight1 /> -->
|
<CenterRight1 />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<dv-border-box-13>
|
<dv-border-box-13>
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
<BottomLeft />
|
<BottomLeft />
|
||||||
</dv-border-box-13>
|
</dv-border-box-13>
|
||||||
<dv-border-box-12>
|
<dv-border-box-12>
|
||||||
<!-- <BottomRight /> -->
|
<BottomRight />
|
||||||
</dv-border-box-12>
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -111,14 +111,14 @@
|
||||||
import { title, subtitle, moduleInfo } from "./constant/index";
|
import { title, subtitle, moduleInfo } from "./constant/index";
|
||||||
// 有用的 已修改的组件
|
// 有用的 已修改的组件
|
||||||
import BottomLeft from "./components/bottomLeft/index.vue";
|
import BottomLeft from "./components/bottomLeft/index.vue";
|
||||||
|
import BottomRight from './components/bottomRight/index.vue'
|
||||||
import CenterRight2 from "./components/centerRight2/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 CenterLeft2 from "./components/centerLeft2/index.vue";
|
||||||
// import Center from "./components/center/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"];
|
const decorationColors = ["#568aea", "#000000"];
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue