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

修改首页饼图数据

meizhou
selia-zx 5 months 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
Split 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.$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 = [];
// 动态查找包含当前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
},
},
},
],
};

491
src/views/components/temMeter.vue
Unescape View File

@ -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 = [];
// 动态查找包含当前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
},
},
},
],
};

Write Preview
Loading…
Cancel
Save