94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<div class="plantArea" id="plnatArea"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
|
import { bar, autoHover } from '../echartsOption';
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
baseId: Number,
|
|
},
|
|
watch: {
|
|
baseId: {
|
|
handler: async function (n) {
|
|
if (n) {
|
|
await this.$nextTick();
|
|
const { rows } = await selectBatchInfo(this.baseId);
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false,
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
left: 60,
|
|
top: 20,
|
|
right: 20,
|
|
bottom: 20,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: rows.map((item) => item.name),
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: rows.map((item) => item.value),
|
|
type: 'bar',
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 12,
|
|
formatter: '{c}亩',
|
|
position: 'top',
|
|
color: '#fff',
|
|
textBorderColor: 'transparent',
|
|
},
|
|
},
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: (params) => {
|
|
return this.$colorList[params.dataIndex];
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
let myChart = this.$echarts.init(document.getElementById('plnatArea'));
|
|
myChart.setOption(option);
|
|
autoHover(myChart, option, 1500);
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
mounted() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.plantArea {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|