140 lines
4.0 KiB
Vue
140 lines
4.0 KiB
Vue
<template>
|
|
<div class="land-area-total-warp" id="landAreaTotal"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
|
import { bar, autoHover } from '../echartsOption';
|
|
export default {
|
|
data() {
|
|
return {
|
|
datalist: [],
|
|
};
|
|
},
|
|
props: {
|
|
baseId: Number,
|
|
},
|
|
watch: {
|
|
baseId: {
|
|
handler: async function (n) {
|
|
if (n) {
|
|
await this.$nextTick();
|
|
const { rows } = await selectBatchInfo(this.baseId);
|
|
this.datalist = [
|
|
{ name: '凤山镇', value: 3.5 },
|
|
{ name: '勐佑镇', value: 1.2 },
|
|
{ name: '三岔河镇', value: 3.0 },
|
|
{ name: '小湾镇', value: 0.4 },
|
|
{ name: '洛党镇', value: 0.9 },
|
|
{ name: '雪山镇', value: 1.2 },
|
|
{ name: '营盘镇', value: 3.2 },
|
|
{ name: '郭大寨乡', value: 1.3 },
|
|
{ name: '大寺乡', value: 3.5 },
|
|
{ name: '鲁史镇', value: 0.4 },
|
|
{ name: '诗礼乡', value: 0.9 },
|
|
{ name: '新华乡', value: 1.1 },
|
|
{ name: '腰街乡', value: 1.5 },
|
|
];
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false,
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
left: 30,
|
|
top: 20,
|
|
right: 20,
|
|
bottom: 20,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
// data: rows.map((item) => item.name),
|
|
data: this.datalist.map((item) => item.name),
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
splitLine: {
|
|
show: false, // 显示分割线
|
|
lineStyle: {
|
|
type: 'dashed', // 设置为虚线
|
|
width: 0.5, // 分割线宽度
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
splitLine: {
|
|
show: false, // 显示分割线
|
|
lineStyle: {
|
|
type: 'dashed', // 设置为虚线
|
|
width: 0.5, // 分割线宽度
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
// data: rows.map((item) => item.value),
|
|
data: this.datalist.map((item) => item.value),
|
|
type: 'bar',
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 12,
|
|
formatter: '{c}万亩',
|
|
position: 'top',
|
|
color: '#fff',
|
|
textBorderColor: 'transparent',
|
|
},
|
|
},
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
borderRadius: [20, 20, 0, 0],
|
|
color: {
|
|
type: 'linear', // 线性渐变
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: '#99dcf3' },
|
|
{ offset: 1, color: '#01589c' },
|
|
],
|
|
global: false, // 默认为 false
|
|
},
|
|
// color: (params) => {
|
|
// return this.$colorList[params.dataIndex];
|
|
// },
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
let myChart = this.$echarts.init(document.getElementById('landAreaTotal'));
|
|
myChart.setOption(option);
|
|
autoHover(myChart, option, 1500);
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
mounted() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.land-area-total-warp {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|