antdv G2Plot 堆叠面积图双色
安装和基本配置见官网:
本例效果图:
<div id="container" />
本人使用的vue3:
import { Area } from '@antv/g2plot';
export default {
setup() {
onMounted(() => {
const area = new Area('container', {// 元素的ID
data: [// 自己要渲染的数据
// type == "复诊"
{
type: "复诊",
date: "周一",
value: 2
},
{
type: "复诊",
date: "周二",
value: 1
},
{
type: "复诊",
date: "周三",
value: 5
},
{
type: "复诊",
date: "周四",
value: 2
},
{
type: "复诊",
date: "周五",
value: 3
},
{
type: "复诊",
date: "周六",
value: 4
},
{
type: "复诊",
date: "周日",
value: 1
},
// type == "就诊"
{
type: "就诊",
date: "周一",
value: 1
},
{
type: "就诊",
date: "周二",
value: 5
},
{
type: "就诊",
date: "周三",
value: 2
},
{
type: "就诊",
date: "周四",
value: 4
},
{
type: "就诊",
date: "周五",
value: 1
},
{
type: "就诊",
date: "周六",
value: 2
},
{
type: "就诊",
date: "周日",
value: 3
},
],
xField: 'date',// x轴的data里面的数据
yField: 'value',// y轴的data里面的数据
seriesField: 'type',// data里面的type不同线条不同
smooth: true,// 圆滑曲线
areaStyle: (e) => {
// 直接打印e的话是每个type的第一个数据,也就是e.type就是data里面写好的type
if(e.type == "复诊") {
return {
fill: 'l(270) 0:#ffffff 0.4:#7ec2f3 1:#1890ff',// 蓝色渐变
fillOpacity: 0.2,// 透明度
}
}else {
return {
fill: 'l(270) 0:#ffffff 0.4:#7e7dd9 1:#605FDA',// 紫色渐变
fillOpacity: 0.2,
}
}
},
line: {
// 不同线条不同颜色
color: ['#007AFF', '#605FDA']
},
colorField: 'type',
color: ['#007AFF', '#605FDA'],
// 以上两行设置不同type的左上角图示的颜色
});
area.render();
})
onBeforeUnmount(()=>{// 退出组件之后删除图表,因为等下次进入的时候onMounted会再次添加
document.querySelector("#container").replaceChildren()
})
}
}