|
|
|
@ -16,6 +16,8 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import img from '../../assets/img/brand/green.png' |
|
|
|
import img2 from '../../assets/img/brand/org.png' |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
chartData: { |
|
|
|
@ -26,8 +28,11 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
option: null, |
|
|
|
// in |
|
|
|
xAxisData: [], |
|
|
|
yData1: [], |
|
|
|
// out |
|
|
|
yData1Out: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -41,67 +46,53 @@ export default { |
|
|
|
mounted() { |
|
|
|
setTimeout(() => { |
|
|
|
// console.log(this.chartData) |
|
|
|
|
|
|
|
this.getEchart(); |
|
|
|
}, 800); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
getEchart() { |
|
|
|
this.xAxisData=[]; |
|
|
|
this.yData1=[]; |
|
|
|
this.xAxisData = []; |
|
|
|
this.yData1Out = []; |
|
|
|
this.yData1 = []; |
|
|
|
for (var i = 0; i < this.chartData.inStatistics.length; i++) { |
|
|
|
this.xAxisData.push(this.chartData.inStatistics[i].timeUnit) |
|
|
|
this.yData1.push(this.chartData.inStatistics[i].num) |
|
|
|
this.yData1Out.push(this.chartData.outStatistics[i].num) |
|
|
|
} |
|
|
|
// for (var i = 0; i < this.chartData.outStatistics.length; i++) { |
|
|
|
// this.yData1Out.push(this.chartData.outStatistics[i].num) |
|
|
|
// } |
|
|
|
// eslint-disable-next-line no-undef |
|
|
|
let myChart = echarts.init(document.getElementById('chart_bar')); |
|
|
|
let barWidth = '15%'; |
|
|
|
let dataCoord = [ |
|
|
|
{ coord: [0, 9] }, |
|
|
|
{ coord: [1, 12] }, |
|
|
|
{ coord: [2, 15] }, |
|
|
|
{ coord: [3, 18] }, |
|
|
|
{ coord: [4, 15] }, |
|
|
|
{ coord: [5, 12] }, |
|
|
|
{ coord: [6, 9] }, |
|
|
|
{ coord: [7, 12] }, |
|
|
|
{ coord: [8, 15] }, |
|
|
|
{ coord: [9, 18] }, |
|
|
|
{ coord: [10, 15] }, |
|
|
|
{ coord: [11, 12] }, |
|
|
|
]; |
|
|
|
let dataCoord2 = [ |
|
|
|
{ coord: [0, -9] }, |
|
|
|
{ coord: [1, -12] }, |
|
|
|
{ coord: [2, -15] }, |
|
|
|
{ coord: [3, -18] }, |
|
|
|
{ coord: [4, -15] }, |
|
|
|
{ coord: [5, -12] }, |
|
|
|
{ coord: [6, -9] }, |
|
|
|
{ coord: [7, -12] }, |
|
|
|
{ coord: [8, -15] }, |
|
|
|
{ coord: [9, -18] }, |
|
|
|
{ coord: [10, -15] }, |
|
|
|
{ coord: [11, -12] }, |
|
|
|
]; |
|
|
|
|
|
|
|
this.option = { |
|
|
|
// xAxis: { |
|
|
|
// data: this.xAxisData, |
|
|
|
// axisLabel: { |
|
|
|
// color: '#999', |
|
|
|
// formatter: '{value}' |
|
|
|
// }, |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// axisLine: { |
|
|
|
// show: true, |
|
|
|
// lineStyle: { |
|
|
|
// color: 'rgba(40, 103, 168, 0.3)', |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: this.xAxisData, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
axisLabel: { |
|
|
|
color: '#999', |
|
|
|
formatter: '{value}' |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: 'rgba(40, 103, 168, 0.3)', |
|
|
|
} |
|
|
|
}, |
|
|
|
formatter: '{value} 辆' |
|
|
|
} |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
@ -119,23 +110,23 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
axisLabel: { |
|
|
|
color: '#999' |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: 'rgba(40, 103, 168, 0.3)' |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// yAxis: { |
|
|
|
// axisLabel: { |
|
|
|
// color: '#999' |
|
|
|
// }, |
|
|
|
// axisTick: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// splitLine: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// axisLine: { |
|
|
|
// show: true, |
|
|
|
// lineStyle: { |
|
|
|
// color: 'rgba(40, 103, 168, 0.3)' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
grid: { |
|
|
|
top: 20, |
|
|
|
left: 20, |
|
|
|
@ -143,51 +134,188 @@ export default { |
|
|
|
bottom: 20, |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '车位使用', |
|
|
|
type: 'bar', |
|
|
|
stack: 'one', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
offset: 1, |
|
|
|
color: 'rgba(0, 0, 0, 0)' |
|
|
|
}, { |
|
|
|
offset: 0.6, |
|
|
|
color: '#466e71' |
|
|
|
}, { |
|
|
|
offset: 0, |
|
|
|
color: '#43FFFF' |
|
|
|
}]), |
|
|
|
label: { |
|
|
|
position: "top", |
|
|
|
show: true, //开启显示 |
|
|
|
textStyle: { //数值样式 |
|
|
|
color: '#fff', |
|
|
|
fontSize: 10 |
|
|
|
} |
|
|
|
legend: { |
|
|
|
itemWidth: 30, |
|
|
|
itemHeight: 30, |
|
|
|
top: '-3%', //调整位置 |
|
|
|
right: '5%',//调整位置 |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
name: '入场量', |
|
|
|
textStyle: { |
|
|
|
fontSize: 12, |
|
|
|
fontWeight: 'bolder', |
|
|
|
color: '#fff' |
|
|
|
}, |
|
|
|
icon: `image://${img}`, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '出场量', |
|
|
|
textStyle: { |
|
|
|
fontSize: 12, |
|
|
|
fontWeight: 'bolder', |
|
|
|
color: '#fff', |
|
|
|
}, |
|
|
|
icon: `image://${img2}`, |
|
|
|
} |
|
|
|
], |
|
|
|
// textStyle:{ |
|
|
|
// fontSize: 14,//字体大小 |
|
|
|
// color: '#ffffff'//字体颜色 |
|
|
|
// }, |
|
|
|
}, |
|
|
|
// series: [ |
|
|
|
// { |
|
|
|
// name: '入场量', |
|
|
|
// type: 'bar', |
|
|
|
// // stack: 'one', |
|
|
|
// barGap: "100%", // 柱图间距 |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
// offset: 1, |
|
|
|
// color: 'rgba(0, 0, 0, 0)' |
|
|
|
// }, { |
|
|
|
// offset: 0.6, |
|
|
|
// color: '#466e71' |
|
|
|
// }, { |
|
|
|
// offset: 0, |
|
|
|
// color: '#43FFFF' |
|
|
|
// }]), |
|
|
|
// label: { |
|
|
|
// position: "top", |
|
|
|
// show: true, //开启显示 |
|
|
|
// textStyle: { //数值样式 |
|
|
|
// color: '#fff', |
|
|
|
// fontSize: 10 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// barWidth: barWidth, |
|
|
|
// // markPoint: { |
|
|
|
// // symbol: 'circle', |
|
|
|
// // itemStyle: { |
|
|
|
// // normal: { |
|
|
|
// // color: '#43FFFF', |
|
|
|
// // shadowColor: '#43FFFF', |
|
|
|
// // shadowBlur: 20 |
|
|
|
// // } |
|
|
|
// // }, |
|
|
|
// // symbolSize: [5, 5], // 容器大小 |
|
|
|
// // symbolOffset: [0, 0], // 位置偏移 |
|
|
|
// // data: dataCoord, |
|
|
|
// // }, |
|
|
|
// data: this.yData1 |
|
|
|
// }, |
|
|
|
|
|
|
|
// { |
|
|
|
// name: '出场量', |
|
|
|
// type: 'bar', |
|
|
|
// // stack: 'one', |
|
|
|
// barGap: "100%", // 柱图间距 |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
// offset: 1, |
|
|
|
// color: 'rgba(0, 0, 0, 0)' |
|
|
|
// }, { |
|
|
|
// offset: 0.6, |
|
|
|
// color: '#91CC75' |
|
|
|
// }, { |
|
|
|
// offset: 0, |
|
|
|
// color: '#91CC75' |
|
|
|
// }]), |
|
|
|
// label: { |
|
|
|
// position: "top", |
|
|
|
// show: true, //开启显示 |
|
|
|
// textStyle: { //数值样式 |
|
|
|
// color: '#fff', |
|
|
|
// fontSize: 10 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
|
|
|
|
// } |
|
|
|
// }, |
|
|
|
// barWidth: barWidth, |
|
|
|
// data: this.yData1Out |
|
|
|
// }, |
|
|
|
|
|
|
|
// ] |
|
|
|
|
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '入场量', |
|
|
|
type: 'line', |
|
|
|
data: this.yData1, |
|
|
|
symbolSize:8, //设置折线上圆点大小 |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
label : { |
|
|
|
show: true, // 在折线拐点上显示数据 |
|
|
|
color:"#fff" |
|
|
|
}, |
|
|
|
lineStyle:{ |
|
|
|
width:3, // 设置虚线宽度 |
|
|
|
color:'#1BDB7F' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
barWidth: barWidth, |
|
|
|
// markPoint: { |
|
|
|
// symbol: 'circle', |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// color: '#43FFFF', |
|
|
|
// shadowColor: '#43FFFF', |
|
|
|
// shadowBlur: 20 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// symbolSize: [5, 5], // 容器大小 |
|
|
|
// symbolOffset: [0, 0], // 位置偏移 |
|
|
|
// data: dataCoord, |
|
|
|
// }, |
|
|
|
data: this.yData1 |
|
|
|
}, |
|
|
|
} |
|
|
|
// markPoint: { |
|
|
|
// data: [ |
|
|
|
// { type: 'max', name: 'Max' }, |
|
|
|
// { type: 'min', name: 'Min' } |
|
|
|
// ] |
|
|
|
// }, |
|
|
|
// markLine: { |
|
|
|
// data: [{ type: 'average', name: 'Avg' }] |
|
|
|
// } |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '出场量', |
|
|
|
type: 'line', |
|
|
|
data: this.yData1Out, |
|
|
|
symbolSize:8, //设置折线上圆点大小 |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
label : { |
|
|
|
show: true, // 在折线拐点上显示数据 |
|
|
|
position: 'bottom', |
|
|
|
color:"#fff" |
|
|
|
}, |
|
|
|
lineStyle:{ |
|
|
|
width:3, // 设置虚线宽度 |
|
|
|
color:'#EF8C62' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// markPoint: { |
|
|
|
// data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }] |
|
|
|
// }, |
|
|
|
// markLine: { |
|
|
|
// data: [ |
|
|
|
// { type: 'average', name: 'Avg' }, |
|
|
|
// [ |
|
|
|
// { |
|
|
|
// symbol: 'none', |
|
|
|
// x: '90%', |
|
|
|
// yAxis: 'max' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// symbol: 'circle', |
|
|
|
// label: { |
|
|
|
// position: 'start', |
|
|
|
// formatter: 'Max' |
|
|
|
// }, |
|
|
|
// type: 'max', |
|
|
|
// name: '最高点' |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// ] |
|
|
|
// } |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
] |
|
|
|
}; |
|
|
|
myChart.setOption(this.option, true); |
|
|
|
|
|
|
|
|
