jeecg 分组柱状图

参考文档

viser官网
antv-g2官网

一、效果图

二、代码块

		<div :style="{marginTop:'10px',padding: '15px 15px 0 15px',background:'white'}">
			<h3 :style="{ marginBottom: '20px',fontWeight:'bold'}">青岛市历年三种专利授权趋势</h3>
			<v-chart :data="data" :height="height" :force-fit="true" :onClick="handleClick" >
				<v-tooltip />
				<v-axis />
				<v-legend />
				<v-bar position="x*y" color='type' :adjust="adjust" />	<!--:color="['type',['#EB0EF5','#1800ff']]"-->
			</v-chart>
		</div>


		data(){
			return{
				fields1:['2010年','2011年',"2012年","2013年","2014年","2015年",'2016年','2017年',"2018年","2019年","2020年","2021年"],
				adjust: [{ 					//设置数据调整方式。
					type: 'dodge', 			//数据调整类型:stack：层叠;  dodge：分组散开;	jitter：扰动散开
					marginRatio: 1 / 32 	//只对 'dodge' 生效，取 0 到 1 范围的值（相对于每个柱子宽度），用于控制一个分组中柱子之间的间距
				}],
				dataSource:[{
					"2010年": 5646,
					"2011年": 7088,
					"2012年": 5867,
					"2013年": 6552,
					"2014年": 12254,
					"2015年": 18135,
					"2016年": 10972,
					"2017年": 4946,
					"2018年": 3122,
					"2019年": 1454,
					"2020年": 428,
					"2021年": 121,
					"type": "总授权量",
					"年份": 2021
				},{
					"2010年": 682,
					"2011年": 1032,
					"2012年": 1448,
					"2013年": 1443,
					"2014年": 1448,
					"2015年": 3727,
					"2016年": 5940,
					"2017年": 4927,
					"2018年": 3119,
					"2019年": 1450,
					"2020年": 426,
					"2021年": 120,
					"type": "发明",
					"年份": 2021				
				}]
			}
		}

		computed: {
			// 图一
			data() {
				const dv = new DataSet.View().source(this.dataSource)
				dv.transform({
					type: 'fold',
					fields: this.fields1, // 展开字段集
					key: 'x', // key字段
					value: 'y' // value字段
				})
				let rows = dv.rows
				return rows
			},
		}
		
		methods:{
			//柱状图点击事件
			handleClick(event, chart) {},
		}