104 lines
1.8 KiB
Vue
104 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
|
||
|
|
<div>
|
||
|
|
<!-- <h1>统计数据</h1> -->
|
||
|
|
<div class="content">
|
||
|
|
<div :ref="props.refs" style="width: 500px; height: 350px"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, reactive, watch } from 'vue';
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import 'echarts-gl';
|
||
|
|
import { defineProps } from 'vue';
|
||
|
|
import { size } from 'lodash';
|
||
|
|
// 定义props
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: () => {
|
||
|
|
return '暂无';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
refs: {
|
||
|
|
type: String,
|
||
|
|
default: () => {
|
||
|
|
return '';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
let chart1 = ref(null);
|
||
|
|
|
||
|
|
console.log(props.refs);
|
||
|
|
|
||
|
|
let option = ref({});
|
||
|
|
|
||
|
|
watch(props.data, (data, oldata) => {
|
||
|
|
console.log(data);
|
||
|
|
let instance = echarts.init(chart1.value);
|
||
|
|
instance.setOption(option.value);
|
||
|
|
});
|
||
|
|
|
||
|
|
option.value = {
|
||
|
|
title: {
|
||
|
|
text: props.title,
|
||
|
|
x: 'center',
|
||
|
|
size: 10,
|
||
|
|
},
|
||
|
|
// backgroundColor: '#0f375f',
|
||
|
|
legend: {
|
||
|
|
top: 25,
|
||
|
|
left: '0',
|
||
|
|
itemWidth: 20,
|
||
|
|
itemHeight: 15,
|
||
|
|
textStyle: {
|
||
|
|
color: '#aab2cd',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b} <br/>面积: {c}万亩 ({d}%)',
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
formatter: '{b}: {c}万亩',
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: '70%',
|
||
|
|
center: ['40%', '60%'],
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: props.data,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
let instance = echarts.init(chart1.value);
|
||
|
|
instance.setOption(option.value);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.custom-page {
|
||
|
|
height: calc(100vh - 150px);
|
||
|
|
}
|
||
|
|
.m-left {
|
||
|
|
margin-left: 6%;
|
||
|
|
}
|
||
|
|
</style>
|