75 lines
1.5 KiB
Vue
75 lines
1.5 KiB
Vue
<template>
|
|
<div class="land-use-charts">
|
|
<custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
const chartsData = reactive({
|
|
option: {
|
|
color: ['#3685fe', '#41b879', '#ffd500'],
|
|
title: {
|
|
text: ' ',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: ' ',
|
|
// data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#BAE7FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#BAE7FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(186, 231, 255, 0.2)',
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'white',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
valData: [
|
|
{ value: 205.6 },
|
|
{ value: 308.7 },
|
|
{ value: 359.6 },
|
|
{ value: 452.6 },
|
|
{ value: 388.9 },
|
|
{ value: 508.7 },
|
|
{ value: 369.5 },
|
|
{ value: 610.8 },
|
|
{ value: 754.3 },
|
|
],
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.land-use-charts {
|
|
height: 90%;
|
|
}
|
|
</style>
|