You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
446 lines
12 KiB
446 lines
12 KiB
<template> |
|
<div> |
|
<div class="sys_charts" ref="sys_charts"></div> |
|
</div> |
|
</template> |
|
<script> |
|
import * as echarts from "echarts"; |
|
export default { |
|
props: { |
|
hostData: { |
|
type: Array, |
|
default: () => [], |
|
}, |
|
}, |
|
data() { |
|
return { |
|
chartInstance: null, |
|
option: {}, |
|
loadPercent: "", |
|
}; |
|
}, |
|
watch: { |
|
hostData: { |
|
immediate: true, // 页面加载时立即触发一次监听 |
|
handler(newVal, oldVal) { |
|
if (newVal) { |
|
console.log("charts传值", newVal); |
|
let data = newVal; |
|
if (data.length > 0) { |
|
data.forEach((item) => { |
|
if (item.paramType === "28") { |
|
this.loadPercent = item.curValue; |
|
} |
|
}); |
|
this.$nextTick(() => { |
|
// 销毁现有的 ECharts 实例 |
|
if (this.chartInstance) { |
|
this.chartInstance.dispose(); |
|
} |
|
// 重新初始化图表 |
|
this.initChart(); |
|
}); |
|
} else { |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
mounted() { |
|
this.initChart(); |
|
this.screenAdapter(); |
|
window.addEventListener("resize", this.screenAdapter); |
|
}, |
|
destroyed() { |
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
|
window.removeEventListener("resize", this.screenAdapter); |
|
}, |
|
methods: { |
|
// 计算颜色设置的函数 |
|
getAxisLineColor(useData, maxData) { |
|
// 计算阈值 |
|
// 真实值大于最大值的0.75才使用颜色渐变 |
|
const threshold = maxData * 0.75; |
|
// 判断实际值是否超过阈值 |
|
if (useData > threshold) { |
|
return [ |
|
[ |
|
useData / maxData, |
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|
{ offset: 0, color: "rgba(0,127,208,1)" }, |
|
{ offset: 0.6, color: "rgba(0,127,208,1)" }, |
|
{ offset: 1, color: "rgba(69, 235, 167,0.5)" }, |
|
]), |
|
], |
|
[1, "rgba(28,128,245,.0)"], |
|
]; |
|
} else { |
|
return [ |
|
[ |
|
useData / maxData, |
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|
{ offset: 0, color: "rgba(0,127,208,1)" }, |
|
{ offset: 0.5, color: "rgba(0,127,208,1)" }, |
|
{ offset: 1, color: "rgba(0,127,208,1)" }, |
|
]), |
|
], |
|
[1, "rgba(28,128,245,.0)"], |
|
]; |
|
} |
|
}, |
|
//初始化chartInstance2对象 折线图 |
|
initChart() { |
|
var value = 80; |
|
// 初始化数据 |
|
const dataArr = this.loadPercent; //负载数据 |
|
const dataX = 100; |
|
const titleFontSize = this.$refs.sys_charts.offsetWidth / 20; |
|
this.chartInstance = echarts.init(this.$refs.sys_charts); |
|
this.option = { |
|
backgroundStyle: { |
|
borderWidth: 1, |
|
color: "transparent", |
|
}, |
|
title: [ |
|
{ |
|
text: `${dataArr} %`, |
|
bottom: titleFontSize, |
|
left: "center", |
|
textStyle: { |
|
fontSize: titleFontSize * 1.5, //标记 |
|
color: "#ffff", |
|
fontWeight: 800, |
|
}, |
|
triggerEvent: true, |
|
}, |
|
], |
|
legend: { |
|
show: false, |
|
}, |
|
series: [ |
|
{ |
|
name: "最外部进度条", |
|
type: "gauge", |
|
radius: "99%", |
|
splitNumber: 10, |
|
axisLine: { |
|
lineStyle: { |
|
color: [ |
|
[ |
|
dataArr / dataX, |
|
{ |
|
type: "linear", |
|
x: 0, |
|
y: 1, |
|
x2: 0.5, |
|
y2: 0.5, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "rgba(0,0,0,0)", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 0.8, |
|
color: "#195b9d", // 100% 处的颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#0a2256", // 100% 处的颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
], |
|
[1, "#083158"], |
|
], |
|
width: 5, //标记 |
|
}, |
|
}, |
|
axisLabel: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
show: false, |
|
}, |
|
detail: { |
|
show: false, |
|
}, |
|
title: { |
|
// 标题 |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
name: "title", |
|
value: dataArr, |
|
}, |
|
], |
|
pointer: { |
|
show: false, |
|
}, |
|
animationDuration: 4000, |
|
}, |
|
{ |
|
name: "刻度尺", |
|
type: "gauge", |
|
radius: "88%", |
|
splitNumber: 10, // 刻度数量 |
|
min: 0, // 最小刻度 |
|
max: dataX, // 最大刻度 |
|
// 分隔线 |
|
splitLine: { |
|
show: true, |
|
length: 12, |
|
lineStyle: { |
|
width: 3, |
|
color: "#12E5FE", |
|
}, |
|
}, |
|
// 刻度线 |
|
axisTick: { |
|
show: true, |
|
splitNumber: 10, |
|
length: 5, |
|
lineStyle: { |
|
color: "#12E5FE", |
|
width: 2, |
|
}, |
|
}, |
|
// 刻度标签 |
|
axisLabel: { |
|
distance: -8, //刻度数字离轴线的距离 |
|
color: "#CEF3FE", |
|
fontSize: "6", |
|
fontWeight: 600, |
|
}, |
|
detail: { |
|
show: false, |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
width: -10, //刻度离轴线的距离 |
|
color: [ |
|
[ |
|
1, |
|
{ |
|
type: "radial", |
|
x: 0.5, |
|
y: 0.6, |
|
r: 0.6, |
|
colorStops: [ |
|
{ |
|
offset: 0.85, |
|
color: "#031F46", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 0.93, |
|
color: "#060d25", // 100% 处的颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#12D7EF", // 100% 处的颜色 |
|
}, |
|
], |
|
}, |
|
], |
|
], |
|
}, |
|
}, |
|
}, |
|
{ |
|
name: "外部指针", |
|
type: "gauge", |
|
radius: "90%", |
|
axisLine: { |
|
lineStyle: { |
|
color: [ |
|
[dataArr / dataX - 0.001, "rgba(0,0,0,0)"], |
|
[dataArr / dataX + 0.003, "#e43c59"], |
|
[1, "rgba(0,0,0,0)"], |
|
], |
|
width: 33, |
|
}, |
|
}, |
|
axisLabel: { |
|
show: false, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
splitLine: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
show: false, |
|
}, |
|
detail: { |
|
show: false, |
|
}, |
|
title: { |
|
// 标题 |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
name: "title", |
|
value: dataArr, |
|
}, |
|
], |
|
pointer: { |
|
show: false, |
|
}, |
|
}, |
|
{ |
|
name: "内层带指针", |
|
type: "gauge", |
|
radius: "60%", |
|
splitNumber: 10, // 刻度数量 |
|
min: 0, // 最小刻度 |
|
max: dataX, // 最大刻度 |
|
// 仪表盘轴线相关配置 |
|
axisLine: { |
|
lineStyle: { |
|
color: [ |
|
[ |
|
1, |
|
{ |
|
type: "radial", |
|
x: 0.5, |
|
y: 0.59, |
|
r: 0.6, |
|
colorStops: [ |
|
{ |
|
offset: 0.72, |
|
color: "#032046", |
|
}, |
|
{ |
|
offset: 0.94, |
|
color: "#086989", |
|
}, |
|
{ |
|
offset: 0.98, |
|
color: "#0FAFCB", |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#0EA4C1", |
|
}, |
|
], |
|
}, |
|
], |
|
], |
|
width: 1000, |
|
}, |
|
}, |
|
// 分隔线 |
|
splitLine: { |
|
show: false, |
|
}, |
|
// 刻度线 |
|
axisTick: { |
|
show: false, |
|
}, |
|
// 刻度标签 |
|
axisLabel: { |
|
show: false, |
|
}, |
|
// 仪表盘指针 |
|
pointer: { |
|
show: true, |
|
length: "95%", |
|
width: 5, // 指针粗细 |
|
}, |
|
// 仪表盘指针样式 |
|
itemStyle: { |
|
color: "#01eaf8", |
|
}, |
|
data: [ |
|
{ |
|
value: dataArr, |
|
}, |
|
], |
|
detail: { |
|
show: false, |
|
}, |
|
}, |
|
// 中间半圆装饰 |
|
{ |
|
type: "gauge", |
|
radius: "110%", // 大小 |
|
center: ["50%", "127%"], |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
// 轴线样式 |
|
width: 4, // 宽度 |
|
color: [ |
|
[ |
|
1, |
|
{ |
|
type: "radial", |
|
x: 0.5, |
|
y: 0, |
|
r: 0.6, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#00f3f9", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#000", // 100% 处的颜色 |
|
}, |
|
], |
|
}, |
|
], |
|
], |
|
}, |
|
}, |
|
axisTick: { |
|
// 刻度 |
|
show: false, |
|
}, |
|
splitLine: { |
|
// 分割线 |
|
show: false, |
|
}, |
|
axisLabel: { |
|
// 刻度标签 |
|
show: false, |
|
}, |
|
pointer: { |
|
// 仪表盘指针 |
|
show: false, |
|
}, |
|
detail: { |
|
// 仪表盘详情 |
|
show: false, |
|
}, |
|
}, |
|
], |
|
}; |
|
//把配置项给实例对象 |
|
this.chartInstance.setOption(this.option, true); |
|
}, |
|
screenAdapter() { |
|
const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; |
|
const adapterOption = {}; |
|
this.chartInstance.setOption(adapterOption); |
|
this.chartInstance.resize(); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.sys_charts { |
|
width: 2rem; |
|
height: 2rem; |
|
} |
|
</style> |
|
|
|
|