146 lines
3.7 KiB
Vue
146 lines
3.7 KiB
Vue
<template>
|
||
<div class="w-314px flex h-full flex-col">
|
||
<div
|
||
class="text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
||
>城镇农业产业情况</div
|
||
>
|
||
<div class="text-right text-11px leading-17px text-white mr-42px"> 单位：万 </div>
|
||
<div :style="{ height: chartHeight + 'px' }" class="mt-20px min-h-200px" ref="chartRef"> </div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, reactive, Ref, ref, onMounted, computed, watch } from 'vue'
|
||
import { getCropYieldTotalListt } from '/@/api/sys/other'
|
||
// import echarts from '/@/utils/lib/echarts'
|
||
import { useECharts } from '/@/hooks/web/useECharts'
|
||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||
import { sortBy } from 'lodash-es'
|
||
|
||
const visualizationStore = useVisualizationStore()
|
||
const chartRef = ref<HTMLDivElement | null>(null)
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||
|
||
const Data = reactive({
|
||
list: [] as any,
|
||
})
|
||
|
||
const chartHeight = computed(() => {
|
||
return Data.list.length * 34 + Data.list.length * 12
|
||
})
|
||
|
||
function chatInit() {
|
||
setOptions({
|
||
legend: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
xAxis: {
|
||
max: 'value',
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisPointer: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: Data.list?.map((e) => e.y) ?? [],
|
||
axisLabel: {
|
||
color: '#fff',
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
data: Data.list?.map((e) => e.value) ?? [],
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
color: '#fff',
|
||
valueAnimation: true,
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(117, 232, 238, 0.5)',
|
||
},
|
||
barWidth: 34,
|
||
},
|
||
],
|
||
|
||
grid: { left: '2%', right: '2%', top: '0%', bottom: '2%', containLabel: true },
|
||
animationDuration: 0,
|
||
animationDurationUpdate: 3000,
|
||
animationEasing: 'linear',
|
||
animationEasingUpdate: 'linear',
|
||
})
|
||
}
|
||
|
||
async function getData() {
|
||
const { list } = await getCropYieldTotalListt({
|
||
year: visualizationStore.getYear,
|
||
category_id: null,
|
||
})
|
||
const arr = [] as { value: string | number; y: string | number }[]
|
||
for (const key in list) {
|
||
if (Object.prototype.hasOwnProperty.call(list, key)) {
|
||
arr.push({
|
||
value: list[key],
|
||
y: key,
|
||
})
|
||
}
|
||
}
|
||
Data.list = sortBy(arr, (e) => {
|
||
return e.value
|
||
})
|
||
|
||
chatInit()
|
||
}
|
||
|
||
watch(
|
||
() => visualizationStore.getYear,
|
||
() => {
|
||
getData()
|
||
},
|
||
)
|
||
|
||
onMounted(() => {
|
||
getData()
|
||
})
|
||
|
||
return {
|
||
chartHeight,
|
||
chartRef,
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style scoped></style>
|