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. 410
      src/views/components/aircAndWindcMeter.vue
  2. 409
      src/views/components/temMeter.vue

410
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,137 +76,165 @@ 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("");
}, },
shadowBlur: 40, textStyle: {
borderWidth: 10, color: function (name) {
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 const dataSeries = adapterOption.series[1].data; // 数据圆的data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表
return colorList[index];
}, },
}; rich: {
var placeHolderStyle = { name: {
normal: { align: "left",
color: "#013e79", fontSize: titleFontSize * 1.6,
label: {
show: false,
}, },
labelLine: { text: {
show: false, 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;
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
title: {
subtext: "运行状态",
textStyle: {
color: "#ffffff",
}, },
subtextStyle: {
color: "#ffffff",
}, },
textAlign: "center", series: [
x: "31%", {
y: "43%", //距离上边的距离 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: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
legend: { legend: {
// 设置图例显示在右侧
right: 0,
// 设置图例垂直居中
top: "middle",
itemWidth: titleFontSize, itemWidth: titleFontSize,
itemHeight: titleFontSize, itemHeight: titleFontSize,
itemGap: titleFontSize * 2, itemGap: titleFontSize * 2,
formatter: function (name) { formatter: function (name) {
var arr = []; var arr = [];
// 动态查找包含当前name的series索引 let data = adapterOption.series[0].data;
let seriesIndex = -1; var index = 0;
for (let i = 0; i < that.option.series.length; i++) { var total = 0;
const seriesData = that.option.series[i].data; // 计算总和
if (seriesData.some((item) => item.name === name)) { for (var i = 0; i < data.length; i++) {
seriesIndex = i; total += data[i].value;
break; if (data[i].name == name) {
} index = i;
}
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;
} }
} }
}); // 检查当前项的值是否为 0
var percentage =
const percentage = data[index].value === 0
currentValue === 0
? "0.00" ? "0.00"
: ((currentValue / total) * 100).toFixed(2); : ((data[index].value / total) * 100).toFixed(2);
arr.push( arr.push(
"{name|" + name + "}", "{name|" + name + "}",
"{text|: \n}", "{text|" + " " + ":" + " " + "}",
"{value|" + currentValue + " }", "{value|" + data[index].value + " " + "}",
"{percentage| " + percentage + "%}" "{percentage|" + " " + percentage + "%}"
); );
return arr.join(""); return arr.join("");
}, },
textStyle: { textStyle: {
color: function (name) { color: function (name) {
// 动态匹配系列颜色 const dataSeries = adapterOption.series[1].data; // 数据圆的data
for (let i = 0; i < that.option.series.length; i++) { const index = dataSeries.findIndex(
const item = that.option.series[i].data.find( (item) => item.name === name
(d) => d.name === name
);
if (item) {
// 返回实际颜色（处理渐变色）
return (
item.itemStyle?.normal?.color?.colorStops?.[0]?.color ||
item.itemStyle?.color ||
"#ffffff"
); );
} const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表
} return colorList[index];
return "#ffffff"; // 默认颜色
}, },
rich: { rich: {
name: { name: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
// 增加行高来扩大间隔
lineHeight: titleFontSize * 3.3,
}, },
text: { text: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
}, },
value: { value: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
// color: function (params) { // color: function (params) {
// let data = adapterOption.series[1].data; // let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex }); // return data.itemStyle.color({ dataIndex: params.dataIndex });
@ -213,7 +242,7 @@ export default {
}, },
percentage: { percentage: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
// color: function (params) { // color: function (params) {
// let data = adapterOption.series[1].data; // let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex }); // return data.itemStyle.color({ dataIndex: params.dataIndex });
@ -224,83 +253,170 @@ export default {
}, },
series: [ series: [
{ {
name: "风柜系统", name: "风柜系统:",
type: "pie",
clockWise: false,
radius: [66, 80],
center: ["32%", "50%"],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label: {
borderRadius: "10",
},
data: [ data: [
{ { value: 0, name: "运行数" },
value: this.chartData1, { value: 0, name: "停止数" },
name: "运行数", ],
itemStyle: { itemStyle: {
normal: { color: function (params) {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ var colorList = ["#0882ff", "#ffe21e"];
{ return colorList[params.dataIndex];
offset: 0, },
color: "#277dff", // borderWidth: 5,
borderColor: "#002a56",
},
}, },
{ {
offset: 1, data: [
color: "#277dff", { 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: {
color: "#ffffff",
}, },
subtextStyle: {
color: "#ffffff",
}, },
textAlign: "center",
x: "49%",
y: "36%", //距离上边的距离
}, },
{
value: this.allData,
name: "",
tooltip: { tooltip: {
show: false, trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
itemStyle: placeHolderStyle, //图例
legend: {
orient: "horizontal", // 水平布局
bottom: 0, // 位于最底部
left: "center", // 水平居中
//图例文字颜色
textStyle: {
color: "#ffffff",
// fontSize: 18,
}, },
],
}, },
series: [
// 数据圆
{ {
name: "风柜系统", name: "风柜系统:",
type: "pie", type: "pie",
clockWise: false, radius: ["60%", "72%"],
radius: [36, 50], center: ["50%", "44%"],
center: ["32%", "50%"], avoidLabelOverlap: false,
itemStyle: dataStyle, label: {
hoverAnimation: false, show: false,
startAngle: 90, position: "center",
data: [ },
{ labelLine: {
value: this.chartData2, show: false,
name: "停止数", },
itemStyle: { itemStyle: {
normal: { color: function (params) {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ var colorList = ["#0882ff", "#ffe21e"];
{ return colorList[params.dataIndex];
offset: 0, },
color: "#9ab7dc", borderWidth: 5,
borderColor: "#002a56",
},
z: 10, //设置层级更高,否则会被阴影圆遮住
}, },
// 阴影圆
{ {
offset: 1, type: "pie",
color: "#9ab7dc", 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,
}, },
// 内圈边框
{ {
value: this.allData, // 颜色
color: ["#305376"],
type: "pie",
silent: true, //鼠标移入不显示内容，不触发鼠标事件
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
// 这里开启silent: true, 就达到效果了
// center与非内圈一致
radius: ["38%", "39%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "", name: "",
tooltip: { itemStyle: {},
},
],
},
// 最里面渐变小圆
{
// 颜色
type: "pie",
silent: true, //鼠标移入不显示内容，不触发鼠标事件
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
// 这里开启silent: true, 就达到效果了
// center与非内圈一致
radius: ["0%", "38%"],
center: ["50%", "44%"],
label: {
show: false, show: false,
}, },
itemStyle: placeHolderStyle, data: [
{
value: 0,
name: "",
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
},
},
}, },
], ],
}; };

409
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,136 +76,165 @@ 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("");
}, },
shadowBlur: 40, textStyle: {
borderWidth: 10, color: function (name) {
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 const dataSeries = adapterOption.series[1].data; // 数据圆的data
const index = dataSeries.findIndex(
(item) => item.name === name
);
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
return colorList[index];
}, },
}; rich: {
var placeHolderStyle = { name: {
normal: { align: "left",
color: "#393d50", fontSize: titleFontSize * 1.6,
label: {
show: false,
}, },
labelLine: { text: {
show: false, 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;
this.chartInstance = echarts.init(this.$refs.chart_ref);
this.option = {
title: {
subtext: "在线状态",
textStyle: {
color: "#ffffff",
}, },
subtextStyle: {
color: "#ffffff",
}, },
textAlign: "center", series: [
x: "31%", {
y: "43%", //距离上边的距离 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: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
legend: { legend: {
// 设置图例显示在右侧
right: 0,
// 设置图例垂直居中
top: "middle",
itemWidth: titleFontSize, itemWidth: titleFontSize,
itemHeight: titleFontSize, itemHeight: titleFontSize,
itemGap: titleFontSize * 2, itemGap: titleFontSize * 2,
formatter: function (name) { formatter: function (name) {
var arr = []; var arr = [];
// 动态查找包含当前name的series索引 let data = adapterOption.series[0].data;
let seriesIndex = -1; var index = 0;
for (let i = 0; i < that.option.series.length; i++) { var total = 0;
const seriesData = that.option.series[i].data; // 计算总和
if (seriesData.some((item) => item.name === name)) { for (var i = 0; i < data.length; i++) {
seriesIndex = i; total += data[i].value;
break; if (data[i].name == name) {
} index = i;
}
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;
} }
} }
}); // 检查当前项的值是否为 0
var percentage =
const percentage = data[index].value === 0
currentValue === 0
? "0.00" ? "0.00"
: ((currentValue / total) * 100).toFixed(2); : ((data[index].value / total) * 100).toFixed(2);
arr.push( arr.push(
"{name|" + name + "}", "{name|" + name + "}",
"{text|: \n}", "{text|" + " " + ":" + " " + "}",
"{value|" + currentValue + " }", "{value|" + data[index].value + " " + "}",
"{percentage| " + percentage + "%}" "{percentage|" + " " + percentage + "%}"
); );
return arr.join(""); return arr.join("");
}, },
textStyle: { textStyle: {
color: function (name) { color: function (name) {
// 动态匹配系列颜色 const dataSeries = adapterOption.series[1].data; // 数据圆的data
for (let i = 0; i < that.option.series.length; i++) { const index = dataSeries.findIndex(
const item = that.option.series[i].data.find( (item) => item.name === name
(d) => d.name === name
);
if (item) {
// 返回实际颜色（处理渐变色）
return (
item.itemStyle?.normal?.color?.colorStops?.[0]?.color ||
item.itemStyle?.color ||
"#ffffff"
); );
} const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表
} return colorList[index];
return "#ffffff"; // 默认颜色
}, },
rich: { rich: {
name: { name: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
// 增加行高来扩大间隔
lineHeight: titleFontSize * 3.3,
}, },
text: { text: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
}, },
value: { value: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
// color: function (params) { // color: function (params) {
// let data = adapterOption.series[1].data; // let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex }); // return data.itemStyle.color({ dataIndex: params.dataIndex });
@ -212,7 +242,7 @@ export default {
}, },
percentage: { percentage: {
align: "left", align: "left",
fontSize: titleFontSize * 2.3, fontSize: titleFontSize * 1.6,
// color: function (params) { // color: function (params) {
// let data = adapterOption.series[1].data; // let data = adapterOption.series[1].data;
// return data.itemStyle.color({ dataIndex: params.dataIndex }); // return data.itemStyle.color({ dataIndex: params.dataIndex });
@ -223,83 +253,170 @@ export default {
}, },
series: [ series: [
{ {
name: "温度监测", name: "温度监测:",
type: "pie",
clockWise: false,
radius: [66, 80],
center: ["32%", "50%"],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label: {
borderRadius: "10",
},
data: [ data: [
{ { value: 0, name: "在线数" },
value: this.chartData1, { value: 0, name: "离线数" },
name: "在线数", ],
itemStyle: { itemStyle: {
normal: { color: function (params) {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ var colorList = ["#2df499", "#08c8ff"];
{ return colorList[params.dataIndex];
offset: 0, },
color: "#e87b4b", // borderWidth: 5,
borderColor: "#002a56",
},
}, },
{ {
offset: 1, data: [
color: "#e87b4b", { 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: {
color: "#ffffff",
}, },
subtextStyle: {
color: "#ffffff",
}, },
textAlign: "center",
x: "49%",
y: "36%", //距离上边的距离
}, },
{
value: this.allData,
name: "",
tooltip: { tooltip: {
show: false, trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
itemStyle: placeHolderStyle, //图例
legend: {
orient: "horizontal", // 水平布局
bottom: 0, // 位于最底部
left: "center", // 水平居中
//图例文字颜色
textStyle: {
color: "#ffffff",
// fontSize: 18,
}, },
],
}, },
series: [
// 数据圆
{ {
name: "温度监测", name: "温度监测:",
type: "pie", type: "pie",
clockWise: false, radius: ["60%", "72%"],
radius: [36, 50], center: ["50%", "44%"],
center: ["32%", "50%"], avoidLabelOverlap: false,
itemStyle: dataStyle, label: {
hoverAnimation: false, show: false,
startAngle: 90, position: "center",
data: [ },
{ labelLine: {
value: this.chartData2, show: false,
name: "离线数", },
itemStyle: { itemStyle: {
normal: { color: function (params) {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ var colorList = ["#2df499", "#08c8ff"];
{ return colorList[params.dataIndex];
offset: 0, },
color: "#ffe21e", borderWidth: 5,
borderColor: "#002a56",
},
z: 10, //设置层级更高,否则会被阴影圆遮住
}, },
// 阴影圆
{ {
offset: 1, type: "pie",
color: "#ffe21e", 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,
}, },
// 内圈边框
{ {
value: this.allData, // 颜色
color: ["#305376"],
type: "pie",
silent: true, //鼠标移入不显示内容，不触发鼠标事件
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
// 这里开启silent: true, 就达到效果了
// center与非内圈一致
radius: ["38%", "39%"],
center: ["50%", "44%"],
label: {
show: false,
},
data: [
{
value: 0,
name: "", name: "",
tooltip: { itemStyle: {},
},
],
},
// 最里面渐变小圆
{
// 颜色
type: "pie",
silent: true, //鼠标移入不显示内容，不触发鼠标事件
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true
// 这里开启silent: true, 就达到效果了
// center与非内圈一致
radius: ["0%", "38%"],
center: ["50%", "44%"],
label: {
show: false, show: false,
}, },
itemStyle: placeHolderStyle, data: [
{
value: 0,
name: "",
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
},
},
}, },
], ],
}; };

Write Preview
Loading…
Cancel
Save