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

更改

wangqin
zhangzhang 1 year ago
parent
2c2f3b1726
commit
4ae433b8e2
5 changed files with 260 additions and 250 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 245
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  2. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  3. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
  4. 249
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js

245
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
View File

@ -1,148 +1,151 @@
window.echartsData = [ window.echartsData = [
{ value: 25, name: '处理中' }, { value: 25, name: "处理中" },
{ value: 40, name: '待处理' }, { value: 40, name: "待处理" },
{ value: 35, name: '已处理' },] { value: 35, name: "已处理" },
];
window.colorList = [ window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"];
"#FFee0B",
"#61D8FF",
"#6AE0BC",
]
window.count = 0; window.count = 0;
echartsData.forEach((it) => { echartsData.forEach((it) => {
count += it.value; count += it.value;
}) });
var options = { var options = {
color: colorList, color: colorList,
legend: { legend: {
orient: 'vertical', orient: "vertical",
top: "center", top: "center",
icon: "circle", icon: "circle",
right: 15, right: 15,
itemGap: 16, itemGap: 16,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
rich: { rich: {
ast: { ast: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
width: 35, width: 35,
}, },
bst: { bst: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
marginLeft: 20, marginLeft: 10,
color: "#37E7FF" color: "#37E7FF",
} },
}
},
formatter: (params) => {
let count = 0;
echartsData.forEach((it) => {
count += it.value;
})
if (count == 0) count = 1;
let obj = echartsData.filter(it => { return it.name == params })
return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value / count * 100)}%}`
}, },
data: echartsData?.map(x => x), },
}, formatter: (params) => {
tooltip: { let count = 0;
trigger: 'item', echartsData.forEach((it) => {
}, count += it.value;
series: [{ });
name: '', if (count == 0) count = 1;
type: 'pie', let obj = echartsData.filter((it) => {
radius: '78%', return it.name == params;
center: ['40%', '50%'], });
roseType: 'radius', return `{ast|${obj[0].name}} {bst|${Math.round(
(obj[0].value / count) * 100
)}%}`;
},
data: echartsData?.map((x) => x),
},
tooltip: {
trigger: "item",
},
series: [
{
name: "",
type: "pie",
radius: "120px",
width: "200px",
center: ["130px", "50%"],
roseType: "radius",
label: { label: {
show: false, show: false,
position: 'outside', position: "outside",
fontSize: 16, fontSize: 16,
formatter: (params) => { formatter: (params) => {
return `{a|${params.name}} {b|${params.value / count}%}` return `{a|${params.name}} {b|${params.value / count}%}`;
}, },
rich: { rich: {
a: { a: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
}, },
b: { b: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
} },
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: echartsData.map((item, index) => { data: echartsData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index],
} },
} };
}) }),
}, { },
name: '', {
type: 'pie', name: "",
radius: '90%', type: "pie",
radius: "130px",
hoverAnimation: false, hoverAnimation: false,
emphasis: { scale: false }, emphasis: { scale: false },
center: ['40%', '50%'], center: ["130px", "50%"],
roseType: 'radius', roseType: "radius",
label: { label: {
show: false, show: false,
position: 'outside', position: "outside",
fontSize: 16, fontSize: 16,
formatter: (params) => { formatter: (params) => {
return `{a|${params.name}} ` return `{a|${params.name}} `;
}, },
rich: { rich: {
a: { a: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
} },
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
opacity: 0.3, opacity: 0.3,
shadowColor: "rgba(0, 0, 0, 0.8)", shadowColor: "rgba(0, 0, 0, 0.8)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: echartsData.map((item, index) => { data: echartsData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index],
} },
} };
}) }),
}] },
],
}; };
export default options; export default options;

4
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
View File

@ -117,8 +117,8 @@ var options = {
orient: "vertical", //改变排列方式 orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状 icon: "circle", //改变legend小图标形状
itemGap: 15, // 设置legend的间距 itemGap: 15, // 设置legend的间距
itemWidth: 10, // 设置宽度 itemWidth: 8, // 设置宽度
itemHeight: 15, // 设置高度 // itemHeight: 15, // 设置高度
itemStyle: { itemStyle: {
borderColor: "transparent", borderColor: "transparent",

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

@ -2,7 +2,8 @@
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle> <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="monthStatistics"></div> <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
<div v-else class="charts keep-ratio " id="monthStatistics"></div>
</div> </div>
</div> </div>
</template> </template>
@ -21,7 +22,7 @@ export default {
}, },
data() { data() {
return { return {
dataList: []
} }
}, },
@ -38,6 +39,7 @@ export default {
getDailyCumulativeMonth().then((res) => { getDailyCumulativeMonth().then((res) => {
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
this.dataList = res.data;
let data = res.data; let data = res.data;
let timeData = []; let timeData = [];
let datasN = []; let datasN = [];

249
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
View File

@ -1,151 +1,156 @@
window.typeAnalysisData = [ window.typeAnalysisData = [
{ value: 100, name: '行人' }, // { value: 100, name: '行人' },
// { value: 90, name: '非机动车' }, // { value: 90, name: '非机动车' },
// { value: 80, name: '拥堵' }, // { value: 80, name: '拥堵' },
// { value: 60, name: '逆行' }, // { value: 60, name: '逆行' },
// { value: 50, name: '抛洒物' }, // { value: 50, name: '抛洒物' },
// { value: 45, name: '烟火' } // { value: 45, name: '烟火' }
] ];
window.colorList = [ window.colorList = [
"#019AFF", "#019AFF",
"#3CC3F0", "#3CC3F0",
"#51D5AD", "#51D5AD",
"#FFDD69", "#FFDD69",
"#F6A73C", "#F6A73C",
"#7390FD",] "#7390FD",
];
window.colorList1 = [ window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
"#61D8FF",
"#FFB905",
"#6AE0BC",]
var options = { var options = {
color: colorList, color: colorList,
legend: { legend: {
orient: 'vertical', orient: "vertical",
top: "10", top: "10",
icon: "circle", icon: "circle",
right: 40, right: 40,
itemGap: 16, itemGap: 16,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
rich: { rich: {
ast: { ast: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
width: 30, width: 30,
}, },
bst: { bst: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
marginLeft: 20, marginLeft: 20,
color: "#37E7FF" color: "#37E7FF",
} },
}
}, },
formatter: (params) => { },
let count = 0; formatter: (params) => {
typeAnalysisData.forEach((it) => { let count = 0;
count += it.value; typeAnalysisData.forEach((it) => {
}) count += it.value;
let obj = typeAnalysisData.filter(it => { return it.name == params }) });
// console.log(obj); let obj = typeAnalysisData.filter((it) => {
return `{ast|${obj[0].name}} {bst|${Math.round((obj[0].value / count) * 100)}%}` return it.name == params;
}, });
// data: typeAnalysisData?.map(x => x.name), // console.log(obj);
}, return `{ast|${obj[0].name}} {bst|${
tooltip: { Math.round((obj[0].value / count) * 100) || 0
trigger: 'item', }%}`;
}, },
series: [{ // data: typeAnalysisData?.map(x => x.name),
name: '', },
type: 'pie', tooltip: {
radius: '80%', trigger: "item",
center: ['40%', '50%'], },
series: [
{
name: "",
type: "pie",
radius: "70%",
center: ["30%", "50%"],
clockwise: false, clockwise: false,
roseType: 'radius', roseType: "radius",
startAngle1: 180, startAngle1: 180,
label: { label: {
show: false, show: false,
position: 'outside', position: "outside",
fontSize: 16, fontSize: 16,
formatter: (params) => { formatter: (params) => {
return `{a|${params.name}}` return `{a|${params.name}}`;
}, },
rich: { rich: {
a: { a: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
} },
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
shadowColor: "rgba(0, 0, 0, 0.8)", shadowColor: "rgba(0, 0, 0, 0.8)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: typeAnalysisData.map((item, index) => { data: typeAnalysisData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index],
} },
} };
}) }),
}, { },
name: '', {
type: 'pie', name: "",
radius: '90%', type: "pie",
radius: "80%",
hoverAnimation: false, hoverAnimation: false,
emphasis: { scale: false }, emphasis: { scale: false },
clockwise: false, clockwise: false,
center: ['40%', '50%'], center: ["30%", "50%"],
roseType: 'radius', roseType: "radius",
label: { label: {
show: false, show: false,
position: 'outside', position: "outside",
fontSize: 16, fontSize: 16,
formatter: (params) => { formatter: (params) => {
return `{a|${params.name}}` return `{a|${params.name}}`;
}, },
rich: { rich: {
a: { a: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
} },
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
opacity: 0.3, opacity: 0.3,
shadowColor: "rgba(0, 0, 0, 0.8)", shadowColor: "rgba(0, 0, 0, 0.8)",
shadowBlur: 50, shadowBlur: 50,
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 10, length: 10,
length2: 30, length2: 30,
}, },
data: typeAnalysisData.map((item, index) => { data: typeAnalysisData.map((item, index) => {
return { return {
...item, ...item,
label: { label: {
color: colorList[index] color: colorList[index],
} },
} };
}) }),
}] },
],
}; };
export default options; export default options;
Write Preview
Loading…
Cancel
Save