中建四局-资源管理-柱状图重写
This commit is contained in:
yjl
parent
72698b1e10
commit
fb8806b3a2
@ -31,7 +31,9 @@
|
|||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="myChart">
|
<div class="myChart" ref="myChart"></div>
|
||||||
|
|
||||||
|
<!-- <div class="myChart">
|
||||||
<JBarChart
|
<JBarChart
|
||||||
v-if="isblock"
|
v-if="isblock"
|
||||||
:grid="grid"
|
:grid="grid"
|
||||||
@ -40,7 +42,7 @@
|
|||||||
:series="series"
|
:series="series"
|
||||||
:tooltip="tooltip"
|
:tooltip="tooltip"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- <div class="dataImg" >
|
<!-- <div class="dataImg" >
|
||||||
<img src="@/assets/images/noData3.png" alt srcset />
|
<img src="@/assets/images/noData3.png" alt srcset />
|
||||||
<p>{{ $t("message.dataBoard.nodata") }}</p>
|
<p>{{ $t("message.dataBoard.nodata") }}</p>
|
||||||
@ -51,7 +53,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Card from '../components/Card.vue'
|
import Card from '../components/Card.vue'
|
||||||
import JBarChart from '../../common/jChart/bar/JBarChart.vue'
|
// import JBarChart from '../../common/jChart/bar/JBarChart.vue'
|
||||||
import echarts from 'echarts4'
|
import echarts from 'echarts4'
|
||||||
// import {
|
// import {
|
||||||
// getMaterialRequisitionTrendChart,
|
// getMaterialRequisitionTrendChart,
|
||||||
@ -65,7 +67,10 @@ import {
|
|||||||
} from '@/assets/js/api/zhongjianFourth.js'
|
} from '@/assets/js/api/zhongjianFourth.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Card, JBarChart },
|
components: {
|
||||||
|
Card
|
||||||
|
// JBarChart
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// checkImg:false,
|
// checkImg:false,
|
||||||
@ -87,95 +92,95 @@ export default {
|
|||||||
label: '日'
|
label: '日'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
legend: ['BIM模型用量', '实际用量', '偏差比例'],
|
// legend: ['BIM模型用量', '实际用量', '偏差比例'],
|
||||||
// value1: '1',
|
// // value1: '1',
|
||||||
// value2: '1',
|
// // value2: '1',
|
||||||
grid: ['18%', '2%', '2%', '2%'],
|
// grid: ['18%', '2%', '2%', '2%'],
|
||||||
|
|
||||||
xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
|
// xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
|
||||||
yAxis: {
|
// yAxis: {
|
||||||
type: 'log'
|
// type: 'log'
|
||||||
},
|
// },
|
||||||
series: [
|
// series: [
|
||||||
{
|
// {
|
||||||
name: 'BIM模型用量',
|
// name: 'BIM模型用量',
|
||||||
type: 'bar',
|
// type: 'bar',
|
||||||
data: [],
|
// data: [],
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: '#6de1ee' },
|
// { offset: 0, color: '#6de1ee' },
|
||||||
{ offset: 1, color: '#6de1ee24' }
|
// { offset: 1, color: '#6de1ee24' }
|
||||||
])
|
// ])
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '实际用量',
|
// name: '实际用量',
|
||||||
type: 'bar',
|
// type: 'bar',
|
||||||
data: [],
|
// data: [],
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: '#DE5F2A' },
|
// { offset: 0, color: '#DE5F2A' },
|
||||||
{ offset: 1, color: '#DE5F2A24' }
|
// { offset: 1, color: '#DE5F2A24' }
|
||||||
])
|
// ])
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '偏差比例',
|
// name: '偏差比例',
|
||||||
type: 'line',
|
// type: 'line',
|
||||||
symbolSize: 10,
|
// symbolSize: 10,
|
||||||
symbol: 'circle',
|
// symbol: 'circle',
|
||||||
smooth: true,
|
// smooth: true,
|
||||||
yAxisIndex: 1,
|
// yAxisIndex: 1,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
normal: {
|
// normal: {
|
||||||
color: 'rgb(206, 190, 69)',
|
// color: 'rgb(206, 190, 69)',
|
||||||
barBorderRadius: 0
|
// barBorderRadius: 0
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
lineStyle: {
|
// lineStyle: {
|
||||||
normal: {
|
// normal: {
|
||||||
width: 4,
|
// width: 4,
|
||||||
color: {
|
// color: {
|
||||||
type: 'linear',
|
// type: 'linear',
|
||||||
x: 0,
|
// x: 0,
|
||||||
y: 0,
|
// y: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1,
|
// y2: 1,
|
||||||
colorStops: [
|
// colorStops: [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: 'rgba(255, 195, 3, 1)' // 0% 处的颜色
|
// color: 'rgba(255, 195, 3, 1)' // 0% 处的颜色
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: 'rgba(255, 195, 3, 1)' // 100% 处的颜色
|
// color: 'rgba(255, 195, 3, 1)' // 100% 处的颜色
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
global: false // 缺省为 false
|
// global: false // 缺省为 false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
data: []
|
// data: []
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
trigger: 'axis',
|
// trigger: 'axis',
|
||||||
axisPointer: {
|
// axisPointer: {
|
||||||
type: 'shadow'
|
// type: 'shadow'
|
||||||
},
|
// },
|
||||||
|
|
||||||
formatter: function (params) {
|
// formatter: function (params) {
|
||||||
var str = params[0].name + '<br>'
|
// var str = params[0].name + '<br>'
|
||||||
for (let item of params) {
|
// for (let item of params) {
|
||||||
if (item.seriesName === '偏差比例') {
|
// if (item.seriesName === '偏差比例') {
|
||||||
str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
|
// str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
|
||||||
} else {
|
// } else {
|
||||||
str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
|
// str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
return str
|
// return str
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
sn: '',
|
sn: '',
|
||||||
plan: [],
|
plan: [],
|
||||||
actual: [],
|
actual: [],
|
||||||
@ -186,11 +191,166 @@ export default {
|
|||||||
year: ''
|
year: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
created() {
|
created() {
|
||||||
// this.getList();
|
// this.getList();
|
||||||
this.getgetMaterialTypeApi()
|
this.getgetMaterialTypeApi()
|
||||||
|
// this.getgetPassConsumeRatioList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getEcharts(passList, consumeList, deviationRatioList) {
|
||||||
|
let myChart = echarts.init(this.$refs.myChart)
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '2%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '10%',
|
||||||
|
top: '16%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['BIM模型用量', '实际用量', '偏差比率'],
|
||||||
|
left: '7%',
|
||||||
|
top: '5%',
|
||||||
|
icon: 'circle',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
itemWidth: 15,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 25,
|
||||||
|
padding: [-20, 100, 0, 0]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
type: 'dashed',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#323D50'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: [5, 10],
|
||||||
|
color: '#323D50'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
type: 'dashed',
|
||||||
|
|
||||||
|
lineStyle: {
|
||||||
|
color: '#323D50'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '百分比(%)',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'right',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
type: 'dashed',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#323D50'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '偏差比率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||||||
|
smooth: true, //平滑曲线显示
|
||||||
|
symbol: 'circle', //标记的图形为实心圆
|
||||||
|
symbolSize: 8, //标记的大小
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#ffa43a',
|
||||||
|
borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框
|
||||||
|
borderWidth: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ffa43a'
|
||||||
|
},
|
||||||
|
|
||||||
|
data: deviationRatioList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'BIM模型用量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#6de1ee' },
|
||||||
|
{ offset: 1, color: '#6de1ee24' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: passList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '实际用量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#DE5F2A' },
|
||||||
|
{ offset: 1, color: '#DE5F2A24' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
|
||||||
|
data: consumeList
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
myChart.setOption(option)
|
||||||
|
},
|
||||||
|
|
||||||
getgetMaterialTypeApi() {
|
getgetMaterialTypeApi() {
|
||||||
getMaterialTypeApi({ projectSn: this.$store.state.projectSn }).then(
|
getMaterialTypeApi({ projectSn: this.$store.state.projectSn }).then(
|
||||||
(res) => {
|
(res) => {
|
||||||
@ -219,18 +379,21 @@ export default {
|
|||||||
typeId: this.typeId,
|
typeId: this.typeId,
|
||||||
year: this.checkDate
|
year: this.checkDate
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
|
console.log('查询g============================== ： ', res)
|
||||||
|
|
||||||
let passList = []
|
let passList = []
|
||||||
let consumeList = []
|
let consumeList = []
|
||||||
let deviationRatioList = []
|
let deviationRatioList = []
|
||||||
res.result.forEach((element) => {
|
res.result.forEach((element) => {
|
||||||
passList.push(element.plan)
|
passList.push(element.plan)
|
||||||
consumeList.push(element.pass)
|
consumeList.push(element.consume)
|
||||||
deviationRatioList.push(element.deviationRatio)
|
deviationRatioList.push(element.deviationRatio)
|
||||||
})
|
})
|
||||||
this.series[0].data = passList //计划用量 pass
|
// this.series[0].data = passList //计划用量 pass
|
||||||
this.series[1].data = consumeList //实际用量 consume
|
// this.series[1].data = consumeList //实际用量 consume
|
||||||
this.series[2].data = deviationRatioList //偏差比例 deviationRatio
|
// this.series[2].data = deviationRatioList //偏差比例 deviationRatio
|
||||||
console.log('查询getgetPassConsumeRatioList ： ', this.series)
|
console.log('查询getgetPassConsumeRatioList ： ', this.series)
|
||||||
|
this.getEcharts(passList, consumeList, deviationRatioList)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
checkTypes(val) {
|
checkTypes(val) {
|
||||||
@ -308,7 +471,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.myChart {
|
.myChart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .dataImg{
|
// .dataImg{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user