80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<template>
|
|
<div class="entities-statistics">
|
|
<custom-echart-mixin :chart-data="chartsData.valData" :option="chartsData.option" height="100%" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
const chartsData = reactive({
|
|
option: {
|
|
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
|
title: {
|
|
text: ' ',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: ['个体户', '村集体', '合作社', '经营企业', '趋势'],
|
|
left: '0', // 距离左侧10%的位置
|
|
top: '0', // 垂直居中
|
|
itemWidth: 15, // 图例标记的宽度
|
|
itemHeight: 8, // 图例标记的高度
|
|
textStyle: {
|
|
fontSize: 10, // 图例文字的字体大小
|
|
color: '#fff', // 图例文字的颜色
|
|
},
|
|
},
|
|
barStyle: {
|
|
barWidth: 18,
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '数量',
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
},
|
|
itemStyle: { fontSize: 10 },
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '占比',
|
|
min: 0,
|
|
max: 100,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
itemStyle: { fontSize: 10 },
|
|
},
|
|
],
|
|
grid: {
|
|
x: '10%',
|
|
x2: '15%',
|
|
y: '20%',
|
|
y2: '20%',
|
|
},
|
|
},
|
|
valData: [
|
|
{ name: '耿马', value: 40, type: '个体户', seriesType: 'bar', stack: '耿马' },
|
|
{ name: '耿马', value: 30, type: '村集体', seriesType: 'bar', stack: '耿马' },
|
|
{ name: '耿马', value: 100, type: '合作社', seriesType: 'bar', stack: '耿马' },
|
|
{ name: '耿马', value: 60, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
{ name: '耿马', value: 10, type: '趋势', seriesType: 'line' },
|
|
{ name: '大香乡', value: 20, type: '个体户', seriesType: 'bar', stack: '大香乡' },
|
|
{ name: '大香乡', value: 20, type: '村集体', seriesType: 'bar', stack: '大香乡' },
|
|
{ name: '大香乡', value: 80, type: '合作社', seriesType: 'bar', stack: '大香乡' },
|
|
{ name: '大香乡', value: 40, type: '经营企业', seriesType: 'bar', stack: '大香乡', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
|
{ name: '大香乡', value: 50, type: '趋势', seriesType: 'line' },
|
|
],
|
|
});
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.entities-statistics {
|
|
height: 100%;
|
|
}
|
|
</style>
|