Compare commits
2 Commits
ea3eb0d0ca
...
847054715e
| Author | SHA1 | Date |
|---|---|---|
 luoshiwen
|
847054715e | |
|
luoshiwen
|
2504c52cd3 |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'barChart', //饼图组件
|
||||
props: {
|
||||
list: Array,
|
||||
default() {
|
||||
return [];
|
||||
return []
|
||||
},
|
||||
pageType: {
|
||||
type: String
|
||||
|
|
@ -33,15 +33,16 @@ export default {
|
|||
return {
|
||||
xData: [],
|
||||
yData: []
|
||||
};
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
drawBar() {
|
||||
console.log(this.yData, 222);
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart)
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.barChart);
|
||||
myChart = this.$echarts.init(this.$refs.barChart)
|
||||
}
|
||||
let option = {
|
||||
color: ['#7262FD', '#FC5A5A'],
|
||||
|
|
@ -49,34 +50,34 @@ export default {
|
|||
show: true,
|
||||
text: this.componentName + '-' + this.chartName + '-' + '柱状图',
|
||||
textStyle: {
|
||||
lineHeight: '30'
|
||||
lineHeight: '30',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
confine: true
|
||||
confine: true,
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.xData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
color: '#000',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#000'
|
||||
color: '#000',
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
|
|
@ -84,64 +85,70 @@ export default {
|
|||
min: 0,
|
||||
minInterval: 1,
|
||||
splitArea: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#eeebeb',
|
||||
type: 'dashed' // dotted 虚线
|
||||
}
|
||||
type: 'dashed', // dotted 虚线
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#000',
|
||||
fontFamily: 'Bebas'
|
||||
}
|
||||
}
|
||||
fontFamily: 'Bebas',
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: { barBorderRadius: [5, 5, 0, 0], },
|
||||
name: '时间',
|
||||
data: this.yData
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
||||
name: '时间',
|
||||
data: this.yData
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.setOption(option)
|
||||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
||||
// myChart.resize();
|
||||
// };
|
||||
window.addEventListener('resize', function() {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawBar();
|
||||
this.xData = this.typeValue.type_data.map(ele => {
|
||||
return ele.name
|
||||
})
|
||||
this.yData = this.typeValue.type_data.map(ele => {
|
||||
return ele.quantity
|
||||
})
|
||||
this.drawBar()
|
||||
},
|
||||
watch: {
|
||||
typeValue: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.xData = newVal.type_data.map(ele => {
|
||||
return ele.name;
|
||||
});
|
||||
return ele.name
|
||||
})
|
||||
this.yData = newVal.type_data.map(ele => {
|
||||
return ele.quantity;
|
||||
});
|
||||
this.drawBar();
|
||||
return ele.quantity
|
||||
})
|
||||
this.drawBar()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
]
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
drawPie() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
|
||||
|
|
@ -105,15 +105,24 @@ export default {
|
|||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
||||
// myChart.resize();
|
||||
// };
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// if (this.typeValue) {
|
||||
// this.typeValue.type_data.forEach(ele => {
|
||||
// this.seriesData.push({
|
||||
// name: ele.name,
|
||||
// value: ele.quantity
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
this.drawPie();
|
||||
},
|
||||
watch: {
|
||||
// 监听单个的数据
|
||||
typeValue: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
|
|
|
|||
|
|
@ -71,10 +71,11 @@
|
|||
<div v-show="echartArr.includes('表格')">
|
||||
<div class="tableTitle">
|
||||
<div class="">
|
||||
|
||||
<span style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;"></span>
|
||||
<span>{{ this.chartName+ '-' + this.componentName + '-' + '表格'}}</span>
|
||||
</div>
|
||||
<div class="tableTime">
|
||||
|
||||
{{ typeValue.time }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
||||
|
|
@ -146,9 +147,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// 计算类型的数值
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue