antv + G2，如何redux-saga+ G2

最新推荐文章于 2024-04-27 09:44:34 发布

原创最新推荐文章于 2024-04-27 09:44:34 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用G2Plot图表库创建动态图表，包括定义全局图表、数据结构配置、自定义度量与坐标轴、添加提示与图例，以及绘制面积图与折线图的具体步骤。

1.定义一个全局chart，方便使用chart.changeData(newData)

2.定义chart时，原始数据不能为空，并且结构要与newData结构相同

3. scale（度量）、 legend（图表）、tooltip（提示）、axis（坐标轴）都可以自定义

const data = [
            {PV: 0, IP: 0, time: ''}
        ]; //必须设置相同的数据结构的数据才能使用changeData
        const chart = new Chart({
            container: 'userViewMonthly',
            height: 360,
            autoFit: true, //宽度自适应
            // padding: [20, 20, 20, 20]
        });
        this.setState({...this.state, chartMonthly: chart}); //方便后续调用此chart
        chart.data(data);
        chart.scale({
            PV: {
                alias: 'PV', //定义别名
                nice: true, //优化数值范围
                min: 0,
                tickCount: 6,
                style: {
                    fontSize: 10
                }
            },
            IP: {
                alias: 'IP', //定义别名
                nice: true, //优化数值范围
                min: 0,
                tickCount: 6,
                style: {
                    fontSize: 10
                }
            },
            time: {
                // type: 'cat',
                // mask: 'MM/DD', //时间类型格式
                range: [0,1],
                style: {
                    fontSize: 10
                }
            }
        });
        // // 坐标轴;
        // chart.axis('IP', {
        //     title: null, //坐标轴标题，
        //     label: {
        //         offset: 0, //label偏移量,
        //         textStyle: {
        //             fill: '#eee', //颜色
        //             rotate: 60, //旋转度数
        //             fontSize: 10, 
        //         }
        //     },
        //     tickLine:  {
        //         lineStyle: {
        //             length: 10,
        //             stroke: '#eee',
        //             lineDash: [3, 3]
        //         }
        //     },//刻度线
        //     grid: {
        //         lineStyle: {
        //             stroke: '#d9d9d9',
        //             lineWidth: 1,
        //             lineDash: [ 2, 2 ]
        //         }
        //     } //网格线
        // });
        // chart.annotation()

        //提示
        chart.tooltip({
            showCrosshairs: true,
            shared: true 
        });
        //图例
        // chart.legend('IP', {
        //     position: 'top-center', 
        //     itemWidth: 50, //图项之间的距离，
        //     marker: {
                    symbol:'square'
                } //形状
        // });
        // 画
        chart.area().position('time*PV').color('#1890ff').style({
            fillOpacity: 0.1,
        });
        chart.line().position('time*PV').color('#1890ff').shape('smooth');
        chart.area().position('time*IP').color('#2fc25b').style({
            fillOpacity: 0.1,
        });
        chart.line().position('time*IP').color('#2fc25b').shape('smooth');

        // 绘制
        chart.render();