From d99ad9947d6d0ec0f8209e4f7458e53a0718b1fb Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Tue, 17 Jun 2025 09:11:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E9=A5=BC?=
=?UTF-8?q?=E5=9B=BE=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/components/aircAndWindcMeter.vue | 492 +++++++++++++--------
src/views/components/temMeter.vue | 491 ++++++++++++--------
2 files changed, 608 insertions(+), 375 deletions(-)
diff --git a/src/views/components/aircAndWindcMeter.vue b/src/views/components/aircAndWindcMeter.vue
index 59f8f37..b149b0e 100644
--- a/src/views/components/aircAndWindcMeter.vue
+++ b/src/views/components/aircAndWindcMeter.vue
@@ -43,12 +43,13 @@ export default {
this.allData = this.chartData1 + this.chartData2;
});
this.$nextTick(() => {
- // 销毁现有的 ECharts 实例
- if (this.chartInstance) {
- this.chartInstance.dispose();
- }
- // 重新初始化图表
- this.initChart();
+ // // 销毁现有的 ECharts 实例
+ // if (this.chartInstance) {
+ // this.chartInstance.dispose();
+ // }
+ // // 重新初始化图表
+ // this.initChart();
+ this.echartsData();
});
}
},
@@ -75,39 +76,214 @@ export default {
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
- //初始化chartInstance对象
- initChart() {
- var dataStyle = {
- normal: {
- label: {
- show: false,
+ echartsData() {
+ console.log("父组件传过来的值", this.energyMes);
+ if (this.energyMes) {
+ const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+ const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表
+ const adapterOption = {
+ tooltip: {
+ trigger: "item",
+ formatter: "{a}
{b} : {c} ({d}%)",
},
- labelLine: {
- show: false,
+ legend: {
+ itemWidth: titleFontSize,
+ itemHeight: titleFontSize,
+ itemGap: titleFontSize * 2,
+ formatter: function (name) {
+ var arr = [];
+ let data = adapterOption.series[0].data;
+ var index = 0;
+ var total = 0;
+ // 计算总和
+ for (var i = 0; i < data.length; i++) {
+ total += data[i].value;
+ if (data[i].name == name) {
+ index = i;
+ }
+ }
+ // 检查当前项的值是否为 0
+ var percentage =
+ data[index].value === 0
+ ? "0.00"
+ : ((data[index].value / total) * 100).toFixed(2);
+ arr.push(
+ "{name|" + name + "}",
+ "{text|" + " " + ":" + " " + "}",
+ "{value|" + data[index].value + " " + "}",
+ "{percentage|" + " " + percentage + "%}"
+ );
+ return arr.join("");
+ },
+ textStyle: {
+ color: function (name) {
+ const dataSeries = adapterOption.series[1].data; // 数据圆的data
+ const index = dataSeries.findIndex(
+ (item) => item.name === name
+ );
+ const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表
+ return colorList[index];
+ },
+ rich: {
+ name: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ text: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ value: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ percentage: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ },
+ },
},
- shadowBlur: 40,
- borderWidth: 10,
- shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
- },
- };
- var placeHolderStyle = {
- normal: {
- color: "#013e79",
- label: {
- show: false,
+ series: [
+ {
+ name: "风柜系统:",
+ data: [
+ { value: this.chartData1, name: "运行数" },
+ { value: this.chartData2, name: "停止数" },
+ ],
+ itemStyle: {
+ color: function (params) {
+ var colorList = ["#0882ff", "#ffe21e"];
+ return colorList[params.dataIndex];
+ },
+ // borderWidth: 5,
+ borderColor: "#002a56",
+ },
+ },
+ {
+ data: [
+ { value: this.chartData1, name: "运行数" },
+ { value: this.chartData2, name: "停止数" },
+ ],
+ },
+ ],
+ };
+ this.chartInstance.setOption(adapterOption);
+ this.chartInstance.resize();
+ } else {
+ const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+ const adapterOption = {
+ tooltip: {
+ trigger: "item",
+ formatter: "{a}
{b} : {c} ({d}%)",
},
- labelLine: {
- show: false,
+ legend: {
+ itemWidth: titleFontSize,
+ itemHeight: titleFontSize,
+ itemGap: titleFontSize * 2,
+ formatter: function (name) {
+ var arr = [];
+ let data = adapterOption.series[0].data;
+ var index = 0;
+ var total = 0;
+ // 计算总和
+ for (var i = 0; i < data.length; i++) {
+ total += data[i].value;
+ if (data[i].name == name) {
+ index = i;
+ }
+ }
+ // 检查当前项的值是否为 0
+ var percentage =
+ data[index].value === 0
+ ? "0.00"
+ : ((data[index].value / total) * 100).toFixed(2);
+ arr.push(
+ "{name|" + name + "}",
+ "{text|" + " " + ":" + " " + "}",
+ "{value|" + data[index].value + " " + "}",
+ "{percentage|" + " " + percentage + "%}"
+ );
+ return arr.join("");
+ },
+ textStyle: {
+ color: function (name) {
+ const dataSeries = adapterOption.series[1].data; // 数据圆的data
+ const index = dataSeries.findIndex(
+ (item) => item.name === name
+ );
+ const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表
+ return colorList[index];
+ },
+ rich: {
+ name: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ text: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ value: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ percentage: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ },
+ },
},
- },
- emphasis: {
- color: "#013e79",
- },
- };
- let that = this;
- const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+ series: [
+ {
+ name: "风柜系统:",
+ data: [
+ { value: 0, name: "运行数" },
+ { value: 0, name: "停止数" },
+ ],
+ itemStyle: {
+ color: function (params) {
+ var colorList = ["#0882ff", "#ffe21e"];
+ return colorList[params.dataIndex];
+ },
+ // borderWidth: 5,
+ borderColor: "#002a56",
+ },
+ },
+ {
+ data: [
+ { value: 0, name: "运行数" },
+ { value: 0, name: "停止数" },
+ ],
+ },
+ ],
+ };
+ this.chartInstance.setOption(adapterOption);
+ this.chartInstance.resize();
+ }
+ },
+ //初始化chartInstance对象
+ initChart() {
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
+ //环形图中间文字
title: {
subtext: "运行状态",
textStyle: {
@@ -117,190 +293,130 @@ export default {
color: "#ffffff",
},
textAlign: "center",
- x: "31%",
- y: "43%", //距离上边的距离
+ x: "49%",
+ y: "36%", //距离上边的距离
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)",
},
+ //图例
legend: {
- // 设置图例显示在右侧
- right: 0,
- // 设置图例垂直居中
- top: "middle",
- itemWidth: titleFontSize,
- itemHeight: titleFontSize,
- itemGap: titleFontSize * 2,
- formatter: function (name) {
- var arr = [];
- // 动态查找包含当前name的series索引
- let seriesIndex = -1;
- for (let i = 0; i < that.option.series.length; i++) {
- const seriesData = that.option.series[i].data;
- if (seriesData.some((item) => item.name === name)) {
- seriesIndex = i;
- break;
- }
- }
-
- if (seriesIndex === -1) return name; // 未找到匹配系列
-
- const data = that.option.series[seriesIndex].data; // 使用动态索引
- let total = that.allData;
- let currentValue = 0;
-
- // 计算总和和当前值
- data.forEach((item) => {
- if (item.name) {
- // 排除空名的占位数据
- total += item.value;
- if (item.name === name) {
- currentValue = item.value;
- }
- }
- });
-
- const percentage =
- currentValue === 0
- ? "0.00"
- : ((currentValue / total) * 100).toFixed(2);
-
- arr.push(
- "{name|" + name + "}",
- "{text|: \n}",
- "{value|" + currentValue + " }",
- "{percentage| " + percentage + "%}"
- );
- return arr.join("");
- },
+ orient: "horizontal", // 水平布局
+ bottom: 0, // 位于最底部
+ left: "center", // 水平居中
+ //图例文字颜色
textStyle: {
- color: function (name) {
- // 动态匹配系列颜色
- for (let i = 0; i < that.option.series.length; i++) {
- const item = that.option.series[i].data.find(
- (d) => d.name === name
- );
- if (item) {
- // 返回实际颜色（处理渐变色）
- return (
- item.itemStyle?.normal?.color?.colorStops?.[0]?.color ||
- item.itemStyle?.color ||
- "#ffffff"
- );
- }
- }
- return "#ffffff"; // 默认颜色
+ color: "#ffffff",
+ // fontSize: 18,
+ },
+ },
+ series: [
+ // 数据圆
+ {
+ name: "风柜系统:",
+ type: "pie",
+ radius: ["60%", "72%"],
+ center: ["50%", "44%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
},
- rich: {
- name: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- // 增加行高来扩大间隔
- lineHeight: titleFontSize * 3.3,
- },
- text: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- },
- value: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- // color: function (params) {
- // let data = adapterOption.series[1].data;
- // return data.itemStyle.color({ dataIndex: params.dataIndex });
- // },
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: function (params) {
+ var colorList = ["#0882ff", "#ffe21e"];
+ return colorList[params.dataIndex];
},
- percentage: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- // color: function (params) {
- // let data = adapterOption.series[1].data;
- // return data.itemStyle.color({ dataIndex: params.dataIndex });
- // },
+ borderWidth: 5,
+ borderColor: "#002a56",
+ },
+ z: 10, //设置层级更高,否则会被阴影圆遮住
+ },
+ // 阴影圆
+ {
+ type: "pie",
+ radius: ["50%", "62%"],
+ center: ["50%", "44%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
+ },
+ silent: true,
+ labelLine: {
+ show: false,
+ },
+ //颜色
+ itemStyle: {
+ color: function (colors) {
+ var colorList = ["#02427f","#385f5c", ];
+ return colorList[colors.dataIndex];
},
},
+ z: 15,
},
- },
- series: [
+ // 内圈边框
{
- name: "风柜系统",
+ // 颜色
+ color: ["#305376"],
type: "pie",
- clockWise: false,
- radius: [66, 80],
- center: ["32%", "50%"],
- itemStyle: dataStyle,
- hoverAnimation: false,
- startAngle: 90,
+ silent: true, //鼠标移入不显示内容，不触发鼠标事件
+ // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
+ // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
+ // 这里开启silent: true, 就达到效果了
+ // center与非内圈一致
+ radius: ["38%", "39%"],
+ center: ["50%", "44%"],
label: {
- borderRadius: "10",
+ show: false,
},
data: [
{
- value: this.chartData1,
- name: "运行数",
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#277dff",
- },
- {
- offset: 1,
- color: "#277dff",
- },
- ]),
- },
- },
- },
- {
- value: this.allData,
+ value: 0,
name: "",
- tooltip: {
- show: false,
- },
- itemStyle: placeHolderStyle,
+ itemStyle: {},
},
],
},
+ // 最里面渐变小圆
{
- name: "风柜系统",
+ // 颜色
type: "pie",
- clockWise: false,
- radius: [36, 50],
- center: ["32%", "50%"],
- itemStyle: dataStyle,
- hoverAnimation: false,
- startAngle: 90,
+ silent: true, //鼠标移入不显示内容，不触发鼠标事件
+ // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
+ // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
+ // 这里开启silent: true, 就达到效果了
+ // center与非内圈一致
+ radius: ["0%", "38%"],
+ center: ["50%", "44%"],
+ label: {
+ show: false,
+ },
data: [
{
- value: this.chartData2,
- name: "停止数",
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#9ab7dc",
- },
- {
- offset: 1,
- color: "#9ab7dc",
- },
- ]),
- },
- },
- },
- {
- value: this.allData,
+ value: 0,
name: "",
- tooltip: {
- show: false,
- },
- itemStyle: placeHolderStyle,
+ itemStyle: {},
},
],
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: "#002a55" }, // 0% 处的颜色
+ { offset: 1, color: "#0a457a" }, // 100% 处的颜色
+ ],
+ global: false, // 缺省为 false
+ },
+ },
},
],
};
diff --git a/src/views/components/temMeter.vue b/src/views/components/temMeter.vue
index cfa61bb..8d657e9 100644
--- a/src/views/components/temMeter.vue
+++ b/src/views/components/temMeter.vue
@@ -43,12 +43,13 @@ export default {
this.allData = this.chartData1 + this.chartData2;
});
this.$nextTick(() => {
- // 销毁现有的 ECharts 实例
- if (this.chartInstance) {
- this.chartInstance.dispose();
- }
- // 重新初始化图表
- this.initChart();
+ // // 销毁现有的 ECharts 实例
+ // if (this.chartInstance) {
+ // this.chartInstance.dispose();
+ // }
+ // // 重新初始化图表
+ // this.initChart();
+ this.echartsData();
});
}
},
@@ -75,39 +76,214 @@ export default {
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
- //初始化chartInstance对象
- initChart() {
- var dataStyle = {
- normal: {
- label: {
- show: false,
+ echartsData() {
+ console.log("父组件传过来的值", this.energyMes);
+ if (this.energyMes) {
+ const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+ const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表
+ const adapterOption = {
+ tooltip: {
+ trigger: "item",
+ formatter: "{a}
{b} : {c} ({d}%)",
},
- labelLine: {
- show: false,
+ legend: {
+ itemWidth: titleFontSize,
+ itemHeight: titleFontSize,
+ itemGap: titleFontSize * 2,
+ formatter: function (name) {
+ var arr = [];
+ let data = adapterOption.series[0].data;
+ var index = 0;
+ var total = 0;
+ // 计算总和
+ for (var i = 0; i < data.length; i++) {
+ total += data[i].value;
+ if (data[i].name == name) {
+ index = i;
+ }
+ }
+ // 检查当前项的值是否为 0
+ var percentage =
+ data[index].value === 0
+ ? "0.00"
+ : ((data[index].value / total) * 100).toFixed(2);
+ arr.push(
+ "{name|" + name + "}",
+ "{text|" + " " + ":" + " " + "}",
+ "{value|" + data[index].value + " " + "}",
+ "{percentage|" + " " + percentage + "%}"
+ );
+ return arr.join("");
+ },
+ textStyle: {
+ color: function (name) {
+ const dataSeries = adapterOption.series[1].data; // 数据圆的data
+ const index = dataSeries.findIndex(
+ (item) => item.name === name
+ );
+ const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
+ return colorList[index];
+ },
+ rich: {
+ name: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ text: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ value: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ percentage: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ },
+ },
},
- shadowBlur: 40,
- borderWidth: 10,
- shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
- },
- };
- var placeHolderStyle = {
- normal: {
- color: "#393d50",
- label: {
- show: false,
+ series: [
+ {
+ name: "温度监测:",
+ data: [
+ { value: this.chartData1, name: "在线数" },
+ { value: this.chartData2, name: "离线数" },
+ ],
+ itemStyle: {
+ color: function (params) {
+ var colorList = ["#2df499", "#08c8ff"];
+ return colorList[params.dataIndex];
+ },
+ // borderWidth: 5,
+ borderColor: "#002a56",
+ },
+ },
+ {
+ data: [
+ { value: this.chartData1, name: "在线数" },
+ { value: this.chartData2, name: "离线数" },
+ ],
+ },
+ ],
+ };
+ this.chartInstance.setOption(adapterOption);
+ this.chartInstance.resize();
+ } else {
+ const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+ const adapterOption = {
+ tooltip: {
+ trigger: "item",
+ formatter: "{a}
{b} : {c} ({d}%)",
},
- labelLine: {
- show: false,
+ legend: {
+ itemWidth: titleFontSize,
+ itemHeight: titleFontSize,
+ itemGap: titleFontSize * 2,
+ formatter: function (name) {
+ var arr = [];
+ let data = adapterOption.series[0].data;
+ var index = 0;
+ var total = 0;
+ // 计算总和
+ for (var i = 0; i < data.length; i++) {
+ total += data[i].value;
+ if (data[i].name == name) {
+ index = i;
+ }
+ }
+ // 检查当前项的值是否为 0
+ var percentage =
+ data[index].value === 0
+ ? "0.00"
+ : ((data[index].value / total) * 100).toFixed(2);
+ arr.push(
+ "{name|" + name + "}",
+ "{text|" + " " + ":" + " " + "}",
+ "{value|" + data[index].value + " " + "}",
+ "{percentage|" + " " + percentage + "%}"
+ );
+ return arr.join("");
+ },
+ textStyle: {
+ color: function (name) {
+ const dataSeries = adapterOption.series[1].data; // 数据圆的data
+ const index = dataSeries.findIndex(
+ (item) => item.name === name
+ );
+ const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
+ return colorList[index];
+ },
+ rich: {
+ name: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ text: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ },
+ value: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ percentage: {
+ align: "left",
+ fontSize: titleFontSize * 1.6,
+ // color: function (params) {
+ // let data = adapterOption.series[1].data;
+ // return data.itemStyle.color({ dataIndex: params.dataIndex });
+ // },
+ },
+ },
+ },
},
- },
- emphasis: {
- color: "#393d50",
- },
- };
- let that = this;
- const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+ series: [
+ {
+ name: "温度监测:",
+ data: [
+ { value: 0, name: "在线数" },
+ { value: 0, name: "离线数" },
+ ],
+ itemStyle: {
+ color: function (params) {
+ var colorList = ["#2df499", "#08c8ff"];
+ return colorList[params.dataIndex];
+ },
+ // borderWidth: 5,
+ borderColor: "#002a56",
+ },
+ },
+ {
+ data: [
+ { value: 0, name: "在线数" },
+ { value: 0, name: "离线数" },
+ ],
+ },
+ ],
+ };
+ this.chartInstance.setOption(adapterOption);
+ this.chartInstance.resize();
+ }
+ },
+ //初始化chartInstance对象
+ initChart() {
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
+ //环形图中间文字
title: {
subtext: "在线状态",
textStyle: {
@@ -117,189 +293,130 @@ export default {
color: "#ffffff",
},
textAlign: "center",
- x: "31%",
- y: "43%", //距离上边的距离
+ x: "49%",
+ y: "36%", //距离上边的距离
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)",
},
+ //图例
legend: {
- // 设置图例显示在右侧
- right: 0,
- // 设置图例垂直居中
- top: "middle",
- itemWidth: titleFontSize,
- itemHeight: titleFontSize,
- itemGap: titleFontSize * 2,
- formatter: function (name) {
- var arr = [];
- // 动态查找包含当前name的series索引
- let seriesIndex = -1;
- for (let i = 0; i < that.option.series.length; i++) {
- const seriesData = that.option.series[i].data;
- if (seriesData.some((item) => item.name === name)) {
- seriesIndex = i;
- break;
- }
- }
-
- if (seriesIndex === -1) return name; // 未找到匹配系列
-
- const data = that.option.series[seriesIndex].data; // 使用动态索引
- let total = that.allData;
- let currentValue = 0;
-
- // 计算总和和当前值
- data.forEach((item) => {
- if (item.name) {
- // 排除空名的占位数据
- if (item.name === name) {
- currentValue = item.value;
- }
- }
- });
-
- const percentage =
- currentValue === 0
- ? "0.00"
- : ((currentValue / total) * 100).toFixed(2);
-
- arr.push(
- "{name|" + name + "}",
- "{text|: \n}",
- "{value|" + currentValue + " }",
- "{percentage| " + percentage + "%}"
- );
- return arr.join("");
- },
+ orient: "horizontal", // 水平布局
+ bottom: 0, // 位于最底部
+ left: "center", // 水平居中
+ //图例文字颜色
textStyle: {
- color: function (name) {
- // 动态匹配系列颜色
- for (let i = 0; i < that.option.series.length; i++) {
- const item = that.option.series[i].data.find(
- (d) => d.name === name
- );
- if (item) {
- // 返回实际颜色（处理渐变色）
- return (
- item.itemStyle?.normal?.color?.colorStops?.[0]?.color ||
- item.itemStyle?.color ||
- "#ffffff"
- );
- }
- }
- return "#ffffff"; // 默认颜色
+ color: "#ffffff",
+ // fontSize: 18,
+ },
+ },
+ series: [
+ // 数据圆
+ {
+ name: "温度监测:",
+ type: "pie",
+ radius: ["60%", "72%"],
+ center: ["50%", "44%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
},
- rich: {
- name: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- // 增加行高来扩大间隔
- lineHeight: titleFontSize * 3.3,
- },
- text: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- },
- value: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- // color: function (params) {
- // let data = adapterOption.series[1].data;
- // return data.itemStyle.color({ dataIndex: params.dataIndex });
- // },
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: function (params) {
+ var colorList = ["#2df499", "#08c8ff"];
+ return colorList[params.dataIndex];
},
- percentage: {
- align: "left",
- fontSize: titleFontSize * 2.3,
- // color: function (params) {
- // let data = adapterOption.series[1].data;
- // return data.itemStyle.color({ dataIndex: params.dataIndex });
- // },
+ borderWidth: 5,
+ borderColor: "#002a56",
+ },
+ z: 10, //设置层级更高,否则会被阴影圆遮住
+ },
+ // 阴影圆
+ {
+ type: "pie",
+ radius: ["50%", "62%"],
+ center: ["50%", "44%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
+ },
+ silent: true,
+ labelLine: {
+ show: false,
+ },
+ //颜色
+ itemStyle: {
+ color: function (colors) {
+ var colorList = ["#09596b", "#024e7d"];
+ return colorList[colors.dataIndex];
},
},
+ z: 15,
},
- },
- series: [
+ // 内圈边框
{
- name: "温度监测",
+ // 颜色
+ color: ["#305376"],
type: "pie",
- clockWise: false,
- radius: [66, 80],
- center: ["32%", "50%"],
- itemStyle: dataStyle,
- hoverAnimation: false,
- startAngle: 90,
+ silent: true, //鼠标移入不显示内容，不触发鼠标事件
+ // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
+ // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
+ // 这里开启silent: true, 就达到效果了
+ // center与非内圈一致
+ radius: ["38%", "39%"],
+ center: ["50%", "44%"],
label: {
- borderRadius: "10",
+ show: false,
},
data: [
{
- value: this.chartData1,
- name: "在线数",
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#e87b4b",
- },
- {
- offset: 1,
- color: "#e87b4b",
- },
- ]),
- },
- },
- },
- {
- value: this.allData,
+ value: 0,
name: "",
- tooltip: {
- show: false,
- },
- itemStyle: placeHolderStyle,
+ itemStyle: {},
},
],
},
+ // 最里面渐变小圆
{
- name: "温度监测",
+ // 颜色
type: "pie",
- clockWise: false,
- radius: [36, 50],
- center: ["32%", "50%"],
- itemStyle: dataStyle,
- hoverAnimation: false,
- startAngle: 90,
+ silent: true, //鼠标移入不显示内容，不触发鼠标事件
+ // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
+ // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
+ // 这里开启silent: true, 就达到效果了
+ // center与非内圈一致
+ radius: ["0%", "38%"],
+ center: ["50%", "44%"],
+ label: {
+ show: false,
+ },
data: [
{
- value: this.chartData2,
- name: "离线数",
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#ffe21e",
- },
- {
- offset: 1,
- color: "#ffe21e",
- },
- ]),
- },
- },
- },
- {
- value: this.allData,
+ value: 0,
name: "",
- tooltip: {
- show: false,
- },
- itemStyle: placeHolderStyle,
+ itemStyle: {},
},
],
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: "#002a55" }, // 0% 处的颜色
+ { offset: 1, color: "#0a457a" }, // 100% 处的颜色
+ ],
+ global: false, // 缺省为 false
+ },
+ },
},
],
};