Browse Source

修改首页饼图数据

meizhou
selia-zx 2 weeks ago
parent
commit
d99ad9947d
  1. 492
      src/views/components/aircAndWindcMeter.vue
  2. 491
      src/views/components/temMeter.vue

492
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} <br/>{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} <br/>{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} <br/>{b} : {c} ({d}%)",
},
//
legend: {
//
right: 0,
//
top: "middle",
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
// nameseries
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
},
},
},
],
};

491
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} <br/>{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} <br/>{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} <br/>{b} : {c} ({d}%)",
},
//
legend: {
//
right: 0,
//
top: "middle",
itemWidth: titleFontSize,
itemHeight: titleFontSize,
itemGap: titleFontSize * 2,
formatter: function (name) {
var arr = [];
// nameseries
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
},
},
},
],
};

Loading…
Cancel
Save