g2plot 多折线图相关示例

于 2024-07-15 08:31:02 发布
阅读量337 收藏 5
点赞数 14
分类专栏： Vue 文章标签： java 数据库 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37703224/article/details/140428777
版权

二氧化碳排放量来源

在这里插入图片描述

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      xAxis: {
        type: 'time',
      },
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
    });

    line.render();
  });

网格填充

在这里插入图片描述

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data: data
        .slice(data.length - 90, data.length)
        .filter((item) => item.category === 'Gas fuel' || item.category === 'Cement production'),
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      // X 轴相关配置
      xAxis: {
        nice: true,
        // tickCount: 8,
        // 文本标签
        label: {
          // autoRotate: false,
          rotate: Math.PI / 6,
          offset: 10,
          style: {
            fill: '#aaa',
            fontSize: 12,
          },
          formatter: (name) => name,
        },
        title: {
          text: '年份',
          style: {
            fontSize: 16,
          },
        },
        // 坐标轴线的配置项 null 表示不展示
        line: {
          style: {
            stroke: '#aaa',
          },
        },
        tickLine: {
          style: {
            lineWidth: 2,
            stroke: '#aaa',
          },
          length: 5,
        },
        grid: {
          line: {
            style: {
              stroke: '#ddd',
              lineDash: [4, 2],
            },
          },
          alternateColor: 'rgba(0,0,0,0.05)',
        },
      },
      // Y 轴相关配置
      yAxis: {
        // max: 3000,
        // 文本标签
        label: {
          autoRotate: false,
          style: {
            fill: '#aaa',
            fontSize: 12,
          },
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
        title: {
          text: '排放量(顿)',
          style: {
            fontSize: 16,
          },
        },
        // 坐标轴线的配置项 null 表示不展示
        line: {
          style: {
            stroke: '#aaa',
          },
        },
        tickLine: {
          style: {
            lineWidth: 2,
            stroke: '#aaa',
          },
          length: 5,
        },
        grid: {
          line: {
            style: {
              stroke: '#ddd',
              lineDash: [4, 2],
            },
          },
          alternateColor: 'rgba(0,0,0,0.05)',
        },
      },
      // label
      label: {
        layout: [{ type: 'hide-overlap' }], // 隐藏重叠label
        style: {
          textAlign: 'right',
        },
        formatter: (item) => item.value,
      },
      // point
      point: {
        size: 5,
        style: {
          lineWidth: 1,
          fillOpacity: 1,
        },
        shape: (item) => {
          if (item.category === 'Cement production') {
            return 'circle';
          }
          return 'diamond';
        },
      },
      annotations: [
        // 辅助线
        {
          type: 'line',
          start: ['0%', '10%'],
          end: ['100%', '10%'],
          top: true,
          style: {
            stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
            lineWidth: 2,
          },
        },
        // 辅助区域
        {
          type: 'region',
          start: ['0%', '0%'],
          end: ['20%', '10%'],
          top: true,
          style: {
            fill: '#1890ff',
            fillOpacity: 1,
            opacity: 1,
          },
        },
        // 辅助文本
        {
          type: 'text',
          position: ['10%', '5%'],
          content: '二氧化碳排放量来源',
          style: {
            fill: '#fff',
            fontSize: 12,
            textAlign: 'center',
            textBaseline: 'middle',
            shadowColor: '#fff',
            shadowOffsetX: 12,
            shadowOffsetY: 12,
            shadowBlur: 2,
          },
        }, // 辅助线
        {
          type: 'line',
          start: ['min', 'median'],
          end: ['max', 'median'],
          style: {
            stroke: 'Turquoise',
            lineDash: [4, 2],
          },
        },
      ],
      legend: {
        position: 'top-right',
        itemName: {
          style: {
            fill: '#000',
          },
          formatter: (name) => name,
        },
      },
      // 度量相关配置
      meta: {
        // year 对应 xField || yField
        year: {
          range: [0, 1],
        },
      },
    });

    line.render();
  });

多折线动画

在这里插入图片描述

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  .then((res) => res.json())
  .then((data) => {
    const linePlot = new Line('container', {
      data,
      xField: 'year',
      yField: 'gdp',
      seriesField: 'name',
      yAxis: {
        label: {
          formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
        },
      },
      legend: {
        position: 'top',
      },
      smooth: true,
      // @TODO 后续会换一种动画方式
      animation: {
        appear: {
          animation: 'path-in',
          duration: 5000,
        },
      },
    });

    linePlot.render();
  });

折线趋势填充

在这里插入图片描述

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  .then((res) => res.json())
  .then((data) => {
    const linePlot = new Line('container', {
      data,
      xField: 'year',
      yField: 'gdp',
      seriesField: 'name',
      yAxis: {
        label: {
          formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
        },
      },
      legend: {
        position: 'top',
      },
      smooth: true,
      // 配置折线趋势填充
      area: {
        style: {
          fillOpacity: 0.15,
        },
      },
      animation: {
        appear: {
          animation: 'wave-in',
          duration: 3000,
        },
      },
    });

    linePlot.render();
  });

指定折线颜色

在这里插入图片描述

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
      color: ['#1979C9', '#D62A0D', '#FAA219'],
    });

    line.render();
  });

通过回调函数指定折线样式

在这里插入图片描述

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      xField: 'date',
      yField: 'value',
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
      seriesField: 'type',
      color: ({ type }) => {
        return type === 'register' ? '#F4664A' : type === 'download' ? '#30BF78' : '#FAAD14';
      },
      lineStyle: ({ type }) => {
        if (type === 'register') {
          return {
            lineDash: [4, 4],
            opacity: 1,
          };
        }
        return {
          opacity: 0.5,
        };
      },
    });

    line.render();
  });

通过回调函数指定数据点样式

在这里插入图片描述

import { Line } from '@antv/g2plot';
import { uniq, findIndex } from '@antv/util';

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((res) => res.json())
  .then((data) => {
    const COLOR_PLATE_10 = [
      '#5B8FF9',
      '#5AD8A6',
      '#5D7092',
      '#F6BD16',
      '#E8684A',
      '#6DC8EC',
      '#9270CA',
      '#FF9D4D',
      '#269A99',
      '#FF99C3',
    ];

    const container = document.getElementById('container');

    const line = new Line(container, {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
      color: COLOR_PLATE_10,
      point: {
        shape: ({ category }) => {
          return category === 'Gas fuel' ? 'square' : 'circle';
        },
        style: ({ year }) => {
          return {
            r: Number(year) % 4 ? 0 : 3, // 4 个数据示一个点标记
          };
        },
      },
    });

    line.render();
  });
Python私教
关注
  • 14
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
可视化插件G2缩略图示例
08-19
利用可视化插件G2生成的折线图，无标题无标签，可用作缩略图。
AntV | G2Plot
lilygg的博客
11-06 6139
g2plot简介 g2plot是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。 官方文档：https://antv-g2plot.gitee.io/zh/docs/manual/introduction 参考链接：https://blog.csdn.net/weixin_42628594/article/details/108658435 .
AntV | 蚂蚁数据可视化 G2Plot 快速入门
热门推荐
weixin_46703850的博客
11-12 1万+
AntV | 蚂蚁数据可视化 G2Plot 快速入门 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。
ggplot2包可视化——折线图
m0_73275932的博客
03-03 3032
折线图用于在连续间隔或时间跨度上显示定量数值，最常用来显示趋势和关系。在折线图中，X 轴包括类别型或者序数型变量，分别对应文本坐标轴和序数坐标轴（如日期坐 标轴）两种类型；Y 轴为数值型变量。折线图主要应用于时间序列数据的可视化
AntvG2Plot的一些基础用法
xiaowu1127的博客
03-21 1790
AntvG2Plot的一些基础用法
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
知无涯
05-24 4223
使用散点图分析学生成绩的稳定性，平均分，标准差，四象限。数据标注，g2plot 图表。
antv-g2plot-master_java_
10-03
G2Plot是AntV家族中的一个重要的图形库，它提供了一系列的柱状图、折线图、饼图、散点图等常见图表类型，支持丰富的交互和定制，旨在让数据可视化的开发变得简单高效。 结合以上信息，我们可以深入探讨以下几个关键...
数据可视化，大屏模板示例
02-19
这些工具提供了丰富的图表类型，如柱状图、折线图、饼图、散点图、热力图、地图等，以及各种定制化选项，帮助设计师打造出独特的视觉效果。 为了实现大屏模板示例，开发者需要具备一定的编程技能，如JavaScript、...
062-微信小程序-股票分时图K线图小程序.zip
06-11
3. 图表库：为了绘制分时图和K线图，开发者通常会引入第三方图表库，如ECharts、AntV G2Plot等，这些库提供了丰富的图表组件和定制化选项，能方便地将数据转化为可视化的图形。 4. UI设计：利用微信小程序的组件...
小工具类-图表源代码【含图文文档教程+源码导入教程+操作界面截图】
03-26
这些小工具类源代码可能是封装了ECharts、AntV G2Plot等知名图表库的小程序适配版本，或者是专门针对小程序优化的自定义图表组件。 - 开发者可以利用这些源代码快速构建各种图表类型，如柱状图、折线图、饼图、散点...
antv G2Plot折线图+多个堆叠柱状图
m0_73008551的博客
09-13 1293
antv G2Plot折线图+多个堆叠柱状图
前端数据可视化之AntV的G2Plot、G6、L7入门
前端攻城狮
11-24 8327
AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案 G2：可视化引擎 G2Plot：图表库 G6 : 图可视化引擎 Graphin：基于G6的图分析组件 F2 ：移动可视化方案 ChartCube：AntV 图表在线制作 L7：地理空间数据可视化 因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到 的G2Plot、G6、L7 的入门使用 一、G2Plot <!DOCTYPE html> <ht.
g2plot 基础折线图相关示例
最新发布
Python私教
07-15 283
,});active() {// items: 数组对象，当前 tooltip 显示的每条内容== -1;});});
4、科研作图之折线图——ggplot2
qq_52529296的博客
07-29 1112
详解ggplot2做折线图的细节。
Antv/G2 多折线图双坐标轴
且听风吟的博客
11-08 831
Antv/G2 多折线图双坐标轴
AntV G2/G2Plot柱状折线混合图
X01动力装甲的专栏
10-22 5229
G2混合图 AntV G2实现柱状折线混合图比较简单，只需要设置position里面的值就可以了。 案例里面有个双轴图表：https://antv-g2.gitee.io/zh/examples/other/other#double-axes 按照上面的模式自己设置一个双轴混合图。分了三组数据，A，B，C。A是柱子，B和C是line加area的形式。 let data = [ { genre: 'Sports', sold: 275, type: "A" }, { genre: 'Str
在vue中使用antV-G2展示 y轴的title文字怎么上移
qq_39689170的博客
11-22 544
有个问题想请教一下大佬们 我在y轴上设置了一个title，我想把这个标题向上移动一点点，不然和y轴的坐标重叠了，请问要怎么调整。
antv g2plot可视化图表在vue中的使用之二：绘制折线图条形图柱状图
砥砺前行的博客
09-21 6810
运行程序 npm run serve 修改首页 绘制图型 修改图例 替换背景 修改动效 点击跳转
g2plot图表库1.x版本折线图踩坑记录
saber的博客
10-19 1379
1.折线图显示为直线 解决办法：将xAxis、yAxis的type属性设置为linear yAxis: { title: { visible: true, text: this.formData.yAxis.label }, type: 'linear' }, xAxis: { // 坐标轴标题 title: { visible: true, text: this.formData.xAxis.label }, type:
antv g2plot 2.4.7版本堆叠柱线图表-显示多折线折线图脱离canvas
05-31
要显示多个折线图并避免它们脱离画布，您可以使用 `theme` 属性来调整 G2Plot 的主题样式。下面是一个示例代码，演示如何创建一个堆叠柱线图表，并显示多个折线图。 ```jsx import React, { Component } from 'react'; import { StackedColumnLine } from '@antv/g2plot'; class StackedColumnLineChart extends Component { constructor(props) { super(props); this.chartRef = React.createRef(); } componentDidMount() { const data = [ { year: '1991', value: 3, type: 'sales' }, { year: '1992', value: 4, type: 'sales' }, { year: '1993', value: 3.5, type: 'sales' }, { year: '1994', value: 5, type: 'sales' }, { year: '1995', value: 4.9, type: 'sales' }, { year: '1996', value: 6, type: 'sales' }, { year: '1997', value: 7, type: 'sales' }, { year: '1998', value: 9, type: 'sales' }, { year: '1999', value: 13, type: 'sales' }, { year: '1991', value: 1, type: 'profits' }, { year: '1992', value: 3, type: 'profits' }, { year: '1993', value: 1.5, type: 'profits' }, { year: '1994', value: 2, type: 'profits' }, { year: '1995', value: 1.9, type: 'profits' }, { year: '1996', value: 4, type: 'profits' }, { year: '1997', value: 5, type: 'profits' }, { year: '1998', value: 8, type: 'profits' }, { year: '1999', value: 10, type: 'profits' }, ]; const lineTheme = { geometries: { line: { style: { lineWidth: 2, }, }, }, }; const chart = new StackedColumnLine(this.chartRef.current, { data, xField: 'year', yField: 'value', xAxis: { label: { autoRotate: false, }, }, yAxis: { label: { formatter: (value) => `${value}k`, }, }, seriesField: 'type', legend: { position: 'top', }, theme: { styleSheet: { ...lineTheme, }, }, }); chart.render(); } componentWillUnmount() { if (this.chart) { this.chart.destroy(); } } render() { return <div ref={this.chartRef}></div>; } } export default StackedColumnLineChart; ``` 在上面的代码中，我们定义了一个 `lineTheme` 对象，用于调整折线图的样式。然后，我们在创建图表实例时，将 `lineTheme` 对象添加到主题中。这样，我们就可以根据需要调整折线图的线宽和样式，从而避免它们脱离画布。 另外，我们还可以通过设置 `xAxis.label.autoRotate` 属性来禁用 X 轴标签的自动旋转，以确保标签不重叠。同时，我们通过设置 `yAxis.label.formatter` 属性来自定义 Y 轴标签的格式，以便更好地显示数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Python私教

创业不易，请打赏支持我一点吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值