// 植被覆盖
echarts3 () {
const myChart3 = this
.$echarts
.init(this.$refs.chart3);
var option = {
series: [
{
name: "刻度1",
type: "gauge",
center: [
"50%", "25%"
],
// radius: "60%",
radius: "40%",
min: 0, // 最小刻度
max: 100, // 最大刻度
splitNumber: 4, // 刻度数量
startAngle: 230,
endAngle: -45,
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [
[1, "rgba(0,0,0,0)"]
]
}
}, // 仪表盘轴线
axisLabel: {
show: true,
color: "#51676f",
fontSize: 8,
distance: -0,
formatter: function (v) {
var value = v.toFixed(2);
if (value === 0.0) {
return "0";
} else if (value == 0.25) {
return "25%";
} else if (value == 0.5) {
return "50%";
} else if (value == 0.75) {
return "75%";
} else if (value == 1.0) {
return "100%";
} else {
return "";
}
},
formatter: function (v) {
return v;
}
}, // 刻度标签。
axisTick: {
show: true,
splitNumber: 20,
lineStyle: {
color: "#233a42",
width: 1
},
length: 5
}, // 刻度样式
splitLine: {
show: true,
length: 8,
lineStyle: {
color: "#586e77"
}
} // 分隔线样式
}, {
type: "gauge",
// radius: "70%",
radius: "50%",
center: [
"50%", "25%"
],
splitNumber: 0, // 刻度数量
startAngle: 230,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 7,
color: [
[
1,
new this
.$echarts
.graphic
.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#ADFF2F"
}, {
offset: 0.3,
color: "#7FFF00"
}, {
offset: 0.6,
color: "#32CD32"
}, {
offset: 1,
color: "#228B22"
}
// { offset: 0.1, color: "#0bacff" }, { offset: 0.6, color:
// "#2089cf" }, { offset: 1, color: "#0169ec" }
])
]
]
}
},
// 分隔线样式。
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: true,
length: "80%",
width: "2%"
},
title: {
show: true,
offsetCenter: [
0, "70%"
], // x, y，单位px
textStyle: {
fontWeight: 100,
color: "#d8bb93",
fontSize: 26
}
},
// 仪表盘详情，用于显示数据。
detail: {
show: true,
offsetCenter: [
0, "30%"
],
color: "#d8bb93",
formatter: function (value) {
return value + "%";
},
textStyle: {
fontSize: 30,
color: "#fff"
}
},
data: [
{
name: "林草覆盖率",
value: this.echart1Data.vegetationCoverage,
}
]
}, {
name: "底下背景圈1",
type: "gauge",
// radius: "75%",
radius: "55%",
center: [
"50%", "25%"
],
z: -999,
splitNumber: 0, // 刻度数量
startAngle: 230,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 40,
color: [
[1, "#09222c"]
]
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: true
},
title: {
show: false
},
detail: {
show: false
}
}, {
name: "刻度2",
type: "gauge",
// center: ["50%", "380"], //复制过来的比例
center: ["50%", "480"],
// radius: "60%",
radius: "40%",
min: 0, // 最小刻度
max: 100, // 最大刻度
splitNumber: 4, // 刻度数量
startAngle: 230,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [
[1, "rgba(0,0,0,0)"]
]
}
}, // 仪表盘轴线
axisLabel: {
show: true,
color: "#51676f",
fontSize: 8,
distance: -0,
formatter: function (v) {
return v;
}
}, // 刻度标签。
axisTick: {
show: true,
splitNumber: 20,
lineStyle: {
color: "#233a42",
width: 1
},
length: -3
}, // 刻度样式
splitLine: {
show: true,
length: 8,
lineStyle: {
color: "#5a7079"
}
} // 分隔线样式
}, {
type: "gauge",
// radius: "70%",
radius: "50%",
// center: ["50%", "380"], //复制过来的比例
center: ["50%", "480"],
splitNumber: 0, // 刻度数量
startAngle: 230,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 7,
color: [
[
1,
new this
.$echarts
.graphic
.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#ADFF2F"
}, {
offset: 0.3,
color: "#7FFF00"
}, {
offset: 0.6,
color: "#32CD32"
}, {
offset: 1,
color: "#228B22"
}
// { offset: 0.1, color: "#0bacff" }, { offset: 0.6, color:
// "#2089cf" }, { offset: 1, color: "#0169ec" }
])
]
]
}
},
// 分隔线样式。
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: true,
length: "80%",
width: "2%"
},
title: {
show: true,
offsetCenter: [
6, 100
], // x, y，单位px
textStyle: {
fontWeight: 100,
color: "#d8bb93",
fontSize: 24
}
},
// 仪表盘详情，用于显示数据。
detail: {
show: true,
offsetCenter: [
0, "30%"
], //展示数据的位置调整
color: "#fff",
formatter: function (value) {
return value + "%";
},
textStyle: {
fontSize: 30
}
},
data: [
{
name: "林草植被恢复率",
value: this.echart1Data.vegetationRecoveryRate
}
]
}, {
name: "底下背景圈1",
type: "gauge",
// radius: "75%",
radius: "55%",
// center: ["50%", "380"], //复制过来的比例
center: ["50%", "480"],
z: -999,
splitNumber: 0, // 刻度数量
startAngle: 230,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 40,
color: [
[1, "#09222c"]
]
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: true
},
title: {
show: false
},
detail: {
show: false
}
}
]
};
myChart3.setOption(option);
},
第二中仪表盘
echarts13 () {
const myChart13 = this
.$echarts
.init(this.$refs.chart13);
var colors = ["#e00005", "#e6a900", "#00c05a"];
var fontColor = "#0089fa";
// var data = this.echart1Data console.log(this.echart13Data) var data = [70,
// 2];
var fontSize = 6;
var percent = this.echart13Data
// console.log(percent,typeof percent)
var option = {
series: [
{
type: "gauge",
name: "外层辅助",
radius: "86%",
// pointer: { show: false },
detail: {
show: false
},
data: [
{
// value: 70,
}
],
title: {
show: false,
offsetCenter: [
-60, "90%"
],
textStyle: {
color: fontColor
}
},
axisLine: {
show: true,
lineStyle: {
color: [
[1, "#0a80d5"]
],
width: 2,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 25,
lineStyle: {
color: "#051932",
width: 0,
type: "solid"
}
},
axisLabel: {
show: false
}
}, {
name: "最内层线",
type: "gauge",
radius: "30%",
center: [
"50%", "50%"
],
startAngle: 0,
endAngle: 359,
axisLine: {
show: false,
lineStyle: {
opacity: 0
}
},
splitLine: {
show: false,
lineStyle: {
opacity: 0
}
},
axisLabel: {
show: false
},
axisTick: {
length: 0.5,
lineStyle: {
color: fontColor,
width: 2,
type: "solid"
}
},
detail: {
show: false
},
data: []
}, {
name: "内层数据刻度",
type: "gauge",
radius: "79%",
min: 0,
max: 100,
center: [
"50%", "50%"
],
axisLine: {
lineStyle: {
width: 15,
color: [
[
0.1, colors[0]
],
[
0.3,
new this
.$echarts
.graphic
.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: colors[0]
}, {
offset: 0.8,
color: colors[1]
}
])
],
[
0.7, colors[1]
],
[
0.9,
new this
.$echarts
.graphic
.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: colors[2]
}, {
offset: 0.6,
color: colors[1]
}
])
],
[
1, colors[2]
]
]
}
},
splitLine: {
length: 10,
lineStyle: {
width: 1,
color: "#ffffff"
}
},
axisTick: {
lineStyle: {
width: 1,
color: "#ffffff"
}
},
axisLabel: {
color: fontColor,
distance: 10,
fontSize: fontSize
},
detail: {
show: true,
offsetCenter: [
"0", "87%"
],
color: "#fff",
formatter: function (value) {
return value.toFixed(2) + "%";
},
fontSize: 36
},
itemStyle: {
normal: {
color: "rgb(0,191,255)"
}
},
data: [
{
value: percent
// value: this.echart1Data
}
],
silent: true,
title: {
offsetCenter: [
0, "75%"
], // 设置在线率位置
color: fontColor
}
}
]
};
myChart13.setOption(option);
},
第3中仪表盘样式
echarts5_1 () {
const myChart5 = this
.$echarts
.init(this.$refs.chart5_1);
var option = {
title: {
show: true,
text: "供电排放强度(kg/MWh)",
top: 41,
left: 27,
textStyle: {
color: "#d8bb93",
fontSize: 29,
fontWeight: 400
}
},
tooltip: {
// formatter: "{b}{c}"
},
series: [// { tooltip: { show: false }, name: "中心圆点", type: "pie",
// hoverAnimation: false, legendHoverLink: false, center: ["50%", "90%"],
// radius: ["0%", "7%"], z: 5, label: { normal: { show: false,
// position: "center" }, emphasis: { show: false } },
// labelLine: { normal: { show: false } }, data: [ {
// value: 100, itemStyle: { normal: { color: "#072B79"
// }, emphasis: { color: "#072B79" } } } ]
// }, { tooltip: { show: false }, name: "中心小圆形", type: "pie",
// hoverAnimation: false, legendHoverLink: false, center: ["50%", "90%"],
// radius: ["6%", "8%"], z: 5, label: { normal: { show: false,
// position: "center" }, emphasis: { show: false } },
// labelLine: { normal: { show: false } }, data: [ {
// value: 100, itemStyle: { normal: { color: "#24D8E7"
// }, emphasis: { color: "#24D8E7" } } } ]
// },
{
name: "内圈刻度",
type: "gauge",
radius: "97%",
min: 0,
max: 1,
center: [
"50%", "90%"
],
data: [
{
// value: 895,
value: this.echarts5_1Data,
name: ""
}
],
splitNumber: 12, // 刻度数量
startAngle: 180,
endAngle: 0,
z: 5,
axisLine: {
show: true,
lineStyle: {
width: 5,
color: [
[
0.12, "#E71A6D"
],
[
0.35, "#F88168"
],
[
0.63, "#FBF76B"
],
[
0.8, "#7AD4DF"
],
[
1, "#70C27E"
]
]
}
}, // 仪表盘轴线
axisLabel: {
show: false,
color: "#fff",
fontSize: 19,
distance: -30,
formatter: function (params) {
var value = params.toFixed(2);
if (value == 0.0) {
return "0";
} else if (value == 0.25) {
return "25%";
} else if (value == 0.5) {
return "50%";
} else if (value == 0.75) {
return "75%";
} else if (value == 1.0) {
return "100%";
} else {
return "";
}
}
}, // 刻度标签。
axisTick: {
splitNumber: 6,
show: true,
lineStyle: {
color: "auto",
width: 0.6
},
length: 17 //短刻度长度
}, // 刻度样式
splitLine: {
show: true,
length: 21, //长刻度
lineStyle: {
color: "auto",
width: 1
}
}, // 分隔线样式
itemStyle: {
normal: {
color: "#24D8E7" // 指针颜色
}
},
// pointer: { width: 2, length: "80%" },
pointer: {
show: false
},
detail: {
show: true,
// formatter: function (params) { return (params*100).toFixed(0) + '%' },
// fontSize: 40, //设置仪表盘中间文字大小
color: "#fff",
offsetCenter: ["0%", "-20%"]
},
title: {
offsetCenter: [
"0", "-35%"
],
fontSize: 24,
color: "#d8bb93",
show: true
}
}
]
};
myChart5.setOption(option);
},