mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改图表

wangqin
zhangzhang 1 year ago
parent
66f6d4eac4
commit
55e03a5470
17 changed files with 1966 additions and 1828 deletions
Unified View
  1. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
  2. 3
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
  3. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  4. 27
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
  5. 36
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
  6. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
  7. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
  8. 8
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
  9. 686
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
  10. 696
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
  11. 713
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
  12. 52
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
  13. 77
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
  14. 527
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
  15. 518
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
  16. 81
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
  17. 311
      ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue

2
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js
View File

@ -24,7 +24,7 @@ var options = {
grid: { grid: {
top: "15%", //上边距 top: "15%", //上边距
right: "0", //右边距 right: "0", //右边距
left: "10px", //左边距 left: "15px", //左边距
bottom: "10%", //下边距 bottom: "10%", //下边距
containLabel: true, containLabel: true,
}, },

3
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js
View File

@ -191,6 +191,9 @@ let options = {
zlevel: 10, zlevel: 10,
data: [], data: [],
animationDelay: 500, animationDelay: 500,
tooltip: {
show: false,
},
}, },
], ],
}; };

20
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
View File

@ -220,8 +220,8 @@ export default {
dateTime: "2024", dateTime: "2024",
direction: "1", direction: "1",
dataList: [], dataList: [],
selectIndex: 3, selectIndex: 1,
selectId: 3, selectId: 1,
type: "year", type: "year",
chart1List: [], chart1List: [],
chart2List: [], chart2List: [],
@ -400,21 +400,21 @@ export default {
data.forEach((it) => { data.forEach((it) => {
if (it.warningType == 1) { if (it.warningType == 1) {
types.push("交通拥堵"); types.push("交通拥堵");
}else if (it.warningType == 2) { } else if (it.warningType == 2) {
types.push("行人"); types.push("行人");
}else if (it.warningType == 3) { } else if (it.warningType == 3) {
types.push("非机动车"); types.push("非机动车");
}else if (it.warningType == 4) { } else if (it.warningType == 4) {
types.push("停车"); types.push("停车");
}else if (it.warningType == 5) { } else if (it.warningType == 5) {
types.push("倒车/逆行"); types.push("倒车/逆行");
}else if (it.warningType == 6) { } else if (it.warningType == 6) {
types.push("烟火"); types.push("烟火");
}else if (it.warningType == 7) { } else if (it.warningType == 7) {
types.push("撒落物"); types.push("撒落物");
}else if (it.warningType == 8) { } else if (it.warningType == 8) {
types.push("异常天气"); types.push("异常天气");
}else if (it.warningType == 9) { } else if (it.warningType == 9) {
types.push("护栏碰撞"); types.push("护栏碰撞");
} else { } else {
types.push("其他"); types.push("其他");

27
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
View File

@ -6,10 +6,16 @@
<div class="checked">路段车流量Top10</div> <div class="checked">路段车流量Top10</div>
<div>断面交通量Top10</div> <div>断面交通量Top10</div>
</div> --> </div> -->
<Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty> <Empty
<div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio" v-show="!dataList || dataList.length <= 0"
id="situationEchartBox"></div> text="暂无数据..."
></Empty>
<div
v-show="dataList && dataList.length > 0"
style="width: 450px"
class="charts keep-ratio"
id="situationEchartBox"
></div>
</div> </div>
</div> </div>
</template> </template>
@ -27,7 +33,7 @@ export default {
}, },
data() { data() {
return { return {
dataList: [] dataList: [],
}; };
}, },
@ -41,7 +47,7 @@ export default {
getSectionPerceivedList().then((res) => { getSectionPerceivedList().then((res) => {
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
this.dataList = res.data this.dataList = res.data;
let data = res.data; let data = res.data;
let texts = []; let texts = [];
@ -60,7 +66,7 @@ export default {
}); });
}); });
}, },
created() { }, created() {},
methods: {}, methods: {},
}; };
</script> </script>
@ -77,9 +83,12 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)) 1 1; rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;

36
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="content"> <section class="content">
<Railway class="content-l" /> <Railway class="content-l" />
<div class="content-m"> <div class="content-m">
@ -10,7 +10,7 @@
<EventSource class="content-m-t" /> <EventSource class="content-m-t" />
<DailyDisposal class="content-m-t" /> <DailyDisposal class="content-m-t" />
</div> </div>
<div class="content-m" style="margin-right: 0;"> <div class="content-m" style="margin-right: 0">
<MonthStatistice class="content-m-t" /> <MonthStatistice class="content-m-t" />
<TypeAnalysis class="content-m-t" /> <TypeAnalysis class="content-m-t" />
</div> </div>
@ -22,17 +22,17 @@
</template> </template>
<script> <script>
import Railway from './components/railway/index.vue'; import Railway from "./components/railway/index.vue";
import RailWayDay from './components/railwayDay/index.vue'; import RailWayDay from "./components/railwayDay/index.vue";
import DayTotal from './components/dayTotal/index.vue'; import DayTotal from "./components/dayTotal/index.vue";
import EventSource from './components/eventSource/index.vue'; import EventSource from "./components/eventSource/index.vue";
import DailyDisposal from './components/dailyDisposal/index.vue'; import DailyDisposal from "./components/dailyDisposal/index.vue";
import TypeAnalysis from './components/typeAnalysis'; import TypeAnalysis from "./components/typeAnalysis";
import MonthStatistice from './components/monthStatistics/index.vue'; import MonthStatistice from "./components/monthStatistics/index.vue";
import EventQuery from './components/eventQuery'; import EventQuery from "./components/eventQuery";
export default { export default {
name: 'EventDetection', name: "EventDetection",
components: { components: {
Railway, Railway,
RailWayDay, RailWayDay,
@ -42,11 +42,11 @@ export default {
TypeAnalysis, TypeAnalysis,
MonthStatistice, MonthStatistice,
EventQuery, EventQuery,
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -68,7 +68,7 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
@ -76,10 +76,8 @@ export default {
width: calc(100% / 4 - 25px * 3); width: calc(100% / 4 - 25px * 3);
min-width: 475px; min-width: 475px;
margin-right: 15px; margin-right: 15px;
} }
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -107,13 +105,12 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 0px; margin-top: 0px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
.foot-w { .foot-w {
width: 100%; width: 100%;
} }
.foot-l { .foot-l {
@ -130,4 +127,3 @@ export default {
} }
} }
</style> </style>

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
View File

@ -189,7 +189,7 @@ var options = {
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: "5", borderRadius: "5",
borderWidth: 2, borderWidth: 4,
borderType: "solid", borderType: "solid",
borderCap: "round", borderCap: "round",
borderJoin: "round", borderJoin: "round",

7
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
View File

@ -55,6 +55,10 @@ nameList.map((item, index) => {
}); });
var options = { var options = {
tooltip: {
show: true,
trigger: "axis",
},
grid: { grid: {
top: "5%", //上边距 top: "5%", //上边距
right: "20px", //右边距 right: "20px", //右边距
@ -157,6 +161,9 @@ var options = {
borderRadius: 6, borderRadius: 6,
}, },
}, },
tooltip: {
show: false,
},
}, },
], ],
}; };

8
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js
View File

@ -1,5 +1,9 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var options = { var options = {
tooltip: {
show: true,
trigger: "axis",
},
axisPointer: { axisPointer: {
link: [ link: [
{ {
@ -127,7 +131,7 @@ var options = {
], ],
series: [ series: [
{ {
name: "Evaporation", name: "",
type: "line", type: "line",
symbolSize: 0, symbolSize: 0,
lineStyle: { lineStyle: {
@ -160,7 +164,7 @@ var options = {
], ],
}, },
{ {
name: "Rainfall", name: "",
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 0, symbolSize: 0,

686
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/auditAnalytics/assets/charts.js
View File

@ -1,391 +1,399 @@
var res = [ var res = [
{ value: 50, name: '情报板发布' }, { value: 50, name: "情报板发布" },
{ value: 1, name: '' }, { value: 20, name: "微博发布" },
{ value: 20, name: '微博发布' }, { value: 30, name: "服务网站" },
{ value: 1, name: '' }, ];
{ value: 30, name: '服务网站' }, // var res = this.evaluatedCountList;
{ value: 1, name: '' }, var data1 = [],
]; data2 = [],
// var res = this.evaluatedCountList; data3 = [],
var data1 = [], data2 = [], data3 = [], legendData = []; legendData = [];
var curIndex = 0; var curIndex = 0;
var index = 0; var index = 0;
let angle = 0; //角度，用来做简单的动画效果的 let angle = 0; //角度，用来做简单的动画效果的
for (var i = 0; i < res.length; i++) { for (var i = 0; i < res.length; i++) {
data1.push({
value: res[i].value,
name: res[i].name,
});
data2.push({
value: res[i].value,
name: res[i].name,
itemStyle: {
opacity: 0.4,
},
});
data1.push({ data3.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
}) itemStyle: {
data2.push({ opacity: 0.1,
value: res[i].value, },
name: res[i].name, });
itemStyle: { if (res[i].name != "") legendData.push(res[i].name);
opacity: 0.4, }
},
})
data3.push({ var options = {
value: res[i].value, color: ["#5CC5FF", "#54EFD5", "#FD9666", "#5C8CFE", "#51D5AD"],
name: res[i].name, title: [
itemStyle: { {
opacity: 0.1, text: "999",
top: "27%",
textAlign: "center",
left: "49%",
textStyle: {
color: "#ffffff",
fontSize: 30,
fontFamily: "PangMenZhengDao",
}, },
}) },
if ( res[i].name != "" ) {
legendData.push(res[i].name); text: "总数",
} top: "38%",
textAlign: "center",
var options = { left: "49%",
color: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], textStyle: {
title: [ color: "rgba(242, 252, 253, 0.84)",
{ fontSize: 14,
text:'999', fontWeight: 400,
top: '27%',
textAlign: 'center',
left: '49%',
textStyle: {
color: '#ffffff',
fontSize: 30,
fontFamily: 'PangMenZhengDao',
},
}, },
{ },
text: '总数', ],
top: '38%', grid: {
textAlign: 'center', top: "3%",
left: '49%', left: "6%",
textStyle: { right: "6%",
color: 'rgba(242, 252, 253, 0.84)', bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "item",
// formatter: '{b} : {c}:{d}'
},
legend: {
orient: "vertical",
height: "80px",
// left: "10%",
top: "68%",
itemWidth: 10,
itemHeight: 10,
icon: "circle",
textStyle: {
color: "#ffffff",
fontSize: 14,
lineHeight: 22,
rich: {
text: {
width: 80,
marginLeft: 32,
fontSize: 14,
},
number: {
fontSize: 14,
color: "#37E7FF",
marginLeft: 32,
fontWeight: "bold",
},
unit: {
fontSize: 14, fontSize: 14,
fontWeight: 400,
}, },
}, },
],
grid: {
top: '3%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
}, },
tooltip: { data: legendData,
trigger: 'item', formatter(name) {
formatter: '{b} : {c}:{d}' if (name == "") return "";
}, const newData = res;
legend: { let tarValue = 0;
orient: '', let total = 0;
left: '10%', for (let i = 0; i < newData.length; i++) {
top: '68%', total += newData[i].value;
itemWidth: 10, if (newData[i].name === name) {
itemHeight: 10, tarValue = newData[i].value;
icon:"circle",
textStyle: {
color: "#ffffff",
fontSize: 14,
lineHeight: 22,
rich: {
text: {
marginLeft:32,
fontSize: 14,
},
number: {
fontSize: 14,
color: "#37E7FF",
marginLeft:32,
fontWeight: 'bold'
},
unit: {
fontSize: 14,
}
} }
}, }
data: legendData, var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
formatter(name) { const arr = name + " " + tarValue;
if ( name == "" ) return ""; return `{text|${name}} {number|${percert}%}`;
const newData = res; },
let tarValue = 0; pageIconColor: "#fff",
let total = 0; pageIconSize: 10,
for (let i = 0; i < newData.length; i++) { pageTextStyle: {
total += newData[i].value; color: "#fff",
if (newData[i].name === name) {
tarValue = newData[i].value;
}
}
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
const arr = name + ' ' + tarValue;
return `{text|${name}} {number|${percert}%}`;;
},
}, },
series: [ type: "scroll",
/** 饼图上刻度 */ pageButtonPosition: "end",
},
series: [
/** 饼图上刻度 */
{ {
type: 'gauge', type: "gauge",
center: ['50%', '35%'], center: ["50%", "35%"],
radius: '40%', // 错位调整此处 radius: "40%", // 错位调整此处
startAngle: 0, startAngle: 0,
endAngle: 360, endAngle: 360,
splitNumber: 52, splitNumber: 52,
axisLine: { show: false }, axisLine: { show: false },
splitLine: { splitLine: {
// length: 39, // length: 39,
length: '2', length: "2",
lineStyle: { lineStyle: {
width: 5, width: 5,
color: '#5CC5FF' color: "#5CC5FF",
} },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: false } axisLabel: { show: false },
}, },
/** 绘制外部圆弧-2-开始圆点 <left-top> */ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (350 + -angle) * Math.PI / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: (120 + -angle) * Math.PI / 180 endAngle: ((120 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
},
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
let x0 = api.getWidth() / 2; coordinateSystem: "none",
let y0 = api.getHeight() / 2 - 59; renderItem: (params, api) => {
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; let x0 = api.getWidth() / 2;
return { let y0 = api.getHeight() / 2 - 59;
type: 'circle', let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
shape: { return {
/** 角度175° 外弧2开始角度 */ type: "circle",
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), shape: {
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), /** 角度175° 外弧2开始角度 */
r: 4 cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
}, cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
style: { r: 4,
fill: '#5BC4FF', },
stroke: '#5BC4FF' style: {
}, fill: "#5BC4FF",
silent: true stroke: "#5BC4FF",
} },
}, silent: true,
data: [0] };
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { return {
cx: api.getWidth() / 2, type: "arc",
cy: api.getHeight() / 2 - 59, shape: {
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, cx: api.getWidth() / 2,
startAngle: (150 + -angle) * Math.PI / 180, cy: api.getHeight() / 2 - 59,
endAngle: (-30 + -angle) * Math.PI / 180 r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
}, startAngle: ((150 + -angle) * Math.PI) / 180,
style: { endAngle: ((-30 + -angle) * Math.PI) / 180,
fill: 'transparent',
stroke: '#5BC4FF66',
lineWidth: 2.6
},
silent: true
}
}, },
data: [0] style: {
}, fill: "transparent",
{ stroke: "#5BC4FF66",
type: 'custom', lineWidth: 2.6,
coordinateSystem: 'none', },
renderItem: (params, api) => { silent: true,
let x0 = api.getWidth() / 2; };
let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
return {
type: 'circle',
shape: {
/** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
r: 4
},
style: {
fill: '#5BC4FF',
stroke: '#5BC4FF'
},
silent: true
}
},
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { let x0 = api.getWidth() / 2;
cx: api.getWidth() / 2, let y0 = api.getHeight() / 2 - 59;
cy: api.getHeight() / 2 - 59, let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, return {
startAngle: (590 + -angle) * Math.PI / 180, type: "circle",
endAngle: (350 + -angle) * Math.PI / 180 shape: {
}, /** 角度175° 外弧2开始角度 */
style: { cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
fill: 'transparent', cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
stroke: '#5BC4FF66', r: 4,
lineWidth: 2.6 },
}, style: {
silent: true fill: "#5BC4FF",
} stroke: "#5BC4FF",
}, },
data: [0] silent: true,
};
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
let x0 = api.getWidth() / 2; coordinateSystem: "none",
let y0 = api.getHeight() / 2 - 59; renderItem: (params, api) => {
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; return {
return { type: "arc",
type: 'circle', shape: {
shape: { cx: api.getWidth() / 2,
/** 角度175° 外弧2开始角度 */ cy: api.getHeight() / 2 - 59,
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), startAngle: ((590 + -angle) * Math.PI) / 180,
r: 4 endAngle: ((350 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: '#5BC4FF', fill: "transparent",
stroke: '#5BC4FF' stroke: "#5BC4FF66",
}, lineWidth: 2.6,
silent: true },
} silent: true,
}, };
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { let x0 = api.getWidth() / 2;
cx: api.getWidth() / 2, let y0 = api.getHeight() / 2 - 59;
cy: api.getHeight() / 2 - 59, let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, return {
startAngle: (90 + -angle) * Math.PI / 180, type: "circle",
endAngle: (160 + -angle) * Math.PI / 180 shape: {
}, /** 角度175° 外弧2开始角度 */
style: { cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
fill: 'transparent', cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
stroke: '#5BC4FF66', r: 4,
lineWidth: 2.6 },
}, style: {
silent: true fill: "#5BC4FF",
} stroke: "#5BC4FF",
}, },
data: [0] silent: true,
};
}, },
{ data: [0],
type: 'pie', },
radius: ['45%', '39%'], {
center: ['50%', '35%'], type: "custom",
z: 10, coordinateSystem: "none",
label: { renderItem: (params, api) => {
show: false, return {
position: 'center', type: "arc",
formatter: (params) => { shape: {
return params.name + "\r\n" + params.value cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((160 + -angle) * Math.PI) / 180,
}, },
rich: { style: {
total: { fill: "transparent",
fontSize: 16, stroke: "#5BC4FF66",
color: '#04F5FE', lineWidth: 2.6,
},
efficiency: {
fontSize: 12,
color: '#00FD6D',
},
}, },
color: '#FFFFFF', silent: true,
fontSize: 12, };
lineHeight: 16, },
data: [0],
},
{
type: "pie",
radius: ["45%", "39%"],
center: ["50%", "35%"],
z: 10,
label: {
show: false,
position: "center",
formatter: (params) => {
return params.name + "\r\n" + params.value;
}, },
data: data1, rich: {
labelLine: { total: {
show: false, fontSize: 16,
color: "#04F5FE",
},
efficiency: {
fontSize: 12,
color: "#00FD6D",
},
}, },
itemStyle: { color: "#FFFFFF",
normal: { fontSize: 12,
borderWidth: 6, lineHeight: 16,
shadowBlur: 10,
borderRadius: 50, // 圆角
}
}
}, },
{ data: data1,
type: 'pie', labelLine: {
radius: ['25%', '39%'], show: false,
center: ['50%', '35%'], },
label: { itemStyle: {
show: false, normal: {
borderRadius: "5",
borderWidth: 4,
borderType: "solid",
borderColor: "#0C2D3A",
}, },
data: data2, },
labelLine: { },
show: false, {
type: "pie",
radius: ["25%", "39%"],
center: ["50%", "35%"],
label: {
show: false,
},
data: data2,
labelLine: {
show: false,
},
itemStyle: {
normal: {
borderRadius: "5",
borderWidth: 4,
borderType: "solid",
borderColor: "#0C2D3A",
}, },
itemStyle: {
normal: {
borderWidth: 6,
shadowBlur: 10,
borderRadius: 0, // 圆角
}
}
}, },
], },
],
}; };
export default options export default options;

696
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/channelAnalytics/assets/charts.js
View File

@ -1,392 +1,406 @@
var res = [ var res = [
{ value: 20, name: '情报板发布' }, { value: 20, name: "情报板发布" },
{ value: 1, name: '' }, { value: 20, name: "微博发布" },
{ value: 20, name: '微博发布' }, { value: 20, name: "服务网站" },
{ value: 1, name: '' }, { value: 20, name: "短信发布" },
{ value: 20, name: '服务网站' }, { value: 20, name: "微信发布" },
{ value: 1, name: '' }, ];
{ value: 20, name: '短信发布' }, // var res = this.evaluatedCountList;
{ value: 1, name: '' }, var data1 = [],
{ value: 20, name: '微信发布' }, data2 = [],
{ value: 1, name: '' }, data3 = [],
]; legendData = [];
// var res = this.evaluatedCountList; var curIndex = 0;
var data1 = [], data2 = [], data3 = [], legendData = []; var index = 0;
var curIndex = 0;
var index = 0;
for (var i = 0; i < res.length; i++) { for (var i = 0; i < res.length; i++) {
data1.push({ data1.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
}) });
data2.push({ data2.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.4, opacity: 0.4,
}, },
}) });
data3.push({ data3.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.1, opacity: 0.1,
},
});
if (res[i].name != "") legendData.push(res[i].name);
}
let angle = 0; //角度，用来做简单的动画效果的
var options = {
color: ["#68F4DD", "#FFDD69", "#3CC3F0", "#5C8CFE", "#51D5AD"],
title: [
{
text: "999",
top: "27%",
textAlign: "center",
left: "49%",
textStyle: {
color: "#ffffff",
fontSize: 30,
fontFamily: "PangMenZhengDao",
}, },
}) },
if ( res[i].name != "" ) {
legendData.push(res[i].name); text: "总数",
} top: "38%",
let angle = 0; //角度，用来做简单的动画效果的 textAlign: "center",
var options = { left: "49%",
color: ['#68F4DD', 'transparent', '#FFDD69', 'transparent', '#3CC3F0', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], textStyle: {
title: [ color: "rgba(242, 252, 253, 0.84)",
{ fontSize: 14,
text:'999', fontWeight: 400,
top: '27%',
textAlign: 'center',
left: '49%',
textStyle: {
color: '#ffffff',
fontSize: 30,
fontFamily: 'PangMenZhengDao',
},
}, },
{ },
text: '总数', ],
top: '38%', grid: {
textAlign: 'center', top: "3%",
left: '49%', left: "6%",
textStyle: { right: "6%",
color: 'rgba(242, 252, 253, 0.84)', bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "item",
// formatter: "{b} : {c}:{d}",
},
legend: {
orient: "vertical",
// width: "350px",
height: "80px",
// left: "10%",
top: "68%",
itemWidth: 10,
itemHeight: 10,
icon: "circle",
textStyle: {
color: "#ffffff",
fontSize: 12,
lineHeight: 22,
rich: {
text: {
width: 80,
marginLeft: 32,
fontSize: 14,
},
number: {
fontSize: 14,
color: "#37E7FF",
marginLeft: 32,
fontWeight: "bold",
},
unit: {
fontSize: 14, fontSize: 14,
fontWeight: 400,
}, },
}, },
],
grid: {
top: '3%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}:{d}'
}, },
legend: { data: legendData,
orient: '', formatter(name) {
left: '10%', const newData = res;
top: '68%', let tarValue = 0;
itemWidth: 10, let total = 0;
itemHeight: 10, for (let i = 0; i < newData.length; i++) {
icon:"circle", total += newData[i].value;
textStyle: { if (newData[i].name === name) {
color: "#ffffff", tarValue = newData[i].value;
fontSize: 14,
lineHeight: 22,
rich: {
text: {
marginLeft:32,
fontSize: 14,
},
number: {
fontSize: 14,
color: "#37E7FF",
marginLeft:32,
fontWeight: 'bold'
},
unit: {
fontSize: 14,
}
}
},
data: legendData,
formatter(name) {
const newData = res;
let tarValue = 0;
let total = 0;
for (let i = 0; i < newData.length; i++) {
total += newData[i].value;
if (newData[i].name === name) {
tarValue = newData[i].value;
}
} }
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); }
const arr = name + ' ' + tarValue; var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
return `{text|${name}} {number|${percert}%}`;; const arr = name + " " + tarValue;
}, return `{text|${name}} {number|${percert}%}`;
},
pageIconColor: "#fff",
pageIconSize: 10,
pageTextStyle: {
color: "#fff",
}, },
series: [ type: "scroll",
/** 饼图上刻度 */ pageButtonPosition: "end",
},
series: [
/** 饼图上刻度 */
{ {
type: 'gauge', type: "gauge",
center: ['50%', '35%'], center: ["50%", "35%"],
radius: '46%', // 错位调整此处 radius: "46%", // 错位调整此处
startAngle: 0, startAngle: 0,
endAngle: 360, endAngle: 360,
splitNumber: 52, splitNumber: 52,
axisLine: { show: false }, axisLine: { show: false },
splitLine: { splitLine: {
// length: 39, // length: 39,
length: '2', length: "2",
lineStyle: { lineStyle: {
width: 5, width: 5,
color: '#5CC5FF' color: "#5CC5FF",
} },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: false } axisLabel: { show: false },
}, },
/** 绘制外部圆弧-2-开始圆点 <left-top> */ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (350 + -angle) * Math.PI / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: (120 + -angle) * Math.PI / 180 endAngle: ((120 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
},
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
let x0 = api.getWidth() / 2; coordinateSystem: "none",
let y0 = api.getHeight() / 2 - 59; renderItem: (params, api) => {
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; let x0 = api.getWidth() / 2;
return { let y0 = api.getHeight() / 2 - 59;
type: 'circle', let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
shape: { return {
/** 角度175° 外弧2开始角度 */ type: "circle",
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), shape: {
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), /** 角度175° 外弧2开始角度 */
r: 4 cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
}, cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
style: { r: 4,
fill: '#5BC4FF', },
stroke: '#5BC4FF' style: {
}, fill: "#5BC4FF",
silent: true stroke: "#5BC4FF",
} },
}, silent: true,
data: [0] };
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { return {
cx: api.getWidth() / 2, type: "arc",
cy: api.getHeight() / 2 - 59, shape: {
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, cx: api.getWidth() / 2,
startAngle: (150 + -angle) * Math.PI / 180, cy: api.getHeight() / 2 - 59,
endAngle: (-30 + -angle) * Math.PI / 180 r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
}, startAngle: ((150 + -angle) * Math.PI) / 180,
style: { endAngle: ((-30 + -angle) * Math.PI) / 180,
fill: 'transparent',
stroke: '#5BC4FF66',
lineWidth: 2.6
},
silent: true
}
}, },
data: [0] style: {
}, fill: "transparent",
{ stroke: "#5BC4FF66",
type: 'custom', lineWidth: 2.6,
coordinateSystem: 'none', },
renderItem: (params, api) => { silent: true,
let x0 = api.getWidth() / 2; };
let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
return {
type: 'circle',
shape: {
/** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
r: 4
},
style: {
fill: '#5BC4FF',
stroke: '#5BC4FF'
},
silent: true
}
},
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { let x0 = api.getWidth() / 2;
cx: api.getWidth() / 2, let y0 = api.getHeight() / 2 - 59;
cy: api.getHeight() / 2 - 59, let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, return {
startAngle: (590 + -angle) * Math.PI / 180, type: "circle",
endAngle: (350 + -angle) * Math.PI / 180 shape: {
}, /** 角度175° 外弧2开始角度 */
style: { cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
fill: 'transparent', cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
stroke: '#5BC4FF66', r: 4,
lineWidth: 2.6 },
}, style: {
silent: true fill: "#5BC4FF",
} stroke: "#5BC4FF",
}, },
data: [0] silent: true,
};
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
let x0 = api.getWidth() / 2; coordinateSystem: "none",
let y0 = api.getHeight() / 2 - 59; renderItem: (params, api) => {
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; return {
return { type: "arc",
type: 'circle', shape: {
shape: { cx: api.getWidth() / 2,
/** 角度175° 外弧2开始角度 */ cy: api.getHeight() / 2 - 59,
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), startAngle: ((590 + -angle) * Math.PI) / 180,
r: 4 endAngle: ((350 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: '#5BC4FF', fill: "transparent",
stroke: '#5BC4FF' stroke: "#5BC4FF66",
}, lineWidth: 2.6,
silent: true },
} silent: true,
}, };
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { let x0 = api.getWidth() / 2;
cx: api.getWidth() / 2, let y0 = api.getHeight() / 2 - 59;
cy: api.getHeight() / 2 - 59, let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, return {
startAngle: (90 + -angle) * Math.PI / 180, type: "circle",
endAngle: (160 + -angle) * Math.PI / 180 shape: {
}, /** 角度175° 外弧2开始角度 */
style: { cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
fill: 'transparent', cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
stroke: '#5BC4FF66', r: 4,
lineWidth: 2.6 },
}, style: {
silent: true fill: "#5BC4FF",
} stroke: "#5BC4FF",
}, },
data: [0] silent: true,
};
}, },
{ data: [0],
type: 'pie', },
radius: ['45%', '40%'], {
center: ['50%', '35%'], type: "custom",
z: 10, coordinateSystem: "none",
label: { renderItem: (params, api) => {
show: false, return {
position: 'center', type: "arc",
formatter: (params) => { shape: {
return params.name + "\r\n" + params.value cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((160 + -angle) * Math.PI) / 180,
}, },
rich: { style: {
total: { fill: "transparent",
fontSize: 16, stroke: "#5BC4FF66",
color: '#04F5FE', lineWidth: 2.6,
},
efficiency: {
fontSize: 12,
color: '#00FD6D',
},
}, },
color: '#FFFFFF', silent: true,
fontSize: 12, };
lineHeight: 16, },
data: [0],
},
{
type: "pie",
radius: ["45%", "40%"],
center: ["50%", "35%"],
z: 10,
label: {
show: false,
position: "center",
formatter: (params) => {
return params.name + "\r\n" + params.value;
}, },
data: data1, rich: {
labelLine: { total: {
show: false, fontSize: 16,
color: "#04F5FE",
},
efficiency: {
fontSize: 12,
color: "#00FD6D",
},
}, },
itemStyle: { color: "#FFFFFF",
normal: { fontSize: 12,
borderWidth: 6, lineHeight: 16,
shadowBlur: 10,
borderRadius: 50, // 圆角
}
}
}, },
{ data: data1,
type: 'pie', labelLine: {
radius: ['29%', '40%'], show: false,
center: ['50%', '35%'], },
label: { itemStyle: {
show: false, // normal: {
// borderWidth: 4,
// shadowBlur: 10,
// borderRadius: 50, // 圆角
// },
normal: {
borderRadius: "5",
borderWidth: 4,
borderType: "solid",
borderColor: "#0C2D3A",
}, },
data: data2, },
labelLine: { },
show: false, {
type: "pie",
radius: ["29%", "40%"],
center: ["50%", "35%"],
label: {
show: false,
},
data: data2,
labelLine: {
show: false,
},
itemStyle: {
normal: {
borderRadius: "5",
borderWidth: 8,
borderType: "solid",
borderColor: "#0C2D3A",
}, },
itemStyle: {
normal: {
borderWidth: 6,
shadowBlur: 10,
borderRadius: 0, // 圆角
}
}
}, },
], },
],
}; };
export default options export default options;

713
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/eventTypeAnalysis/assets/charts.js
View File

@ -1,24 +1,15 @@
var res = [ var res = [
{ value: 20, name: '交通事故' }, { value: 20, name: "交通事故" },
{ value: 1, name: '' }, { value: 20, name: "车辆故障" },
{ value: 20, name: '车辆故障' }, { value: 15, name: "路障清除" },
{ value: 1, name: '' }, { value: 10, name: "交通管制" },
{ value: 15, name: '路障清除' }, { value: 5, name: "道路拥堵" },
{ value: 1, name: '' }, { value: 5, name: "异常天气" },
{ value: 10, name: '交通管制' }, { value: 5, name: "其他事件" },
{ value: 1, name: '' }, { value: 10, name: "施工建设" },
{ value: 5, name: '道路拥堵' }, { value: 10, name: "服务区异常" },
{ value: 1, name: '' }, ];
{ value: 5, name: '异常天气' }, let angle = 0; //角度，用来做简单的动画效果的
{ value: 1, name: '' },
{ value: 5, name: '其他事件' },
{ value: 1, name: '' },
{ value: 10, name: '施工建设' },
{ value: 1, name: '' },
{ value: 10, name: '服务区异常' },
{ value: 1, name: '' },
];
let angle = 0; //角度，用来做简单的动画效果的
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) { function getCirlPoint(x0, y0, r, angle) {
@ -30,383 +21,405 @@ function getCirlPoint(x0, y0, r, angle) {
}; };
} }
// var res = this.evaluatedCountList; // var res = this.evaluatedCountList;
var data1 = [], data2 = [], data3 = [], legendData = []; var data1 = [],
var curIndex = 0; data2 = [],
var index = 0; data3 = [],
legendData = [];
var curIndex = 0;
var index = 0;
for (var i = 0; i < res.length; i++) { for (var i = 0; i < res.length; i++) {
data1.push({ data1.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
}) });
data2.push({ data2.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.4, opacity: 0.4,
}, },
}) });
data3.push({ data3.push({
value: res[i].value, value: res[i].value,
name: res[i].name, name: res[i].name,
itemStyle: { itemStyle: {
opacity: 0.1, opacity: 0.1,
}, },
}) });
if ( res[i].name != "" ) if (res[i].name != "") legendData.push(res[i].name);
legendData.push(res[i].name); }
}
var options = { var options = {
color: ['#2867FF', 'transparent', '#58C3FF', 'transparent', '#FF6A3B', 'transparent','#FDA474', 'transparent','#FEE58F','transparent', '#8DFEBF','transparent', '#66F4DC', 'transparent','#33E27D', 'transparent','#5D8CFE','transparent',], color: [
title: [ "#2867FF",
{ "#58C3FF",
text:'999', "#FF6A3B",
top: '27%', "#FDA474",
textAlign: 'center', "#FEE58F",
left: '49%', "#8DFEBF",
textStyle: { "#66F4DC",
color: '#ffffff', "#33E27D",
fontSize: 30, "#5D8CFE",
fontFamily: 'PangMenZhengDao', ],
}, title: [
}, {
{ text: "999",
text: '总数', top: "27%",
top: '38%', textAlign: "center",
textAlign: 'center', left: "49%",
left: '49%', textStyle: {
textStyle: { color: "#ffffff",
color: 'rgba(242, 252, 253, 0.84)', fontSize: 30,
fontSize: 14, fontFamily: "PangMenZhengDao",
fontWeight: 400,
},
}, },
],
grid: {
top: '38%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}:{d}'
}, },
legend: { {
orient: '', text: "总数",
left: '0%', top: "38%",
top: '68%', textAlign: "center",
itemWidth: 10, left: "49%",
itemHeight: 10,
icon:"circle",
textStyle: { textStyle: {
color: "#ffffff", color: "rgba(242, 252, 253, 0.84)",
fontSize: 14, fontSize: 14,
lineHeight: 22, fontWeight: 400,
rich: {
text: {
marginLeft:32,
fontSize: 14,
},
number: {
fontSize: 14,
color: "#37E7FF",
marginLeft:32,
fontWeight: 'bold'
},
unit: {
fontSize: 14,
}
}
}, },
data: legendData, },
formatter(name) { ],
const newData = res; grid: {
let tarValue = 0; top: "38%",
let total = 0; left: "6%",
for (let i = 0; i < newData.length; i++) { right: "6%",
total += newData[i].value; bottom: "3%",
if (newData[i].name === name) { containLabel: true,
tarValue = newData[i].value; },
} tooltip: {
} trigger: "item",
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); // formatter: "{b} : {c}:{d}",
const arr = name + ' ' + tarValue; },
return `{text|${name}} {number|${percert}%}`;; legend: {
orient: "vertical",
height: "80px",
// left: "0%",
top: "68%",
itemWidth: 10,
itemHeight: 10,
icon: "circle",
textStyle: {
color: "#ffffff",
fontSize: 14,
lineHeight: 22,
rich: {
text: {
width: 80,
marginLeft: 32,
fontSize: 14,
},
number: {
fontSize: 14,
color: "#37E7FF",
marginLeft: 32,
fontWeight: "bold",
},
unit: {
fontSize: 14,
},
}, },
}, },
series: [ data: legendData,
/** 饼图上刻度 */ formatter(name) {
const newData = res;
let tarValue = 0;
let total = 0;
for (let i = 0; i < newData.length; i++) {
total += newData[i].value;
if (newData[i].name === name) {
tarValue = newData[i].value;
}
}
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
const arr = name + " " + tarValue;
return `{text|${name}} {number|${percert}%}`;
},
pageIconColor: "#fff",
pageIconSize: 10,
pageTextStyle: {
color: "#fff",
},
type: "scroll",
pageButtonPosition: "end",
},
series: [
/** 饼图上刻度 */
{ {
type: 'gauge', type: "gauge",
center: ['50%', '35%'], center: ["50%", "35%"],
radius: '46%', // 错位调整此处 radius: "46%", // 错位调整此处
startAngle: 0, startAngle: 0,
endAngle: 360, endAngle: 360,
splitNumber: 52, splitNumber: 52,
axisLine: { show: false }, axisLine: { show: false },
splitLine: { splitLine: {
// length: 39, // length: 39,
length: '2', length: "2",
lineStyle: { lineStyle: {
width: 5, width: 5,
color: '#5CC5FF' color: "#5CC5FF",
} },
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: false } axisLabel: { show: false },
}, },
/** 绘制外部圆弧-2-开始圆点 <left-top> */ /** 绘制外部圆弧-2-开始圆点 <left-top> */
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
let x0 = api.getWidth() / 2; let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2 - 59; let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
return { return {
type: 'circle', type: "circle",
shape: { shape: {
/** 角度175° 外弧2开始角度 */ /** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), cx: x0 + r * Math.cos(((350 + -angle) * Math.PI) / 180),
cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), cy: y0 + r * Math.sin(((350 + -angle) * Math.PI) / 180),
r: 4 r: 4,
}, },
style: { style: {
fill: '#5BC4FF', fill: "#5BC4FF",
stroke: '#5BC4FF' stroke: "#5BC4FF",
}, },
silent: true silent: true,
} };
}, },
data: [0] data: [0],
}, },
{ {
type: 'custom', type: "custom",
coordinateSystem: 'none', coordinateSystem: "none",
renderItem: (params, api) => { renderItem: (params, api) => {
return { return {
type: 'arc', type: "arc",
shape: { shape: {
cx: api.getWidth() / 2, cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59, cy: api.getHeight() / 2 - 59,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
startAngle: (350 + -angle) * Math.PI / 180, startAngle: ((350 + -angle) * Math.PI) / 180,
endAngle: (120 + -angle) * Math.PI / 180 endAngle: ((120 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#5BC4FF66', stroke: "#5BC4FF66",
lineWidth: 2.6 lineWidth: 2.6,
}, },
silent: true silent: true,
} };
},
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
let x0 = api.getWidth() / 2; coordinateSystem: "none",
let y0 = api.getHeight() / 2 - 59; renderItem: (params, api) => {
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; let x0 = api.getWidth() / 2;
return { let y0 = api.getHeight() / 2 - 59;
type: 'circle', let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5;
shape: { return {
/** 角度175° 外弧2开始角度 */ type: "circle",
cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), shape: {
cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), /** 角度175° 外弧2开始角度 */
r: 4 cx: x0 + r * Math.cos(((150 + -angle) * Math.PI) / 180),
}, cy: y0 + r * Math.sin(((150 + -angle) * Math.PI) / 180),
style: { r: 4,
fill: '#5BC4FF', },
stroke: '#5BC4FF' style: {
}, fill: "#5BC4FF",
silent: true stroke: "#5BC4FF",
} },
}, silent: true,
data: [0] };
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { return {
cx: api.getWidth() / 2, type: "arc",
cy: api.getHeight() / 2 - 59, shape: {
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, cx: api.getWidth() / 2,
startAngle: (150 + -angle) * Math.PI / 180, cy: api.getHeight() / 2 - 59,
endAngle: (-30 + -angle) * Math.PI / 180 r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.5,
}, startAngle: ((150 + -angle) * Math.PI) / 180,
style: { endAngle: ((-30 + -angle) * Math.PI) / 180,
fill: 'transparent',
stroke: '#5BC4FF66',
lineWidth: 2.6
},
silent: true
}
}, },
data: [0] style: {
}, fill: "transparent",
{ stroke: "#5BC4FF66",
type: 'custom', lineWidth: 2.6,
coordinateSystem: 'none', },
renderItem: (params, api) => { silent: true,
let x0 = api.getWidth() / 2; };
let y0 = api.getHeight() / 2 - 59;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56;
return {
type: 'circle',
shape: {
/** 角度175° 外弧2开始角度 */
cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180),
cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180),
r: 4
},
style: {
fill: '#5BC4FF',
stroke: '#5BC4FF'
},
silent: true
}
},
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { let x0 = api.getWidth() / 2;
cx: api.getWidth() / 2, let y0 = api.getHeight() / 2 - 59;
cy: api.getHeight() / 2 - 59, let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, return {
startAngle: (590 + -angle) * Math.PI / 180, type: "circle",
endAngle: (350 + -angle) * Math.PI / 180 shape: {
}, /** 角度175° 外弧2开始角度 */
style: { cx: x0 + r * Math.cos(((590 + -angle) * Math.PI) / 180),
fill: 'transparent', cy: y0 + r * Math.sin(((590 + -angle) * Math.PI) / 180),
stroke: '#5BC4FF66', r: 4,
lineWidth: 2.6 },
}, style: {
silent: true fill: "#5BC4FF",
} stroke: "#5BC4FF",
}, },
data: [0] silent: true,
};
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
let x0 = api.getWidth() / 2; coordinateSystem: "none",
let y0 = api.getHeight() / 2 - 59; renderItem: (params, api) => {
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; return {
return { type: "arc",
type: 'circle', shape: {
shape: { cx: api.getWidth() / 2,
/** 角度175° 外弧2开始角度 */ cy: api.getHeight() / 2 - 59,
cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), startAngle: ((590 + -angle) * Math.PI) / 180,
r: 4 endAngle: ((350 + -angle) * Math.PI) / 180,
}, },
style: { style: {
fill: '#5BC4FF', fill: "transparent",
stroke: '#5BC4FF' stroke: "#5BC4FF66",
}, lineWidth: 2.6,
silent: true },
} silent: true,
}, };
data: [0]
}, },
{ data: [0],
type: 'custom', },
coordinateSystem: 'none', {
renderItem: (params, api) => { type: "custom",
return { coordinateSystem: "none",
type: 'arc', renderItem: (params, api) => {
shape: { let x0 = api.getWidth() / 2;
cx: api.getWidth() / 2, let y0 = api.getHeight() / 2 - 59;
cy: api.getHeight() / 2 - 59, let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56;
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, return {
startAngle: (90 + -angle) * Math.PI / 180, type: "circle",
endAngle: (160 + -angle) * Math.PI / 180 shape: {
}, /** 角度175° 外弧2开始角度 */
style: { cx: x0 + r * Math.cos(((90 + -angle) * Math.PI) / 180),
fill: 'transparent', cy: y0 + r * Math.sin(((90 + -angle) * Math.PI) / 180),
stroke: '#5BC4FF66', r: 4,
lineWidth: 2.6 },
}, style: {
silent: true fill: "#5BC4FF",
} stroke: "#5BC4FF",
}, },
data: [0] silent: true,
};
}, },
{ data: [0],
type: 'pie', },
radius: ['45%', '40%'], {
center: ['50%', '35%'], type: "custom",
z: 10, coordinateSystem: "none",
label: { renderItem: (params, api) => {
show: false, return {
position: 'center', type: "arc",
formatter: (params) => { shape: {
return params.name + "\r\n" + params.value cx: api.getWidth() / 2,
cy: api.getHeight() / 2 - 59,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.56,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((160 + -angle) * Math.PI) / 180,
}, },
rich: { style: {
total: { fill: "transparent",
fontSize: 16, stroke: "#5BC4FF66",
color: '#04F5FE', lineWidth: 2.6,
},
efficiency: {
fontSize: 12,
color: '#00FD6D',
},
}, },
color: '#FFFFFF', silent: true,
fontSize: 12, };
lineHeight: 16, },
data: [0],
},
{
type: "pie",
radius: ["45%", "40%"],
center: ["50%", "35%"],
z: 10,
label: {
show: false,
position: "center",
formatter: (params) => {
return params.name + "\r\n" + params.value;
}, },
data: data1, rich: {
labelLine: { total: {
show: false, fontSize: 16,
color: "#04F5FE",
},
efficiency: {
fontSize: 12,
color: "#00FD6D",
},
}, },
itemStyle: { color: "#FFFFFF",
normal: { fontSize: 12,
borderWidth: 6, lineHeight: 16,
shadowBlur: 10,
borderRadius: 50, // 圆角
}
}
}, },
{ data: data1,
type: 'pie', labelLine: {
radius: ['29%', '39%'], show: false,
center: ['50%', '35%'], },
label: { itemStyle: {
show: false, normal: {
borderRadius: "5",
borderWidth: 4,
borderType: "solid",
borderColor: "#0C2D3A",
}, },
data: data2, },
labelLine: { },
show: false, {
type: "pie",
radius: ["29%", "39%"],
center: ["50%", "35%"],
label: {
show: false,
},
data: data2,
labelLine: {
show: false,
},
itemStyle: {
normal: {
borderRadius: "5",
borderWidth: 4,
borderType: "solid",
borderColor: "#0C2D3A",
}, },
itemStyle: {
normal: {
borderWidth: 6,
shadowBlur: 10,
borderRadius: 0, // 圆角
}
}
}, },
], },
],
}; };
export default options export default options;

52
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/assets/charts3.js
View File

@ -19,25 +19,25 @@ let data2 = [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500];
let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
let options = { let options = {
tooltip: { tooltip: {
show: false, show: true,
trigger: "axis", trigger: "axis",
axisPointer: { // axisPointer: {
// 坐标轴指示器，坐标轴触发有效 // // 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow' // type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
}, // },
textStyle: { // textStyle: {
color: "#fff", // color: "#fff",
fontSize: 14, // fontSize: 14,
}, // },
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
borderColor: "rgba(3, 31, 71, .0)", // borderColor: "rgba(3, 31, 71, .0)",
formatter: "健康监测<br>{b1}：{c1}人", // formatter: "健康监测<br>{b1}：{c1}人",
}, },
grid: { grid: {
left: "2%", left: "0",
right: "4%", right: "0",
top: "20%", top: "80px",
bottom: "10%", bottom: "25px",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
@ -51,7 +51,7 @@ let options = {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#1C82C5", color: "#2CC9EC",
}, },
}, },
axisLabel: { axisLabel: {
@ -60,17 +60,23 @@ let options = {
rotate: "1", rotate: "1",
margin: "20", margin: "20",
textStyle: { textStyle: {
fontSize: 12, fontSize: 10,
color: "#50A2C1", color: "#fff",
}, },
}, },
}, },
yAxis: [ yAxis: [
{ {
min: 0, name: "(起)",
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "right",
verticalAlign: "center",
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#1C82C5", color: "#1D7B93",
}, },
}, },
splitLine: { splitLine: {
@ -81,9 +87,9 @@ let options = {
}, },
}, },
axisLabel: { axisLabel: {
color: "#DEEBFF", color: "#fff",
textStyle: { textStyle: {
fontSize: 12, fontSize: 10,
}, },
}, },
axisTick: { axisTick: {

77
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/nucleusThrough/index.vue
View File

@ -1,17 +1,37 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'月审核通过趋势分析'"></WgtTitle> <WgtTitle :title="'月审核通过趋势分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel_1"> <div class="searchPanel_1">
<el-date-picker size="mini" type="month" class="selectRoad" v-model="dateTime" style="width:140px;" <el-date-picker
placeholder="请选择" /> size="mini"
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" type="month"
aria-placeholder="请选季度" /> class="selectRoad"
v-model="dateTime"
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> style="width: 140px"
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button> placeholder="请选择"
/>
<el-quarter-picker
size="mini"
class="selectRoad"
style="width: 180px"
v-if="year == 'quarter'"
v-model="quarter"
aria-placeholder="请选季度"
/>
<el-button
type="primary"
size="mini"
class="btnSearch"
icon="el-icon-search"
>查询</el-button
>
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left"
>重置</el-button
>
</div> </div>
<div class="charts keep-ratio " id="nucleusThrough"></div> <div class="charts keep-ratio" id="nucleusThrough"></div>
</div> </div>
</div> </div>
</template> </template>
@ -21,34 +41,30 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts3"; import chartsStatistics from "./assets/charts3";
export default { export default {
name: 'nucleusThrough', name: "nucleusThrough",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
dateTime: "", dateTime: "",
} };
},
created() {
}, },
methods: {
}, created() {},
methods: {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('nucleusThrough')); var myChart = echarts.init(document.getElementById("nucleusThrough"));
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
@ -61,18 +77,22 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.searchPanel_1 { .searchPanel_1 {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
width: 100%; width: 50%;
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
@ -102,7 +122,7 @@ export default {
.selectRoad { .selectRoad {
width: 89px; width: 89px;
border: 1px solid #00B3CC; border: 1px solid #00b3cc;
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
@ -113,19 +133,17 @@ export default {
} }
.btnSearch { .btnSearch {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px; margin-left: 10px;
border-color: transparent; border-color: transparent;
} }
.btnReset { .btnReset {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
} }
} }
} }
@ -134,4 +152,3 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>

527
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsDay/assets/charts.js
View File

@ -1,271 +1,302 @@
/* 数据 */ /* 数据 */
let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 let nameList = [
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 "00:00",
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] "02:00",
"04:00",
"06:00",
"08:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
"22:00",
]; // 类别
let valueList = [
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903,
]; // 人数
var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"];
/* 数据整合 */ /* 数据整合 */
let dataList = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
if (index === 4) { if (index === 4) {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, color: '#FFB904' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#FF6969' // 100% 处的颜色 color: "#FFB904", // 0% 处的颜色
}], },
global: false // 缺省为 false {
offset: 1,
color: "#FF6969", // 100% 处的颜色
}, },
borderRadius: 6 ],
}, global: false, // 缺省为 false
label: { show: false } },
}) borderRadius: 6,
} else { },
dataList.push({ label: { show: false },
name: item, });
value: valueList[index], } else {
itemStyle:{ dataList.push({
borderRadius: 6 name: item,
} value: valueList[index],
}) itemStyle: {
} borderRadius: 6,
}) },
});
}
});
var options = { var options = {
legend: { tooltip: {
// orient: 'vertical', show: true,
icon: "circle", trigger: "axis",
itemHeight: 8, },
itemWidth: 8, legend: {
top: "5%", // orient: 'vertical',
x: "right", icon: "circle",
textStyle: { itemHeight: 8,
color: "#fff", itemWidth: 8,
}, top: "20px",
x: "right",
textStyle: {
color: "#fff",
}, },
grid: { },
top: '15%',//上边距 grid: {
right: '0',//右边距 top: "75px", //上边距
left: '0',//左边距 right: "0", //右边距
bottom: "10%",//下边距 left: "0", //左边距
containLabel: true, bottom: "20px", //下边距
}, containLabel: true,
xAxis: { },
type: 'category', xAxis: {
data: nameList, type: "category",
axisTick: { data: nameList,
show: false //隐藏X轴刻度 axisTick: {
}, show: false, //隐藏X轴刻度
axisLine: { },
lineStyle: { axisLine: {
color: "rgba(49, 217, 255, 0.8)" lineStyle: {
} color: "rgba(49, 217, 255, 0.8)",
},
axisLabel: {
show: true,
color: '#B6E6FF',
fontSize:8,
fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
yAxis: [{ axisLabel: {
type: 'value', show: true,
name: "", color: "#fff",
max: 1200, fontSize: 10,
min:0, },
splitNumber:5, },
yAxis: [
{
type: "value",
name: "(起)",
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: "#fff",
fontSize: 13, fontSize: 10,
fontFamily: 'Source Han Sans CN-Regular', align: "right",
align: "left", verticalAlign: "center",
verticalAlign: "center",
}, },
axisLabel: { axisLabel: {
fontSize: 13, fontSize: 10,
color: '#B6E6FF', color: "#fff",
fontFamily: 'HarmonyOS Sans-Regular', // formatter:function(value,index){
// formatter:function(value,index){ // return yList[index]
// return yList[index] // }
// }
}, },
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(49, 217, 255, 0.5)', color: "rgba(49, 217, 255, 0.5)",
} },
},
},
],
series: [
{
name: "情报板发布",
type: "line",
symbol: "circle",
symbolSize: 0,
smooth: true,
areaStyle: {
width: 4,
opacity: 0.25,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0.389, color: "#32BB8A90" },
{ offset: 1, color: "#32BB8A00" },
],
global: false,
},
},
// yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: {
color: "#32BB8A",
},
lineStyle: {
width: 2,
}, },
}],
series: [
{
name: '情报板发布',
type: 'line',
symbol: 'circle',
symbolSize: 0,
smooth: true,
areaStyle: {
width: 4,
opacity: 0.25,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0.389, color: "#32BB8A90" },
{ offset: 1, color: "#32BB8A00" },
],
global: false,
},
},
// yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: {
color: '#32BB8A',
},
lineStyle: {
width:2,
},
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 data: [
}, 1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
{ ], // 折线图的数据
name: '服务网站', },
type: 'line', {
symbol: 'circle', name: "服务网站",
symbolSize: 0, type: "line",
symbol: "circle",
symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#08BAF4', color: "#08BAF4",
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0.389, color: "#08BAF490" }, { offset: 0.389, color: "#08BAF490" },
{ offset: 1, color: "#08BAF400" }, { offset: 1, color: "#08BAF400" },
], ],
global: false, global: false,
}, },
}, },
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 data: [
}, 600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600,
{ ], // 折线图的数据
name: '微信发布', },
type: 'line', {
symbol: 'circle', name: "微信发布",
symbolSize: 0, type: "line",
// yAxisIndex: 1, // 与第二个 y 轴关联 symbol: "circle",
itemStyle: { symbolSize: 0,
color: '#E2BA74', // yAxisIndex: 1, // 与第二个 y 轴关联
}, itemStyle: {
smooth: true, color: "#E2BA74",
areaStyle: { },
width: 4, smooth: true,
opacity: 0.25, areaStyle: {
color: { width: 4,
type: 'linear', opacity: 0.25,
x: 0, color: {
y: 0, type: "linear",
x2: 0, x: 0,
y2: 1, y: 0,
colorStops: [ x2: 0,
{ offset: 0.389, color: "#E2BA7490" }, y2: 1,
{ offset: 1, color: "#E2BA7400" }, colorStops: [
], { offset: 0.389, color: "#E2BA7490" },
global: false, { offset: 1, color: "#E2BA7400" },
}, ],
}, global: false,
lineStyle: { },
width: 2, },
}, lineStyle: {
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 width: 2,
},{ },
name: '微博发布', data: [
type: 'line', 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
symbol: 'circle', ], // 折线图的数据
symbolSize: 0, },
// yAxisIndex: 1, // 与第二个 y 轴关联 {
itemStyle: { name: "微博发布",
color: '#51BFA4', type: "line",
}, symbol: "circle",
smooth: true, symbolSize: 0,
areaStyle: { // yAxisIndex: 1, // 与第二个 y 轴关联
width: 4, itemStyle: {
opacity: 0.25, color: "#51BFA4",
color: { },
type: 'linear', smooth: true,
x: 0, areaStyle: {
y: 0, width: 4,
x2: 0, opacity: 0.25,
y2: 1, color: {
colorStops: [ type: "linear",
{ offset: 0.389, color: "#51BFA490" }, x: 0,
{ offset: 1, color: "#51BFA400" }, y: 0,
], x2: 0,
global: false, y2: 1,
}, colorStops: [
}, { offset: 0.389, color: "#51BFA490" },
lineStyle: { { offset: 1, color: "#51BFA400" },
width: 2, ],
}, global: false,
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 },
},{ },
name: '短信发布', lineStyle: {
type: 'line', width: 2,
symbol: 'circle', },
symbolSize: 0, data: [
// yAxisIndex: 1, // 与第二个 y 轴关联 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
itemStyle: { ], // 折线图的数据
color: '#08BAF4', },
}, {
smooth: true, name: "短信发布",
areaStyle: { type: "line",
width: 4, symbol: "circle",
opacity: 0.25, symbolSize: 0,
color: { // yAxisIndex: 1, // 与第二个 y 轴关联
type: 'linear', itemStyle: {
x: 0, color: "#08BAF4",
y: 0, },
x2: 0, smooth: true,
y2: 1, areaStyle: {
colorStops: [ width: 4,
{ offset: 0.389, color: "#08BAF490" }, opacity: 0.25,
{ offset: 1, color: "#08BAF400" }, color: {
], type: "linear",
global: false, x: 0,
}, y: 0,
}, x2: 0,
lineStyle: { y2: 1,
width: 2, colorStops: [
}, { offset: 0.389, color: "#08BAF490" },
data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 { offset: 1, color: "#08BAF400" },
}, ],
] global: false,
} },
},
lineStyle: {
width: 2,
},
data: [
850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480, 480, 780,
], // 折线图的数据
},
],
};
export default options; export default options;

518
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/assets/charts.js
View File

@ -1,271 +1,293 @@
/* 数据 */ /* 数据 */
let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 let nameList = [
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 "00:00",
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] "02:00",
"04:00",
"06:00",
"08:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
"22:00",
]; // 类别
let valueList = [
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, 903,
]; // 人数
var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"];
/* 数据整合 */ /* 数据整合 */
let dataList = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
if (index === 4) { if (index === 4) {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, color: '#FFB904' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#FF6969' // 100% 处的颜色 color: "#FFB904", // 0% 处的颜色
}], },
global: false // 缺省为 false {
offset: 1,
color: "#FF6969", // 100% 处的颜色
}, },
borderRadius: 6 ],
}, global: false, // 缺省为 false
label: { show: false } },
}) borderRadius: 6,
} else { },
dataList.push({ label: { show: false },
name: item, });
value: valueList[index], } else {
itemStyle:{ dataList.push({
borderRadius: 6 name: item,
} value: valueList[index],
}) itemStyle: {
} borderRadius: 6,
}) },
});
}
});
var options = { var options = {
legend: { tooltip: {
// orient: 'vertical', show: true,
icon: "circle", trigger: "axis",
itemHeight: 8, },
itemWidth: 8, legend: {
top: "5%", // orient: 'vertical',
x: "right", icon: "circle",
textStyle: { itemHeight: 8,
color: "#fff", itemWidth: 8,
}, top: "5%",
x: "right",
textStyle: {
color: "#fff",
}, },
grid: { },
top: '20%',//上边距 grid: {
right: '0',//右边距 top: "80px", //上边距
left: '0',//左边距 right: "0", //右边距
bottom: "10%",//下边距 left: "0", //左边距
containLabel: true, bottom: "10px", //下边距
}, containLabel: true,
xAxis: { },
type: 'category', xAxis: {
data: nameList, type: "category",
axisTick: { data: nameList,
show: false //隐藏X轴刻度 axisTick: {
}, show: false, //隐藏X轴刻度
axisLine: { },
lineStyle: { axisLine: {
color: "rgba(49, 217, 255, 0.8)" lineStyle: {
} color: "rgba(49, 217, 255, 0.8)",
},
axisLabel: {
show: true,
color: '#B6E6FF',
fontSize:8,
fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
yAxis: [{ axisLabel: {
type: 'value', show: true,
name: "", color: "#fff",
max: 1000, fontSize: 10,
min:0, },
splitNumber:5, },
yAxis: [
{
type: "value",
name: "(起)",
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: "#fff",
fontSize: 13, fontSize: 10,
fontFamily: 'Source Han Sans CN-Regular', align: "right",
align: "left", verticalAlign: "center",
verticalAlign: "center",
}, },
axisLabel: { axisLabel: {
fontSize: 13, fontSize: 10,
color: '#B6E6FF', color: "#fff",
fontFamily: 'HarmonyOS Sans-Regular', // fontFamily: "HarmonyOS Sans-Regular",
// formatter:function(value,index){ // formatter:function(value,index){
// return yList[index] // return yList[index]
// } // }
}, },
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(49, 217, 255, 0.5)', color: "rgba(49, 217, 255, 0.5)",
} },
},
},
],
series: [
{
name: "情报板发布",
type: "line",
symbol: "circle",
symbolSize: 0,
smooth: true,
areaStyle: {
width: 4,
opacity: 0.25,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0.389, color: "#51BFA490" },
{ offset: 1, color: "#51BFA400" },
],
global: false,
},
},
// yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: {
color: "#51BFA4",
},
lineStyle: {
width: 2,
}, },
}],
series: [
{
name: '情报板发布',
type: 'line',
symbol: 'circle',
symbolSize: 0,
smooth: true,
areaStyle: {
width: 4,
opacity: 0.25,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0.389, color: "#51BFA490" },
{ offset: 1, color: "#51BFA400" },
],
global: false,
},
},
// yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: {
color: '#51BFA4',
},
lineStyle: {
width:2,
},
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 data: [1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900], // 折线图的数据
}, },
{ {
name: '服务网站', name: "服务网站",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#08BAF4', color: "#08BAF4",
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0.389, color: "#08BAF490" }, { offset: 0.389, color: "#08BAF490" },
{ offset: 1, color: "#08BAF400" }, { offset: 1, color: "#08BAF400" },
], ],
global: false, global: false,
}, },
}, },
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 data: [600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500], // 折线图的数据
}, },
{ {
name: '微信发布', name: "微信发布",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#E2BA74', color: "#E2BA74",
}, },
smooth: true, smooth: true,
areaStyle: { areaStyle: {
width: 4, width: 4,
opacity: 0.25, opacity: 0.25,
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0.389, color: "#E2BA7490" }, { offset: 0.389, color: "#E2BA7490" },
{ offset: 1, color: "#E2BA7400" }, { offset: 1, color: "#E2BA7400" },
], ],
global: false, global: false,
}, },
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
},{ },
name: '微博发布', {
type: 'line', name: "微博发布",
symbol: 'circle', type: "line",
symbolSize: 0, symbol: "circle",
// yAxisIndex: 1, // 与第二个 y 轴关联 symbolSize: 0,
itemStyle: { // yAxisIndex: 1, // 与第二个 y 轴关联
color: '#FB6D07', itemStyle: {
}, color: "#FB6D07",
smooth: true, },
areaStyle: { smooth: true,
width: 4, areaStyle: {
opacity: 0.25, width: 4,
color: { opacity: 0.25,
type: 'linear', color: {
x: 0, type: "linear",
y: 0, x: 0,
x2: 0, y: 0,
y2: 1, x2: 0,
colorStops: [ y2: 1,
{ offset: 0.389, color: "#FB6D0799" }, colorStops: [
{ offset: 1, color: "#FB6D0700" }, { offset: 0.389, color: "#FB6D0799" },
], { offset: 1, color: "#FB6D0700" },
global: false, ],
}, global: false,
}, },
lineStyle: { },
width: 2, lineStyle: {
}, width: 2,
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 },
},{ data: [850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480], // 折线图的数据
name: '短信发布', },
type: 'line', {
symbol: 'circle', name: "短信发布",
symbolSize: 0, type: "line",
// yAxisIndex: 1, // 与第二个 y 轴关联 symbol: "circle",
itemStyle: { symbolSize: 0,
color: '#07DEFB', // yAxisIndex: 1, // 与第二个 y 轴关联
}, itemStyle: {
smooth: true, color: "#07DEFB",
areaStyle: { },
width: 4, smooth: true,
opacity: 0.25, areaStyle: {
color: { width: 4,
type: 'linear', opacity: 0.25,
x: 0, color: {
y: 0, type: "linear",
x2: 0, x: 0,
y2: 1, y: 0,
colorStops: [ x2: 0,
{ offset: 0.389, color: "#07DEFB90" }, y2: 1,
{ offset: 1, color: "#07DEFB00" }, colorStops: [
], { offset: 0.389, color: "#07DEFB90" },
global: false, { offset: 1, color: "#07DEFB00" },
}, ],
}, global: false,
lineStyle: { },
width: 2, },
}, lineStyle: {
data: [850, 410, 712, 680, 50, 280, 480,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 width: 2,
}, },
] data: [850, 410, 712, 680, 50, 280, 480, 850, 810, 712, 580, 480], // 折线图的数据
} },
],
};
export default options; export default options;

81
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/components/postTrendsMonth/index.vue
View File

@ -1,17 +1,38 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle> <WgtTitle :title="'月发布渠道趋势分析'"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel_1"> <div class="searchPanel_1">
<el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime" style="width:140px;" <el-date-picker
type="month" placeholder="请选择" /> size="mini"
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" v-if="year != 'quarter'"
aria-placeholder="请选季度" /> class="selectRoad"
v-model="dateTime"
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> style="width: 140px"
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button> type="month"
placeholder="请选择"
/>
<el-quarter-picker
size="mini"
class="selectRoad"
style="width: 180px"
v-if="year == 'quarter'"
v-model="quarter"
aria-placeholder="请选季度"
/>
<el-button
type="primary"
size="mini"
class="btnSearch"
icon="el-icon-search"
>查询</el-button
>
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left"
>重置</el-button
>
</div> </div>
<div class="charts keep-ratio " id="postTrendsMonth"></div> <div class="charts keep-ratio" id="postTrendsMonth"></div>
</div> </div>
</div> </div>
</template> </template>
@ -21,34 +42,30 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
export default { export default {
name: 'postTrendsMonth', name: "postTrendsMonth",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
dateTime: "", dateTime: "",
} };
},
created() {
}, },
methods: {
}, created() {},
methods: {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('postTrendsMonth')); var myChart = echarts.init(document.getElementById("postTrendsMonth"));
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
@ -61,7 +78,12 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -72,7 +94,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
width: 100%; width: 50%;
font-size: 14px; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
left: 20px; left: 20px;
@ -102,7 +124,7 @@ export default {
.selectRoad { .selectRoad {
width: 89px; width: 89px;
border: 1px solid #00B3CC; border: 1px solid #00b3cc;
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
@ -113,25 +135,22 @@ export default {
} }
.btnSearch { .btnSearch {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
margin-left: 10px; margin-left: 10px;
border-color: transparent; border-color: transparent;
} }
.btnReset { .btnReset {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
;
border-color: transparent; border-color: transparent;
color: white; color: white;
} }
} }
} }
} }
.charts { .charts {
height: 300px; height: 300px;
width: 100%; width: 100%;
}</style> }
</style>

311
ruoyi-ui/src/views/JiHeExpressway/pages/service/publicService/index.vue
View File

@ -1,177 +1,166 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<section class="foot"> <section class="foot">
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="公众服务统计分析" name="first"> <el-tab-pane label="公众服务统计分析" name="first">
<div class="header-shot" > <div class="header-shot">
<TopComponent /> <TopComponent />
</div> </div>
<div class="content" > <div class="content">
<ChannelAnalytics class="content-l" /> <ChannelAnalytics class="content-l" />
<EventTypeAnalysis class="content-l" /> <EventTypeAnalysis class="content-l" />
<AuditAnalytics class="content-l" /> <AuditAnalytics class="content-l" />
<PostTrendsDay class="content-l" /> <PostTrendsDay class="content-l" style="margin-right: 0" />
</div> </div>
<div class="content" > <div class="content">
<PostTrendsMonth class="content-mi" /> <PostTrendsMonth class="content-mi" />
<NucleusThrough class="content-mi" /> <NucleusThrough class="content-mi" style="margin-right: 0" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="公众服务统计查询" name="second"> <el-tab-pane label="公众服务统计查询" name="second"> </el-tab-pane>
</el-tabs>
</el-tab-pane> </section>
</el-tabs> </div>
</section> </template>
</div>
</template> <script>
import TopComponent from "./components/topComponent";
<script> import ChannelAnalytics from "./components/channelAnalytics";
import TopComponent from './components/topComponent'; import EventTypeAnalysis from "./components/eventTypeAnalysis";
import ChannelAnalytics from './components/channelAnalytics'; import AuditAnalytics from "./components/auditAnalytics";
import EventTypeAnalysis from './components/eventTypeAnalysis'; import PostTrendsDay from "./components/postTrendsDay";
import AuditAnalytics from './components/auditAnalytics'; import PostTrendsMonth from "./components/postTrendsMonth";
import PostTrendsDay from './components/postTrendsDay'; import NucleusThrough from "./components/nucleusThrough";
import PostTrendsMonth from './components/postTrendsMonth';
import NucleusThrough from './components/nucleusThrough'; export default {
name: "publicService",
export default { components: {
name: 'publicService', TopComponent,
components: { ChannelAnalytics,
TopComponent, EventTypeAnalysis,
ChannelAnalytics, AuditAnalytics,
EventTypeAnalysis, PostTrendsDay,
AuditAnalytics, PostTrendsMonth,
PostTrendsDay, NucleusThrough,
PostTrendsMonth, },
NucleusThrough data() {
}, return {
data(){ activeName: "first",
return { };
activeName:"first" },
} methods: {
}, changeTabs() {},
methods:{ },
changeTabs(){ };
</script>
}
} <style lang="scss" scoped>
::v-deep .el-tabs__item {
display: inline-flex;
justify-content: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
min-width: 128px;
position: relative;
left: 10px;
}
::v-deep .el-tabs__active-bar {
min-width: 128px;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: #133242;
opacity: 0.1;
}
.footTabs {
display: inline;
width: 100%;
}
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
.header-shot {
width: 98%;
margin: auto;
margin-top: 15px;
height: 160px;
} }
</script>
<style lang='scss' scoped>
::v-deep .el-tabs__item{
display: inline-flex;
justify-content: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
min-width:128px;
position: relative;
left:10px;
}
::v-deep .el-tabs__active-bar {
min-width:128px;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: #133242;
opacity: 0.1;
}
.footTabs {
display: inline;
width:100%;
}
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
.header-shot{
width: 98%;
margin: auto;
margin-top: 15px;
height:160px;
.content {
width: 100%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
--keep-ratio: scaleX(1);
> div {
pointer-events: auto;
} }
.content { .content-l {
width: 100%; width: calc(25%);
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
>div {
pointer-events: auto;
}
.content-l {
width: calc(25%);
margin-right:20px;
}
.content-mi { margin-right: 20px;
width: calc(50%); }
margin-right:20px; .content-mi {
} width: calc(50%);
margin-right: 20px;
}
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: calc(100% / 4 ); width: calc(100% / 4);
margin-right:20px; margin-right: 20px;
.content-m-t { .content-m-t {
width:100%; width: 100%;
height:240px; height: 240px;
margin-bottom: 20px; margin-bottom: 20px;
}
}
.content-r {
width: 49.4%;
} }
} }
.foot{ .content-r {
width: 98%; width: 49.4%;
margin: auto; }
display: flex; }
justify-content: space-between; .foot {
flex: 1; width: 98%;
pointer-events: none; margin: auto;
margin-top: 8px; display: flex;
>div { justify-content: space-between;
pointer-events: auto; flex: 1;
} pointer-events: none;
margin-top: 8px;
.foot-w { > div {
width:100%; pointer-events: auto;
}
} .foot-w {
width: 100%;
}
.foot-l { .foot-l {
width: 726px; width: 726px;
} }
.foot-m { .foot-m {
width: 613px; width: 613px;
} }
.foot-r { .foot-r {
width: 493px; width: 493px;
}
} }
} }
</style> }
</style>

Write Preview
Loading…
Cancel
Save