jeecg 堆叠图

一、效果图

二、代码块

	<!--所用技术：vue + jeecgBoot +  antv G2 + viser -->
	<template>
		<div>
			<!--堆叠柱状图 -->
			<div :style="{marginTop:'10px',padding:'15px 15px 0 15px',background:'white'}">
				<a-row>
					<a-col :span="12">
						<h3 :style="{ marginBottom: '20px',fontWeight:'bold'}">三种专利授权构成分布</h3>
					</a-col>
					<a-col :span="12" style="text-align:right">
						<a-radio-group :value="btnStatus" @change="handleBtnChange">
							<a-radio-button value="month">月</a-radio-button>
							<a-radio-button value="year">年</a-radio-button>
						</a-radio-group>
					</a-col>
				</a-row>
		
				<v-chart :forceFit="true" :height="height" :data="dataT" :scale="scale">
					<v-tooltip />
					<v-axis />
					<v-legend />
					<v-stack-bar position="year*percent"  :vStyle="stackBarStyle"  color="type"/>    <!--:color="['country', ['#6395F9', '#69dfae', '#6c7fa0']]"-->
				</v-chart>
			</div>
		</div>
	</template>
	export default{
		data(){
			return{
				height: 420,
				scale: [{
					dataKey: 'percent',
					min: 0,
					formatter: '.2%',
				}],
				stackBarStyle: {
					stroke: "#fff",
					lineWidth: 1,
				},
				dataSourceT:[{
					type: "发明",
					value: 2,
					year: "2000-01"
				},{
					type: "实用新型",
					value: 126,
					year: "2000-01"
				},{
					type: "外观设计",
					value: 106,
					year: "2000-01"
				},{
					type: "发明",
					value: 6,
					year: "2000-02"
				},{
					type: "实用新型",
					value: 126,
					year: "2000-02"
				},{
					type: "外观设计",
					value: 6688,
					year: "2000-02"
				}]
			}
		},
		computed: {
			dataT() {
				const dvT = new DataSet.View().source(this.dataSourceT)
				dvT.transform({
					type: 'percent',
					field: 'value',
					dimension: 'type',
					groupBy: ['year'],
					as: 'percent',
				})
				let rows = dvT.rows
				return rows
			}
		}		
	},