fix: BUG修改
This commit is contained in:
kun
parent
7cb8caba16
commit
ff079741c7
@ -87,7 +87,7 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL ='http://192.168.34.221:19111/' //郭圣雄本地
|
||||
axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
|
||||
// axios.defaults.baseURL = 'http://182.90.224.237:51234' //郭圣雄远程
|
||||
axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
|
||||
// axios.defaults.baseURL = 'http://jxj.zhgdyun.com:61212/' //彭洁远程
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
|
||||
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:11111/' // 百色三标段项目
|
||||
|
||||
@ -14,6 +14,24 @@
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="top-content-three">
|
||||
<div class="chart" ref="ChartTwo"></div>
|
||||
<!-- <div v-if="statsEnterpriseList.length == 0">
|
||||
<div class="placeholderBox">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="top-content-four">
|
||||
<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>
|
||||
<!-- <div class="topLeft whiteBlock2">
|
||||
<div class="blockInner blockInnerup">
|
||||
<div class="box-between">
|
||||
@ -33,8 +51,210 @@ export default {
|
||||
created() {},
|
||||
mounted() {
|
||||
this.topChartOne();
|
||||
this.topChartTwo();
|
||||
this.topChartThree();
|
||||
},
|
||||
methods: {
|
||||
// 顶部图3
|
||||
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();
|
||||
});
|
||||
},
|
||||
// 顶部图2
|
||||
topChartTwo() {
|
||||
let ageChart = echarts.init(this.$refs.ChartTwo);
|
||||
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: 735, name: "未检测" }
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
ageChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
ageChart.resize();
|
||||
});
|
||||
},
|
||||
// 顶部图1
|
||||
topChartOne() {
|
||||
let ageChart = echarts.init(this.$refs.ChartOne);
|
||||
@ -43,15 +263,17 @@ export default {
|
||||
title: {
|
||||
//饼图中间的文字设置
|
||||
show: true,
|
||||
left: "24%",
|
||||
top: "42%",
|
||||
text: "十类问题",
|
||||
left: "32%",
|
||||
top: "40%",
|
||||
text: "100.00%",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
subtext: "8800",
|
||||
subtextStyle: {
|
||||
fontSize: 20,
|
||||
color: "#000"
|
||||
},
|
||||
subtext: "监控点在线率",
|
||||
subtextStyle: {
|
||||
fontSize: 12,
|
||||
color: "#000"
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
@ -59,7 +281,7 @@ export default {
|
||||
},
|
||||
legend: {
|
||||
//图例设置
|
||||
right: 100,
|
||||
right: 120,
|
||||
top: "middle",
|
||||
bottom: 20,
|
||||
orient: "vertical", //垂直
|
||||
@ -161,7 +383,7 @@ export default {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
&-two {
|
||||
&-two, &-three, &-four {
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user