中建四局-资源管理-柱状图重写
This commit is contained in:
yjl
parent
72698b1e10
commit
fb8806b3a2
@ -31,7 +31,9 @@
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myChart">
|
||||
<div class="myChart" ref="myChart"></div>
|
||||
|
||||
<!-- <div class="myChart">
|
||||
<JBarChart
|
||||
v-if="isblock"
|
||||
:grid="grid"
|
||||
@ -40,7 +42,7 @@
|
||||
:series="series"
|
||||
:tooltip="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="dataImg" >
|
||||
<img src="@/assets/images/noData3.png" alt srcset />
|
||||
<p>{{ $t("message.dataBoard.nodata") }}</p>
|
||||
@ -51,7 +53,7 @@
|
||||
|
||||
<script>
|
||||
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 {
|
||||
// getMaterialRequisitionTrendChart,
|
||||
@ -65,7 +67,10 @@ import {
|
||||
} from '@/assets/js/api/zhongjianFourth.js'
|
||||
|
||||
export default {
|
||||
components: { Card, JBarChart },
|
||||
components: {
|
||||
Card
|
||||
// JBarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// checkImg:false,
|
||||
@ -87,95 +92,95 @@ export default {
|
||||
label: '日'
|
||||
}
|
||||
],
|
||||
legend: ['BIM模型用量', '实际用量', '偏差比例'],
|
||||
// value1: '1',
|
||||
// value2: '1',
|
||||
grid: ['18%', '2%', '2%', '2%'],
|
||||
// legend: ['BIM模型用量', '实际用量', '偏差比例'],
|
||||
// // value1: '1',
|
||||
// // value2: '1',
|
||||
// grid: ['18%', '2%', '2%', '2%'],
|
||||
|
||||
xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
|
||||
yAxis: {
|
||||
type: 'log'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'BIM模型用量',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#6de1ee' },
|
||||
{ offset: 1, color: '#6de1ee24' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '实际用量',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#DE5F2A' },
|
||||
{ offset: 1, color: '#DE5F2A24' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '偏差比例',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(206, 190, 69)',
|
||||
barBorderRadius: 0
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 4,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 195, 3, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 195, 3, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
// xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
|
||||
// yAxis: {
|
||||
// type: 'log'
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: 'BIM模型用量',
|
||||
// type: 'bar',
|
||||
// data: [],
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#6de1ee' },
|
||||
// { offset: 1, color: '#6de1ee24' }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// name: '实际用量',
|
||||
// type: 'bar',
|
||||
// data: [],
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#DE5F2A' },
|
||||
// { offset: 1, color: '#DE5F2A24' }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// name: '偏差比例',
|
||||
// type: 'line',
|
||||
// symbolSize: 10,
|
||||
// symbol: 'circle',
|
||||
// smooth: true,
|
||||
// yAxisIndex: 1,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: 'rgb(206, 190, 69)',
|
||||
// barBorderRadius: 0
|
||||
// }
|
||||
// },
|
||||
// lineStyle: {
|
||||
// normal: {
|
||||
// width: 4,
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgba(255, 195, 3, 1)' // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgba(255, 195, 3, 1)' // 100% 处的颜色
|
||||
// }
|
||||
// ],
|
||||
// global: false // 缺省为 false
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: []
|
||||
// }
|
||||
// ],
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow'
|
||||
// },
|
||||
|
||||
formatter: function (params) {
|
||||
var str = params[0].name + '<br>'
|
||||
for (let item of params) {
|
||||
if (item.seriesName === '偏差比例') {
|
||||
str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
|
||||
} else {
|
||||
str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
|
||||
}
|
||||
}
|
||||
return str
|
||||
}
|
||||
},
|
||||
// formatter: function (params) {
|
||||
// var str = params[0].name + '<br>'
|
||||
// for (let item of params) {
|
||||
// if (item.seriesName === '偏差比例') {
|
||||
// str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
|
||||
// } else {
|
||||
// str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
|
||||
// }
|
||||
// }
|
||||
// return str
|
||||
// }
|
||||
// },
|
||||
sn: '',
|
||||
plan: [],
|
||||
actual: [],
|
||||
@ -186,11 +191,166 @@ export default {
|
||||
year: ''
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
created() {
|
||||
// this.getList();
|
||||
this.getgetMaterialTypeApi()
|
||||
// this.getgetPassConsumeRatioList()
|
||||
},
|
||||
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() {
|
||||
getMaterialTypeApi({ projectSn: this.$store.state.projectSn }).then(
|
||||
(res) => {
|
||||
@ -219,18 +379,21 @@ export default {
|
||||
typeId: this.typeId,
|
||||
year: this.checkDate
|
||||
}).then((res) => {
|
||||
console.log('查询g============================== ： ', res)
|
||||
|
||||
let passList = []
|
||||
let consumeList = []
|
||||
let deviationRatioList = []
|
||||
res.result.forEach((element) => {
|
||||
passList.push(element.plan)
|
||||
consumeList.push(element.pass)
|
||||
consumeList.push(element.consume)
|
||||
deviationRatioList.push(element.deviationRatio)
|
||||
})
|
||||
this.series[0].data = passList //计划用量 pass
|
||||
this.series[1].data = consumeList //实际用量 consume
|
||||
this.series[2].data = deviationRatioList //偏差比例 deviationRatio
|
||||
// this.series[0].data = passList //计划用量 pass
|
||||
// this.series[1].data = consumeList //实际用量 consume
|
||||
// this.series[2].data = deviationRatioList //偏差比例 deviationRatio
|
||||
console.log('查询getgetPassConsumeRatioList ： ', this.series)
|
||||
this.getEcharts(passList, consumeList, deviationRatioList)
|
||||
})
|
||||
},
|
||||
checkTypes(val) {
|
||||
@ -308,7 +471,7 @@ export default {
|
||||
}
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
// .dataImg{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user