antdv G2Plot 堆叠面积图双色

antdv G2Plot 堆叠面积图双色

安装和基本配置见官网：

简介 | G2Plot (antgroup.com)

堆积面积图 | G2Plot (antgroup.com)

本例效果图：

<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()
        })
    }
}