Skip to content

H
holo-web
Commit 5b912e2f authored by ninglx's avatar ninglx
Browse files
Options

wj-smartcity 引入vue-echarts使用resize特性完成图表自适应并减少option代码量，部分字体大小自适应

parent ef8ce42a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 633 additions and 682 deletions
wj-smartcity/package.json
View file @ 5b912e2f
......@@ -49,6 +49,7 @@
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-draggable-resizable": "^2.3.0",
"vue-echarts": "^6.7.2",
"vue-router": "^3.4.6",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.5.1"
......
wj-smartcity/src/main.js
View file @ 5b912e2f
......@@ -18,6 +18,9 @@ Vue.component('vue-draggable-resizable', VueDraggableResizable)
// script引入element use
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "echarts";
import Chart from 'vue-echarts';
Vue.component('v-chart', Chart)
Vue.use(ElementUI, {
size: 'small',
})
......
wj-smartcity/src/views/signal/index.vue
View file @ 5b912e2f
......@@ -5,6 +5,7 @@
@showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
<div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
<!--切换图层 收起放开侧边栏-->
<layers-switch
ref="switch"
:show="boxesShow"
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/queueLength.vue
View file @ 5b912e2f
......@@ -12,7 +12,7 @@
</el-option>
</el-select>
</div>
<div class="d-chart" id="d-queueLength"></div>
<v-chart class="d-chart" autoresize :option="option"/>
</div>
</template>
......@@ -25,6 +25,7 @@ export default {
props:['crossData'],
data() {
return {
option:{},
turnMap: {'r':'右转','s':'直行','l':'左转'},
options: [],
selectVal: '',
......@@ -240,12 +241,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-queueLength")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
// 渲染转向级别排队图表
renderTurn() {
......@@ -383,12 +379,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-queueLength")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
},
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficFlow.vue
View file @ 5b912e2f
......@@ -14,7 +14,8 @@
</el-option>
</el-select>
</div>
<div class="d-chart" id="d-trafficFlow"></div>
<!-- <div class="d-chart" id="d-trafficFlow"></div>-->
<v-chart class="d-chart" autoresize :option="option"/>
</div>
</template>
......@@ -27,6 +28,7 @@ export default {
name: 'trafficFlow',
data() {
return {
option:{},
colors :[
"rgba(24, 144, 255, 1)",
"rgba(0, 189, 208, 1)",
......@@ -299,16 +301,10 @@ export default {
data: yDatas[key],
})
}
console.log("series", series);
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
// 渲染转向级别流量图表
renderTurn() {
......@@ -471,12 +467,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
},
// 渲染车道级流量图表
renderLane(){
......@@ -637,12 +628,7 @@ export default {
return series;
})(),
};
if (!this.chart) {
this.chart = echarts.init(
document.getElementById("d-trafficFlow")
);
}
this.chart && this.chart.setOption(option, {notMerge: true});
this.option = option
}
},
......
wj-smartcity/src/views/signal/msgs/right/detailComponents/trafficStatus.vue
View file @ 5b912e2f
<template>
<div class="full-w-h d-trafficStatus">
<div class="d-trafficStatus-pie" id="d-trafficStatus-pie"></div>
<v-chart class="d-trafficStatus-pie" autoresize :option="option"/>
<div class="legends">
<div class="legend-item" v-for="(item, index) of pieData" :key="index">
<div :style="`background-color:${colorMap[item.name]}`" class="color"></div>
......@@ -34,12 +34,50 @@ export default {
'spilloverTimeRate':'#ffd145',
'unbalanceTimeRate':'#afafaf',
'unblockedTimeRate':'#00933a'
}
},
}
},
mounted() {
this.renderCharts()
},
computed:{
option(){
return {
tooltip: {
show:false,
trigger: 'item'
},
legend: {
show:false,
right: 0,
top: 'middle',
orient: 'vertical',
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
}
},
labelLine: {
show: false
},
data: this.pieData
}
]
}
}
},
methods:{
renderCharts(){
getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
......@@ -59,45 +97,6 @@ export default {
}
}
this.pieData = result
let chartDom = document.getElementById('d-trafficStatus-pie');
if(!this.chart){
this.chart = echarts.init(chartDom);
}
console.log('result',result)
let option = {
tooltip: {
show:false,
trigger: 'item'
},
legend: {
show:false,
right: 0,
top: 'middle',
orient: 'vertical',
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
}
},
labelLine: {
show: false
},
data: result
}
]
};
option && this.chart.setOption(option);
})
}
......
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
View file @ 5b912e2f
......@@ -2,8 +2,7 @@
<msg-card class="item-keyCross" title="重点路口监测">
<div class="full-w-h" style="position: relative">
<div class="keyCrossTitle">排队长度(m)</div>
<div id="keyCross" class="full-w-h chart">
</div>
<v-chart autoresize :option="option"/>
</div>
</msg-card>
</template>
......@@ -18,66 +17,23 @@ let timer = null;
export default {
name: "keyCross",
components: {
msgCard,
msgCard
},
data() {
return {
tabsLoading: true,
charts: {},
xData:[],
chartResult:{},
};
},
methods: {
getData(){
getKeyCross({crossId:''}).then(res=>{
console.log('key cross...',res)
if(res.content){
let xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
return a
},[])
let results = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
console.log('results',results)
this.renderCharts(xData, results)
}
})
},
renderCharts(xData, lists){
let option = {
computed:{
option(){
return {
dataZoom: {
type: "inside",
startValue: Object.keys(lists).length - 6,
endValue: Object.keys(lists).length - 1,
startValue: Object.keys(this.chartResult).length - 6,
endValue: Object.keys(this.chartResult).length - 1,
},
color: [
"rgba(24, 144, 255, 1)",
......@@ -124,7 +80,7 @@ export default {
},
xAxis: {
type: "category",
data: xData,
data: this.xData,
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
......@@ -152,7 +108,9 @@ export default {
},
series: (() => {
let series = [];
for(let key in lists){
console.log('this.chartResult',this.chartResult)
for(let key in this.chartResult){
console.log('push')
let nameReal = this.$store.state.dicts.Direction.find((item) => {
return item.code == key;
}).name
......@@ -166,19 +124,58 @@ export default {
emphasis: {
focus: "series",
},
data: lists[key],
data: this.chartResult[key],
})
}
console.log("series", series);
return series;
})(),
};
this.charts.cross = echarts.init(
document.getElementById("keyCross")
);
this.charts.cross && this.charts.cross.setOption(option);
}
}
},
methods: {
getData(){
getKeyCross({crossId:''}).then(res=>{
console.log('key cross...',res)
if(res.content){
this.xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
return a
},[])
this.chartResult = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
}
})
},
},
mounted() {
let queue = [];
let needDicts = [
......
wj-smartcity/src/views/signal/msgs/trafficFlow.vue
View file @ 5b912e2f
......@@ -16,7 +16,7 @@ import msgCard from "../../../components/Standard/msg-card.vue";
import {getFlows, getSingalFlow} from "@/dao/optApi";
let timer = null;
let watchChartWc = null
export default {
name: "trafficFlow",
components: {
......@@ -370,6 +370,7 @@ export default {
this.charts.cross && this.charts.cross.setOption(option);
}
},
mounted() {
// let queue = [];
// let needDicts = [
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/mutLineChart.vue
View file @ 5b912e2f
......@@ -11,11 +11,11 @@
<div class="content-container" style="flex: 1;display: flex;flex-direction: column">
<div class="forms" style="display: flex;">
<div class="select-box">
<label>路口名称：</label>
<label class="custom-form-label">路口名称：</label>
<el-select
v-model="crossModel"
placeholder="请选择路口"
style="width: 200px;"
class="custom-form-input"
@change="initLineData"
>
<el-option
......@@ -26,9 +26,9 @@
>
</el-option>
</el-select>
<label style="margin-left: 10px;">范围：</label>
<label class="custom-form-label">范围：</label>
<el-select
style="width: 100px;"
class="custom-form-input"
v-model="scopeModel"
placeholder="请选择"
@change="scopeChange"
......@@ -59,7 +59,7 @@
</el-select>
</div>
<div class="select-box">
<label>时间粒度：</label>
<label class="custom-form-label">时间粒度：</label>
<el-select
v-model="timeModel"
placeholder="请选择"
......@@ -75,7 +75,7 @@
</el-select>
</div>
<div class="select-box">
<label>指标选择：</label>
<label class="custom-form-label">指标选择：</label>
<el-select
v-model="indexModel"
placeholder="请选择"
......
wj-smartcity/src/views/signalEvaluation/rightIndex/lineComponents/oneLineChart.vue
View file @ 5b912e2f
<template>
<div id="one-line-chart" ref="chartLine"></div>
<v-chart class="chart" autoresize :option="chartLineOption"/>
</template>
<script>
......@@ -15,15 +15,16 @@ export default {
};
},
mounted() {
// if (this.data1 && this.data2) {
// this.getChart();
// }
},
computed: {},
props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
methods: {
getChart() {
let [cur, com] = [this.data1, this.data2]
computed: {
chartLineOption(){
let [cur, com] = [[],[]]
if(this.data1?.length){
cur = this.data1
}
if(this.data2?.length){
com = this.data2
}
const xData = cur.map((item) => item.metricTime);
const xData1 = com.map((item) => item.metricTime);
let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
......@@ -67,15 +68,13 @@ export default {
boundaryGap: false,
data: xData,
}
let myChart = echarts.init(this.$refs.chartLine);
let option = {
return {
legend:{
show: true,
icon:'circle',
textStyle: {
color: 'rgba(255,255,255,0.8)',
}
},
backgroundColor: "transparent",
tooltip: {
......@@ -119,17 +118,13 @@ export default {
},
],
series: series,
};
myChart.setOption(option, true);
watchChartWc = new ResizeObserver(() => {
myChart.resize()
})
watchChartWc.observe(document.getElementById('one-line-chart'))
},
}
}
},
props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
methods: {
},
beforeDestroy() {
watchChartWc?.unobserve(document.getElementById('one-line-chart'))
}
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment