220 lines
5.3 KiB
Vue
220 lines
5.3 KiB
Vue
<template>
|
|
<div :id="id" :perCent="perCent" class="outBoundEcharts"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
default: true,
|
|
},
|
|
perCent: {
|
|
type: String,
|
|
required: true,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {
|
|
perCent: {
|
|
handler: function (newV) {
|
|
this.getLoadEcharts();
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts();
|
|
|
|
},
|
|
methods: {
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(document.getElementById(this.id));
|
|
// window.addEventListener("resize",()=> {
|
|
// myChart.resize();
|
|
// });
|
|
let color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
//color为渐变色
|
|
offset: 0,
|
|
color: "rgb(9,13,255)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgb(24,200,252)",
|
|
},
|
|
]);
|
|
var option = {
|
|
title: [
|
|
{
|
|
text: (this.perCent * 100).toFixed(0) + "%",
|
|
// text: "50%",
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "rgb(24,200,252)",
|
|
foontWeight: "600",
|
|
background: "rgba(9,119,150,0.3)",
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
show: false,
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "5%",
|
|
left: "center",
|
|
},
|
|
color: [
|
|
"rgba(24,55,123,0.7)",
|
|
"rgb(24,55,123,0.7)",
|
|
"rgb(24,55,123,0.7)",
|
|
"rgb(24,55,123,0.7)",
|
|
"rgb(24,55,123,0.7)",
|
|
"rgb(24,55,123,0.7)",
|
|
],
|
|
series: [
|
|
{
|
|
name: "Access From",
|
|
type: "pie",
|
|
hoverAnimation: false,
|
|
radius: ["70%", "80%"],
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
// showBackground: true,
|
|
// backgroundStyle: {
|
|
// color: 'rgb(24,55,123,0.7)',
|
|
// },
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: "rgb(2,20,42,1)",
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: "40",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{ value: 580 },
|
|
{ value: 580 },
|
|
{ value: 580 },
|
|
{ value: 580 },
|
|
{ value: 580 },
|
|
],
|
|
},
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
legendHoverLink: false,
|
|
hoverAnimation: false,
|
|
radius: ["70%", "80%"],
|
|
center: ["50%", "50%"],
|
|
labelLine: {
|
|
//删除指示线
|
|
show: false,
|
|
},
|
|
animation: false,
|
|
itemStyle: {
|
|
color: "red",
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: "40",
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 580 * 5 - 580 * 5 * this.perCent,
|
|
// value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(255,255,255,0)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 580 * 5 * this.perCent,
|
|
// value: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: color,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
hoverAnimation: false,
|
|
startAngle: 80,
|
|
radius: ["55%"],
|
|
hoverAnimation: false,
|
|
animation: false,
|
|
center: ["50%", "50%"],
|
|
itemStyle: {
|
|
color: "rgba(9,119,150,0.3)",
|
|
},
|
|
data: [100],
|
|
},
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
startAngle: 80,
|
|
hoverAnimation: false,
|
|
radius: ["10%"],
|
|
hoverAnimation: false,
|
|
animation: false,
|
|
center: ["50%", "13%"],
|
|
itemStyle: {
|
|
color: "rgb(21,165,252)",
|
|
},
|
|
data: [100],
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
// window.addEventListener("resize",()=> {
|
|
// myChart.resize();
|
|
// });
|
|
// window.onresize = function () {
|
|
// height= $(window).height();//浏览器的高度
|
|
// myChart.getDom().style.height = this.height+ "px";
|
|
// myChart.resize();
|
|
// }
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* .outBound {
|
|
width: 92px;
|
|
height: 86px;
|
|
overflow: hidden;
|
|
} */
|
|
.outBoundEcharts {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
</style>
|