Compare commits
No commits in common. "847054715e6da6f08b979b75eb4ef083090dba07" and "ea3eb0d0cabacd1dd3da28a36a7e353b144f56e5" have entirely different histories.
847054715e
...
ea3eb0d0ca
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
|
|
@ -8,7 +8,7 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
list: Array,
|
list: Array,
|
||||||
default() {
|
default() {
|
||||||
return []
|
return [];
|
||||||
},
|
},
|
||||||
pageType: {
|
pageType: {
|
||||||
type: String
|
type: String
|
||||||
|
|
@ -33,16 +33,15 @@ export default {
|
||||||
return {
|
return {
|
||||||
xData: [],
|
xData: [],
|
||||||
yData: []
|
yData: []
|
||||||
}
|
};
|
||||||
},
|
|
||||||
created() {
|
|
||||||
},
|
},
|
||||||
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
drawBar() {
|
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) {
|
if (myChart == null) {
|
||||||
myChart = this.$echarts.init(this.$refs.barChart)
|
myChart = this.$echarts.init(this.$refs.barChart);
|
||||||
}
|
}
|
||||||
let option = {
|
let option = {
|
||||||
color: ['#7262FD', '#FC5A5A'],
|
color: ['#7262FD', '#FC5A5A'],
|
||||||
|
|
@ -50,34 +49,34 @@ export default {
|
||||||
show: true,
|
show: true,
|
||||||
text: this.componentName + '-' + this.chartName + '-' + '柱状图',
|
text: this.componentName + '-' + this.chartName + '-' + '柱状图',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
lineHeight: '30',
|
lineHeight: '30'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
confine: true,
|
confine: true
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '2%',
|
left: '2%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
bottom: '10%',
|
bottom: '10%',
|
||||||
top: '20%',
|
top: '20%',
|
||||||
containLabel: true,
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: this.xData,
|
data: this.xData,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#000',
|
color: '#000'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#000',
|
color: '#000'
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
|
|
@ -85,70 +84,64 @@ export default {
|
||||||
min: 0,
|
min: 0,
|
||||||
minInterval: 1,
|
minInterval: 1,
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false,
|
show: false
|
||||||
},
|
},
|
||||||
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#eeebeb',
|
color: '#eeebeb',
|
||||||
type: 'dashed', // dotted 虚线
|
type: 'dashed' // dotted 虚线
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#000',
|
color: '#000',
|
||||||
fontFamily: 'Bebas',
|
fontFamily: 'Bebas'
|
||||||
},
|
}
|
||||||
}],
|
}
|
||||||
series: [{
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
itemStyle: { barBorderRadius: [5, 5, 0, 0], },
|
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
||||||
name: '时间',
|
name: '时间',
|
||||||
data: this.yData
|
data: this.yData
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
};
|
};
|
||||||
myChart.setOption(option)
|
myChart.setOption(option);
|
||||||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
||||||
// myChart.resize();
|
// myChart.resize();
|
||||||
// };
|
// };
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function() {
|
||||||
myChart.resize()
|
myChart.resize();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.xData = this.typeValue.type_data.map(ele => {
|
this.drawBar();
|
||||||
return ele.name
|
|
||||||
})
|
|
||||||
this.yData = this.typeValue.type_data.map(ele => {
|
|
||||||
return ele.quantity
|
|
||||||
})
|
|
||||||
this.drawBar()
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
typeValue: {
|
typeValue: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.xData = newVal.type_data.map(ele => {
|
this.xData = newVal.type_data.map(ele => {
|
||||||
return ele.name
|
return ele.name;
|
||||||
})
|
});
|
||||||
this.yData = newVal.type_data.map(ele => {
|
this.yData = newVal.type_data.map(ele => {
|
||||||
return ele.quantity
|
return ele.quantity;
|
||||||
})
|
});
|
||||||
this.drawBar()
|
this.drawBar();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -43,7 +43,7 @@ export default {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() { },
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
drawPie() {
|
drawPie() {
|
||||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
|
||||||
|
|
@ -105,24 +105,15 @@ export default {
|
||||||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
||||||
// myChart.resize();
|
// myChart.resize();
|
||||||
// };
|
// };
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function() {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// if (this.typeValue) {
|
|
||||||
// this.typeValue.type_data.forEach(ele => {
|
|
||||||
// this.seriesData.push({
|
|
||||||
// name: ele.name,
|
|
||||||
// value: ele.quantity
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
this.drawPie();
|
this.drawPie();
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// 监听单个的数据
|
|
||||||
typeValue: {
|
typeValue: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
|
|
|
||||||
|
|
@ -71,11 +71,10 @@
|
||||||
<div v-show="echartArr.includes('表格')">
|
<div v-show="echartArr.includes('表格')">
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<div class="">
|
<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>
|
||||||
<div class="tableTime">
|
<div class="tableTime">
|
||||||
{{ typeValue.time }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
||||||
|
|
@ -147,6 +146,9 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 计算类型的数值
|
// 计算类型的数值
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue