|
|
<template>
|
|
|
<div style="display: block;width:100%;height: 100%">
|
|
|
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">未拆分金额(元)</b></div>
|
|
|
<div id="noDivLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {ref} from "vue";
|
|
|
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
|
|
|
|
|
|
var _this;
|
|
|
export default {
|
|
|
name: "noDivLineDetail",
|
|
|
data() {
|
|
|
return {
|
|
|
loading:ref(false),
|
|
|
//dateTime:'2024-07-22'
|
|
|
}
|
|
|
},
|
|
|
props: ['dataTime'],
|
|
|
methods: {
|
|
|
initOption(dataX,dataFlow) {
|
|
|
let myChart = this.$echarts.init(document.getElementById('noDivLineDetail'))
|
|
|
// 绘制图表
|
|
|
this.option = {
|
|
|
title : {
|
|
|
text: '',
|
|
|
subtext: ''
|
|
|
},
|
|
|
tooltip : {
|
|
|
trigger: 'axis',
|
|
|
//position:['20px','20px']
|
|
|
},
|
|
|
legend: {
|
|
|
data:["金额(元)"]
|
|
|
},
|
|
|
toolbox: {
|
|
|
show : true,
|
|
|
orient: 'vertical',
|
|
|
title : {
|
|
|
line : '折线图切换',
|
|
|
bar : '柱形图切换'
|
|
|
|
|
|
},
|
|
|
feature : {
|
|
|
mark : {show: true},
|
|
|
//垂直显示
|
|
|
//dataView : {show: true, readOnly: false},
|
|
|
magicType : {show: true,
|
|
|
title : {
|
|
|
line : '折线图切换',
|
|
|
bar : '柱形图切换'
|
|
|
|
|
|
},
|
|
|
type: ['line', 'bar']},
|
|
|
/* restore : {show: true},
|
|
|
saveAsImage : {show: true}*/
|
|
|
}
|
|
|
},
|
|
|
calculable : true,
|
|
|
xAxis :
|
|
|
{
|
|
|
type : 'category',
|
|
|
name:'日期',
|
|
|
nameTextStyle:{
|
|
|
lineHeight:30,
|
|
|
verticalAlign:'top'
|
|
|
},
|
|
|
boundaryGap : true,
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
alignWithLabel:true
|
|
|
|
|
|
},
|
|
|
axisLabel: { //设置x轴的文字
|
|
|
show:true,
|
|
|
interval:0,//使x轴横坐标全部显示
|
|
|
//rotate:45,
|
|
|
textStyle:{fontSize:10}
|
|
|
},
|
|
|
data : dataX
|
|
|
}, dataZoom: [{
|
|
|
type: 'slider',
|
|
|
show: true, //flase直接隐藏图形
|
|
|
xAxisIndex: [0],
|
|
|
backgroundColor:'rgb(233,236,238)',
|
|
|
handleColor:'rgba(147,145,145,0.81)',
|
|
|
fillerColor:'rgb(184,186,187)',
|
|
|
handleSize:30,//控制手柄大小
|
|
|
height:30,
|
|
|
left: '9%', //滚动条靠左侧的百分比
|
|
|
bottom: -5,
|
|
|
start: 0,//滚动条的起始位置
|
|
|
end: 110 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
|
|
}],
|
|
|
yAxis :{
|
|
|
type : 'value',
|
|
|
axisLabel : {
|
|
|
formatter: '{value}'
|
|
|
},
|
|
|
show:true,
|
|
|
splitLine:{
|
|
|
show:true
|
|
|
},
|
|
|
lineStyle:{
|
|
|
color:'black',
|
|
|
type:'solid',
|
|
|
width:2
|
|
|
},
|
|
|
// sync: true,
|
|
|
//splitNumber:10,
|
|
|
//position:'left'
|
|
|
},
|
|
|
series : [
|
|
|
{
|
|
|
name:'金额(元)',
|
|
|
type:'line',
|
|
|
data:dataFlow,
|
|
|
label:{
|
|
|
show: true, // 显示标签
|
|
|
position: 'top', // 标签位置
|
|
|
formatter: '{c}' // 标签格式器，{c} 代表数据值
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(this.option);
|
|
|
/*myChart.on('click', function(params) {
|
|
|
// 控制台打印数据的名称
|
|
|
_this.$emit("changeGantryCount",params.name);
|
|
|
});*/
|
|
|
}
|
|
|
},mounted() {
|
|
|
_this=this;
|
|
|
var dataParam={
|
|
|
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
|
|
|
}
|
|
|
//this.loading=true;
|
|
|
let dataX=[];
|
|
|
var data = [];
|
|
|
for(var k=10;k<17;k++){
|
|
|
dataX.push(k);
|
|
|
data.push(k+6);
|
|
|
}
|
|
|
this.initOption(dataX,data);
|
|
|
/*getGantryPassDivStatList(dataParam).then(
|
|
|
res => {
|
|
|
this.loading=false;
|
|
|
if(res.code >0){
|
|
|
let dataX=[];
|
|
|
var data = [];
|
|
|
let _data=res.data;
|
|
|
if (_data.length > 0) {
|
|
|
for(var k=0;k<_data.length;k++){
|
|
|
dataX.push(_data[k].GANTRYCOUNT);
|
|
|
data.push(_data[k].CARCOUNT);
|
|
|
}
|
|
|
}
|
|
|
this.initOption(dataX,data);
|
|
|
}
|
|
|
})*/
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
</style> |