135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="chart" ref="ChartThree"></div>
|
||
|
|
<!-- <div v-if="statsEnterpriseList.length == 0">
|
||
|
|
<div class="placeholderBox">
|
||
|
|
<img src="@/assets/images/noData.png" alt="" />
|
||
|
|
<p>暂无数据</p>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import echarts from "echarts4";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
mounted() {
|
||
|
|
this.topChartThree();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
topChartThree() {
|
||
|
|
let ageChart = echarts.init(this.$refs.ChartThree);
|
||
|
|
let option = {
|
||
|
|
color: ["#36CE90", "#FF952C", "#FE0B0F","#CCCCCC"],
|
||
|
|
title: {
|
||
|
|
//饼图中间的文字设置
|
||
|
|
show: true,
|
||
|
|
left: "32%",
|
||
|
|
top: "40%",
|
||
|
|
text: "100.00%",
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20,
|
||
|
|
color: "#000"
|
||
|
|
},
|
||
|
|
subtext: "录像完整率",
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#000"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
//图例设置
|
||
|
|
right: 120,
|
||
|
|
top: "middle",
|
||
|
|
bottom: 20,
|
||
|
|
orient: "vertical", //垂直
|
||
|
|
itemGap: 15, //图例之间间距
|
||
|
|
textStyle: {
|
||
|
|
//数据右对齐样式
|
||
|
|
color: "#687F96",
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
//legend左边的文字
|
||
|
|
fontSize: 10,
|
||
|
|
padding: [3, 10, 0, 0], //1.左边的文字添加右边距10(可自己调整)
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
//legend右边的值
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#182F41",
|
||
|
|
backgroundColor: "transparent", //2.右边的值添加背景色
|
||
|
|
align: "right", //3.右对齐
|
||
|
|
padding: [5, -100, 0, 0], //4.设置右边距为-100(-70/-80..可自己调整)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
formatter: function (name) {
|
||
|
|
let data = option.series[0].data;
|
||
|
|
let total = 0;
|
||
|
|
let tarValue;
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
total += data[i].value;
|
||
|
|
if (data[i].name == name) {
|
||
|
|
tarValue = data[i].value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
let v = tarValue;
|
||
|
|
return [`{name|${name}}` + `{value|${v}}`].join("");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Access From",
|
||
|
|
type: "pie",
|
||
|
|
center: ["40%", "50%"], //饼图位置
|
||
|
|
radius: ["55%", "80%"], //圆环大小
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: "center",
|
||
|
|
},
|
||
|
|
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
fontSize: 40,
|
||
|
|
fontWeight: "bold",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ value: 1048, name: "录像完整" },
|
||
|
|
{ value: 735, name: "录像丢失" },
|
||
|
|
{ value: 580, name: "诊断失败" },
|
||
|
|
{ value: 580, name: "未检测" }
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
ageChart.setOption(option);
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
ageChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.main-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|