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

一类交调站统计echarts

develop
lau572 4 weeks ago
parent
8e18dbbd70
commit
8af98e4c9b
2 changed files with 494 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 316
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js
  2. 187
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue

316
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/charts.js
View File

@ -0,0 +1,316 @@
import * as echarts from "echarts";
var options = {
tooltip: {
show: true,
trigger: "axis",
position: function (point, params, dom, rect, size) {
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else {
// 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else {
// 上边放得下
y = pointY - boxHeight;
}
return [point[0] + 10, y];
},
formatter: (params) => {
let name = params[0].name.replace(/-/g, "")
let name1 = '济南-' + name
let name2 = '菏泽-' + name
if(params[0].axisIndex === 1){
name1 = '菏泽-' + name
name2 = '济南-' + name
}
let tip = `${name1}<br/>`;
params.forEach((item,index) =>{
if (item.axisIndex === 0){
tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value} 辆</span><br/>`
}
})
tip = tip + `<br/>${name2}<br/>`
params.forEach((item,index) =>{
if (item.axisIndex === 1){
tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value} 辆</span><br/>`
}
})
return tip;
},
},
axisPointer: {
link: [
{
xAxisIndex: "all",
},
],
},
legend: {
top: 0,
right: 0,
icon:'rect',
textStyle: {
color: "#fff",
},
itemHeight: 5,
itemWidth: 10,
data: [
{
name: "本期车流量",
itemStyle: {
color: '#6DBBFB'
}
},{
name: "去年同期",
itemStyle: {
color: '#5FA52B'
}
},
],
},
grid: [
{
left: 60,
top: '25%',
right: 10,
height: "35%",
},
{
left: 60,
right: 10,
top: "60%",
height: "35%",
},
],
xAxis: [
{
type: "category",
data: [],
axisLabel: {
show:false
},
z: 10,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
{
onZero: true,
axisLine: { show: false },
gridIndex: 1,
type: "category",
z: 10,
data: [],
position: "top",
axisLabel: {
color: "#fff",
margin: -20,
formatter: function (params) {
return `${params.substr(0,params.length-2)}\n\n${params.substr(params.length-2)}`;
},
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
name: "车流量 ",
type: "value",
axisLabel: {
color: "#FFF",
},
axisLine: {
show: true,
lineStyle: {
color: "#00D1FF",
},
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
name: "",
type: "value",
inverse: true,
axisLabel: {
color: "#FFF",
},
axisLine: {
show: true,
lineStyle: {
color: "#06AED3",
},
},
splitLine: {
show: false,
},
},
],
series: [
{
name: "本期车流量",
type: "line",
symbolSize: 0,
lineStyle: {
color: "#06AED3",
},
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#06AED300",
},
{
offset: 0,
color: "#06AED3",
},
],
false
),
},
},
data: [
57, 36, 56, 95, 125, 194, 94, 94, 74, 34, 125, 194, 94, 94, 74, 34,
],
},
{
name: "去年同期",
type: "line",
symbol: 'none',
smooth: true,
lineStyle: {
type:'dashed',
width: 1
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#5FA52B00",
},
{
offset: 0,
color: "#5FA52B55",
},
],
false
),
},
},
data: [
94, 74, 34, 125, 194, 94, 94, 74, 34,57, 36, 56, 95, 125, 194, 94,
],
},
{
name: "本期车流量",
type: "line",
symbol: "circle",
symbolSize: 0,
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true,
lineStyle: {
color: "#06AED3",
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#06AED300",
},
{
offset: 1,
color: "#06AED3",
},
],
false
),
},
},
data: [
67, 36, 56, 195, 25, 194, 94, 94, 74, 21, 195, 25, 194, 94, 94, 74, 21,
],
},
{
name: "去年同期",
type: "line",
symbol: 'none',
smooth: true,
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
type:'dashed',
width: 1
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#5FA52B00",
},
{
offset: 0,
color: "#5FA52B55",
},
],
false
),
},
},
data: [
195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
],
},
],
};
export default options;

187
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/survey/index.vue
View File

@ -10,18 +10,23 @@
导出
</ButtonGradient>
<ButtonGradient @click="onRefreshForm" class="refresh-btn">
<template #prefix>
<img src="@screen/images/refresh.svg" />
</template>
刷新
</ButtonGradient>
<template #prefix>
<img src="@screen/images/refresh.svg" />
</template>
刷新
</ButtonGradient>
</div>
<InputSearch ref="searchComp" style="width: 400px" :formList="searchFormList" @handleSearch="handleSearch" />
</div>
<!-- 内容 -->
<div class="body">
<Table :data="tableData" :span-method="mergeRow" >
<div class="flowstate">
<div class="tag1" >方向：济南<span>←</span></div>
<div class="tag2"><span>→</span>方向：菏泽</div>
<div class="chartsFs " id="surveyChart"></div>
</div>
<Table :data="tableData" :span-method="mergeRow" :height="'50%'">
<ElTableColumn label="设备名称" prop="stakeMark" width="200" align="center" header-align="center" >
<template slot-scope="scope">
@ -57,6 +62,9 @@ import Form from "@screen/components/FormConfig";
import Dialog from "@screen/components/Dialog/index.vue";
import { mapState } from "vuex";
import moment from 'moment';
import * as echarts from "echarts";
import chartOptions from "./charts";
export default {
name: 'survey',
@ -87,9 +95,20 @@ export default {
this.initData();
},
mounted(){
this.$nextTick(()=>{
if(!this.myChart){
this.myChart = echarts.init(document.getElementById("surveyChart"));
}
this.initData();
// this.searchQuery()
})
window.addEventListener("resize", () => {
if(this.myChart)
this.myChart.resize();
});
},
methods: {
mergeRow({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const start = this.tableData.findIndex(data => data.stakeMark === row.stakeMark);
@ -126,7 +145,8 @@ export default {
data: this.searchData,
});
},
initData() {
async initData() {
if(!this.searchData.timestamp){
this.searchData.timestamp = moment().format('YYYY-MM-DD') + " 00:00:01"
}
@ -140,6 +160,7 @@ export default {
}).then((result) => {
this.columnList = result.data.columnList
this.tableData = result.data.rowList
this.loadCharts(result.data)
});
},
onSizeChange(pageSize) {
@ -147,12 +168,160 @@ export default {
this.searchData.pageSize = pageSize;
this.searchData.pageNum = 1;
this.initData();
}
},
loadCharts(data){
const xAxis = data.columnList.map(x=>x.label);
chartOptions.xAxis[0].data = xAxis;
chartOptions.xAxis[1].data = xAxis;
let color = ["#2ef7f5", "#4780f5", "#b346f6", "#25ea77", "#d2040a", "#eadb06", "#0600f2", "#e67500"]
let series = []
let legendData = []
const stakeMarkMap = new Map();
data.rowList.forEach(item => {
stakeMarkMap.set(item.stakeMark, item);
});
data.rowList.forEach(item => {
const stakeMark = item.stakeMark;
if (!stakeMarkMap[stakeMark]) {
stakeMarkMap[stakeMark] = [];
}
stakeMarkMap[stakeMark].push(item);
});
stakeMarkMap.keys().forEach((stakeMark,index) =>{
legendData.push({
name: stakeMark,
itemStyle: {
color: color[index]
}
})
stakeMarkMap[stakeMark].forEach(stakeMarkData => {
let seriesData = []
data.columnList.forEach(x =>{
seriesData.push(stakeMarkData[x.key])
})
debugger
if (stakeMarkData.direction == '3'){
series.push({
name: stakeMark,
type: "line",
symbolSize: 0,
lineStyle: {
color: color[index],
},
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: "#06AED300",
},
{
offset: 0,
color: color[index],
},
],
false
),
},
},
data: seriesData,
},)
} else {
series.push({
name: stakeMark,
type: "line",
symbol: "circle",
symbolSize: 0,
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true,
lineStyle: {
color: color[index],
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#06AED300",
},
{
offset: 1,
color: color[index],
},
],
false
),
},
},
data: seriesData,
})
}
})
})
debugger
chartOptions.series = series
chartOptions.legend.data = legendData
this.myChart.setOption(chartOptions);
},
}
}
</script>
<style lang='scss' scoped>
.flowstate {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
.chartsFs {
height: 35vh;
width: 200vh;
}
.tag1 {
position: absolute;
margin-top: -15%;
margin-left: 2%;
font-size: 12px;
span{
color: #8be8fe;
font-weight: bold;
margin-left: 10px;
}
}
.tag2 {
position: absolute;
font-size: 12px;
margin-top: 15%;
margin-left: 90%;
span{
color: #8be8fe;
font-weight: bold;
margin-right: 10px;
}
}
}
.board_record {
width:100%;
height: 100%;

Write Preview
Loading…
Cancel
Save