lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改首页饼图数据

meizhou
selia-zx 2 weeks ago
parent
bf2640958b
commit
d99ad9947d
2 changed files with 608 additions and 375 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 492
      src/views/components/aircAndWindcMeter.vue
  2. 491
      src/views/components/temMeter.vue

492
src/views/components/aircAndWindcMeter.vue
Unescape View File

@ -43,12 +43,13 @@ export default {
this.allData = this.chartData1 + this.chartData2; this.allData = this.chartData1 + this.chartData2;
}); });
this.$nextTick(() => { this.$nextTick(() => {
// 销毁现有的 ECharts 实例 // // 销毁现有的 ECharts 实例
if (this.chartInstance) { // if (this.chartInstance) {
this.chartInstance.dispose(); // this.chartInstance.dispose();
} // }
// 重新初始化图表 // // 重新初始化图表
this.initChart(); // this.initChart();
this.echartsData();
}); });
} }
}, },
@ -75,39 +76,214 @@ export default {
//手动的调用图标对象的resize才能产生效果 //手动的调用图标对象的resize才能产生效果
this.chartInstance.resize(); this.chartInstance.resize();
}, },
//初始化chartInstance对象 echartsData() {
initChart() { console.log("父组件传过来的值", this.energyMes);
var dataStyle = { if (this.energyMes) {
normal: { const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
label: { const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表
show: false, const adapterOption = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
labelLine: { legend: {
show: false, 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, series: [
borderWidth: 10, {
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 name: "风柜系统:",
}, data: [
}; { value: this.chartData1, name: "运行数" },
var placeHolderStyle = { { value: this.chartData2, name: "停止数" },
normal: { ],
color: "#013e79", itemStyle: {
label: { color: function (params) {
show: false, 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: { legend: {
show: false, 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 });
// },
},
},
},
}, },
}, series: [
emphasis: { {
color: "#013e79", name: "风柜系统:",
}, data: [
}; { value: 0, name: "运行数" },
let that = this; { value: 0, name: "停止数" },
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; ],
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.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = { this.option = {
//环形图中间文字
title: { title: {
subtext: "运行状态", subtext: "运行状态",
textStyle: { textStyle: {
@ -117,190 +293,130 @@ export default {
color: "#ffffff", color: "#ffffff",
}, },
textAlign: "center", textAlign: "center",
x: "31%", x: "49%",
y: "43%", //距离上边的距离 y: "36%", //距离上边的距离
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
//图例
legend: { legend: {
// 设置图例显示在右侧 orient: "horizontal", // 水平布局
right: 0, bottom: 0, // 位于最底部
// 设置图例垂直居中 left: "center", // 水平居中
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("");
},
textStyle: { textStyle: {
color: function (name) { color: "#ffffff",
// 动态匹配系列颜色 // fontSize: 18,
for (let i = 0; i < that.option.series.length; i++) { },
const item = that.option.series[i].data.find( },
(d) => d.name === name series: [
); // 数据圆
if (item) { {
// 返回实际颜色（处理渐变色） name: "风柜系统:",
return ( type: "pie",
item.itemStyle?.normal?.color?.colorStops?.[0]?.color || radius: ["60%", "72%"],
item.itemStyle?.color || center: ["50%", "44%"],
"#ffffff" avoidLabelOverlap: false,
); label: {
} show: false,
} position: "center",
return "#ffffff"; // 默认颜色
}, },
rich: { labelLine: {
name: { show: false,
align: "left", },
fontSize: titleFontSize * 2.3, itemStyle: {
// 增加行高来扩大间隔 color: function (params) {
lineHeight: titleFontSize * 3.3, var colorList = ["#0882ff", "#ffe21e"];
}, return colorList[params.dataIndex];
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 });
// },
}, },
percentage: { borderWidth: 5,
align: "left", borderColor: "#002a56",
fontSize: titleFontSize * 2.3, },
// color: function (params) { z: 10, //设置层级更高,否则会被阴影圆遮住
// let data = adapterOption.series[1].data; },
// return data.itemStyle.color({ dataIndex: params.dataIndex }); // 阴影圆
// }, {
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", type: "pie",
clockWise: false, silent: true, //鼠标移入不显示内容，不触发鼠标事件
radius: [66, 80], // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
center: ["32%", "50%"], // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
itemStyle: dataStyle, // 这里开启silent: true, 就达到效果了
hoverAnimation: false, // center与非内圈一致
startAngle: 90, radius: ["38%", "39%"],
center: ["50%", "44%"],
label: { label: {
borderRadius: "10", show: false,
}, },
data: [ data: [
{ {
value: this.chartData1, value: 0,
name: "运行数",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#277dff",
},
{
offset: 1,
color: "#277dff",
},
]),
},
},
},
{
value: this.allData,
name: "", name: "",
tooltip: { itemStyle: {},
show: false,
},
itemStyle: placeHolderStyle,
}, },
], ],
}, },
// 最里面渐变小圆
{ {
name: "风柜系统", // 颜色
type: "pie", type: "pie",
clockWise: false, silent: true, //鼠标移入不显示内容，不触发鼠标事件
radius: [36, 50], // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
center: ["32%", "50%"], // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
itemStyle: dataStyle, // 这里开启silent: true, 就达到效果了
hoverAnimation: false, // center与非内圈一致
startAngle: 90, radius: ["0%", "38%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [ data: [
{ {
value: this.chartData2, value: 0,
name: "停止数",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#9ab7dc",
},
{
offset: 1,
color: "#9ab7dc",
},
]),
},
},
},
{
value: this.allData,
name: "", name: "",
tooltip: { itemStyle: {},
show: false,
},
itemStyle: placeHolderStyle,
}, },
], ],
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
Unescape View File

@ -43,12 +43,13 @@ export default {
this.allData = this.chartData1 + this.chartData2; this.allData = this.chartData1 + this.chartData2;
}); });
this.$nextTick(() => { this.$nextTick(() => {
// 销毁现有的 ECharts 实例 // // 销毁现有的 ECharts 实例
if (this.chartInstance) { // if (this.chartInstance) {
this.chartInstance.dispose(); // this.chartInstance.dispose();
} // }
// 重新初始化图表 // // 重新初始化图表
this.initChart(); // this.initChart();
this.echartsData();
}); });
} }
}, },
@ -75,39 +76,214 @@ export default {
//手动的调用图标对象的resize才能产生效果 //手动的调用图标对象的resize才能产生效果
this.chartInstance.resize(); this.chartInstance.resize();
}, },
//初始化chartInstance对象 echartsData() {
initChart() { console.log("父组件传过来的值", this.energyMes);
var dataStyle = { if (this.energyMes) {
normal: { const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
label: { const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表
show: false, const adapterOption = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
labelLine: { legend: {
show: false, 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, series: [
borderWidth: 10, {
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 name: "温度监测:",
}, data: [
}; { value: this.chartData1, name: "在线数" },
var placeHolderStyle = { { value: this.chartData2, name: "离线数" },
normal: { ],
color: "#393d50", itemStyle: {
label: { color: function (params) {
show: false, 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: { legend: {
show: false, 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 });
// },
},
},
},
}, },
}, series: [
emphasis: { {
color: "#393d50", name: "温度监测:",
}, data: [
}; { value: 0, name: "在线数" },
let that = this; { value: 0, name: "离线数" },
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; ],
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.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = { this.option = {
//环形图中间文字
title: { title: {
subtext: "在线状态", subtext: "在线状态",
textStyle: { textStyle: {
@ -117,189 +293,130 @@ export default {
color: "#ffffff", color: "#ffffff",
}, },
textAlign: "center", textAlign: "center",
x: "31%", x: "49%",
y: "43%", //距离上边的距离 y: "36%", //距离上边的距离
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
//图例
legend: { legend: {
// 设置图例显示在右侧 orient: "horizontal", // 水平布局
right: 0, bottom: 0, // 位于最底部
// 设置图例垂直居中 left: "center", // 水平居中
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("");
},
textStyle: { textStyle: {
color: function (name) { color: "#ffffff",
// 动态匹配系列颜色 // fontSize: 18,
for (let i = 0; i < that.option.series.length; i++) { },
const item = that.option.series[i].data.find( },
(d) => d.name === name series: [
); // 数据圆
if (item) { {
// 返回实际颜色（处理渐变色） name: "温度监测:",
return ( type: "pie",
item.itemStyle?.normal?.color?.colorStops?.[0]?.color || radius: ["60%", "72%"],
item.itemStyle?.color || center: ["50%", "44%"],
"#ffffff" avoidLabelOverlap: false,
); label: {
} show: false,
} position: "center",
return "#ffffff"; // 默认颜色
}, },
rich: { labelLine: {
name: { show: false,
align: "left", },
fontSize: titleFontSize * 2.3, itemStyle: {
// 增加行高来扩大间隔 color: function (params) {
lineHeight: titleFontSize * 3.3, var colorList = ["#2df499", "#08c8ff"];
}, return colorList[params.dataIndex];
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 });
// },
}, },
percentage: { borderWidth: 5,
align: "left", borderColor: "#002a56",
fontSize: titleFontSize * 2.3, },
// color: function (params) { z: 10, //设置层级更高,否则会被阴影圆遮住
// let data = adapterOption.series[1].data; },
// return data.itemStyle.color({ dataIndex: params.dataIndex }); // 阴影圆
// }, {
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", type: "pie",
clockWise: false, silent: true, //鼠标移入不显示内容，不触发鼠标事件
radius: [66, 80], // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
center: ["32%", "50%"], // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
itemStyle: dataStyle, // 这里开启silent: true, 就达到效果了
hoverAnimation: false, // center与非内圈一致
startAngle: 90, radius: ["38%", "39%"],
center: ["50%", "44%"],
label: { label: {
borderRadius: "10", show: false,
}, },
data: [ data: [
{ {
value: this.chartData1, value: 0,
name: "在线数",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#e87b4b",
},
{
offset: 1,
color: "#e87b4b",
},
]),
},
},
},
{
value: this.allData,
name: "", name: "",
tooltip: { itemStyle: {},
show: false,
},
itemStyle: placeHolderStyle,
}, },
], ],
}, },
// 最里面渐变小圆
{ {
name: "温度监测", // 颜色
type: "pie", type: "pie",
clockWise: false, silent: true, //鼠标移入不显示内容，不触发鼠标事件
radius: [36, 50], // hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
center: ["32%", "50%"], // 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
itemStyle: dataStyle, // 这里开启silent: true, 就达到效果了
hoverAnimation: false, // center与非内圈一致
startAngle: 90, radius: ["0%", "38%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [ data: [
{ {
value: this.chartData2, value: 0,
name: "离线数",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#ffe21e",
},
{
offset: 1,
color: "#ffe21e",
},
]),
},
},
},
{
value: this.allData,
name: "", name: "",
tooltip: { itemStyle: {},
show: false,
},
itemStyle: placeHolderStyle,
}, },
], ],
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
},
},
}, },
], ],
}; };

Write Preview
Loading…
Cancel
Save