「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例

116 篇文章 21 订阅

完整代码

import { Mix } from '@antv/g2plot';
const data = [
{ xCategory: '识记', type: '5-10%', value: [20, 52] },
{ xCategory: '识记', type: '25-50%', value: [52, 60] },
{ xCategory: '识记', type: '50-75%', value: [60, 62] },
{ xCategory: '识记', type: '75-90%', value: [62, 65] },
{ xCategory: '识记', type: '90-95%', value: [65, 87] },

{ xCategory: '理解', type: '5-10%', value: [30, 52] },
{ xCategory: '理解', type: '25-50%', value: [52, 60] },
{ xCategory: '理解', type: '50-75%', value: [60, 62] },
{ xCategory: '理解', type: '75-90%', value: [62, 65] },
{ xCategory: '理解', type: '90-95%', value: [65, 80] },

{ xCategory: '分析综合', type: '5-10%', value: [10, 52] },
{ xCategory: '分析综合', type: '25-50%', value: [52, 60] },
{ xCategory: '分析综合', type: '50-75%', value: [60, 62] },
{ xCategory: '分析综合', type: '75-90%', value: [62, 65] },
{ xCategory: '分析综合', type: '90-95%', value: [65, 99] },

{ xCategory: '鉴赏评价', type: '5-10%', value: [20, 52] },
{ xCategory: '鉴赏评价', type: '25-50%', value: [52, 60] },
{ xCategory: '鉴赏评价', type: '50-75%', value: [60, 62] },
{ xCategory: '鉴赏评价', type: '75-90%', value: [62, 65] },
{ xCategory: '鉴赏评价', type: '90-95%', value: [65, 95] },

{ xCategory: '表达应用', type: '5-10%', value: [15, 52] },
{ xCategory: '表达应用', type: '25-50%', value: [52, 60] },
{ xCategory: '表达应用', type: '50-75%', value: [60, 62] },
{ xCategory: '表达应用', type: '75-90%', value: [62, 65] },
{ xCategory: '表达应用', type: '90-95%', value: [65, 98] },
]

const cateMap = {
'5-10%': { color: 'rgb(152,149,225)' },
'25-50%': { color: 'rgb(165,193,225)' },
'50-75%': { color: 'rgb(179,231,247)' },
'75-90%': { color: 'rgb(155,232,220)' },
'90-95%': { color: 'rgb(205,232,155)' },
}

const plot = new Mix('container', {
tooltip: { shared: true },
legend: {
layout: 'horizontal',
position: 'top',
marker: {
style: {
r: 7,
},
},
},
plots: [
{
type: 'column',
options: {
data,
xField: 'xCategory',
yField: 'value',
isRange: true,
seriesField: 'type',
yAxis: {
grid: null,
nice: true,
line: {
style: {
stroke: '#aaa',
},
},
},
color: ({ type }) => {
return cateMap[type].color
},
meta: {
value: {
min: 0,
max: 100,
formatter(val) {
return val + '%'
},
},
},
tooltip: true,
},
},
{
type: 'line',
options: {
data: [
{ date: '识记', ctype: '本校', value: 20 },
{ date: '理解', ctype: '本校', value: 30 },
{ date: '分析综合', ctype: '本校', value: 50 },
{ date: '鉴赏评价', ctype: '本校', value: 80 },
{ date: '表达应用', ctype: '本校', value: 95 },
],
seriesField: 'ctype',
point: {
size: 5,
shape: 'circle',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
lineStyle: {
lineDash: [5, 5],
},
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: false,
smooth: true,
color: '#dddddd',
},
},
],
})

plot.render()


踩的坑

• 第二个图表的legend 与第一个图表的 legend不能放到一列
如下图

这是两列。

• 尽量不要使用nice 属性，并且设置y轴的 min max值
由于第一个图表 和第二个图表是共用Y轴，为了保证值的统一，两个图例的单位和起点，终点必须一致。
否则可能会出现这样的情况，折线的点为64，但点却高于75。

• 第三个坑点就 两个图例的tooltip可能会遮挡，如下图

后记

• 相比echarts，配置更加具有简单、易用
• 相比echarts，文档质量算不得优秀
• 案例只能说刚刚够用，并不算丰富

• 1
点赞
• 0
收藏
觉得还不错? 一键收藏
• 打赏
• 0
评论
03-21 1709
09-13 1082
10-24 3574
10-28 5957
11-15 1318
04-30 327
05-20 1297

“相关推荐”对你有帮助么？

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。