antv-G2实战 条形图

最新推荐文章于 2023-03-03 09:06:00 发布
最新推荐文章于 2023-03-03 09:06:00 发布
阅读量638 收藏
点赞数
文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuxiaoxii/article/details/117958502
版权

官网

https://g2.antv.vision/zh/examples/case/bar#bar2

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>测试</title>
    <style>
      body {
        width: 100vw;
        height: 100vh;
        background-color: #0b2988;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <div id="container" />
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.17/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>
    <script>
      const data = [
        { cat: "双师认证", type: "双师型", value: 10},
        { cat: "双师认证", type: "双师素质型", value: 20},
        { cat: "工作岗位", type: "专业技术岗位", value: 30},
        { cat: "工作岗位", type: "工勤技能岗位", value: 40},
        { cat: "工作岗位", type: "管理岗位", value: 50},
        { cat: "岗位类别", type: "专任教师", value: 60},
        { cat: "岗位类别", type: "实验员", value: 70},
        { cat: "岗位类别", type: "未录入", value: 8 },
        { cat: "岗位类别", type: "行政管理后勤", value: 90},
        { cat: "岗位类别", type: "辅导员", value: 100},
        { cat: "人员类别", type: "合同制人员", value: 110},
        { cat: "人员类别", type: "在编人员", value: 120},
        { cat: "人员类别", type: "外聘教师", value: 130},
      ];
      const chart = new window.G2.Chart({
        container: "container",
        autoFit: false,
        height: 700,
        width: 550,
        padding: [20, 0, 50, 150],
      });
      chart.data(data);
      chart.axis("type", {
        tickLine: null,
        line: null,
        label: {
          style: {
            fill: "#fff",
          },
        },
      });
      chart.axis("value", {
        label: null,
        // title: {
        //   offset: 30,
        //   style: {
        //     fontWeight: 300,
        //     fill: "#ffffff",
        //   },
        // },
        grid: null,
      });
      chart.legend(false);
      chart.coordinate("rect").transpose();
      chart
        .interval()
        .position("type*value")
        .color("cat", [
          "#face1d",
          "rgba(73,146,255,1)",
          "rgba(5,192,145,1)",
          "rgba(141,72,227,1)",
        ])
        .size(26)
        .label("value", {
          style: {
            fill: "#ffffff",
          },
          offset: 10,
          content: (originData) => {
            return (originData.value + "").replace(
              /(\d)(?=(?:\d{3})+$)/g,
              "$1,"
            );
          },
        });

      chart.annotation().text({
        top: true,
        position: ["外聘教师", "min"],
        content: "人员类别",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        offsetY: 80,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().text({
        top: true,
        position: ["实验员", "min"],
        content: "岗位类别",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().text({
        top: true,
        position: ["工勤技能岗位", "min"],
        content: "工作岗位",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        offsetY: 35,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().text({
        top: true,
        position: ["双师型", "min"],
        content: "双师认证",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        offsetY: 15,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().line({
        start: ["-30%", "23%"],
        end: ["100%", "23%"],
        style: {
          stroke: "#ffffff",
          lineDash: [2, 2],
        },
      });
      chart.annotation().line({
        start: ["-30%", "62%"],
        end: ["100%", "62%"],
        style: {
          stroke: "#ffffff",
          lineDash: [2, 2],
        },
      });
      chart.annotation().line({
        start: ["-30%", "85%"],
        end: ["100%", "85%"],
        style: {
          stroke: "#ffffff",
          lineDash: [2, 2],
        },
      });
      chart.interaction("element-active");

      chart.render();
    </script>
  </body>
</html>

react 组件

import React, {useContext, useEffect, useState} from 'react';
export default function G2Charts(props) {
  const {
    style,
    componentIndex,
    isCallBack,
    callBackFunction,
  } = props;
  const [ready, setReady] = useState(false);
  useEffect(() => {
    if (!window.G2 || !window.G2.Charts) {
      let sc = document.createElement('script');
      sc.src = `/BigDataVisualization/g2/g2.min.js`;
      document.querySelector('body').appendChild(sc);
      sc.onload = function () {
        let sc2 = document.createElement('script');
        sc2.src = `/BigDataVisualization/g2/data-set.js`;
        document.querySelector('body').appendChild(sc2);
        sc2.onload = function () {
          console.log(window.G2);
          setReady(true);
        }
      };
    } else {
      setReady(true);
    }
  }, []);

  useEffect(() => {
    if (ready) {
        const data = [
        { cat: "双师认证", type: "双师型", value: 1},
        { cat: "双师认证", type: "双师素质型", value: 2},
        { cat: "工作岗位", type: "专业技术岗位", value: 3},
        { cat: "工作岗位", type: "工勤技能岗位", value: 4},
        { cat: "工作岗位", type: "管理岗位", value: 5},
        { cat: "岗位类别", type: "专任教师", value: 6},
        { cat: "岗位类别", type: "实验员", value: 7 },
        { cat: "岗位类别", type: "未录入", value: 8},
        { cat: "岗位类别", type: "行政管理后勤", value: 9},
        { cat: "岗位类别", type: "辅导员", value: 10},
        { cat: "人员类别", type: "合同制人员", value: 11},
        { cat: "人员类别", type: "在编人员", value: 12},
        { cat: "人员类别", type: "外聘教师", value: 13},
      ];
      const chart = new window.G2.Chart({
        container: "container",
        autoFit: false,
        height: 700,
        width: 550,
        padding: [20, 0, 50, 150],
      });
      chart.data(data);
      chart.axis("type", {
        tickLine: null,
        line: null,
        label: {
          style: {
            fill: "#fff",
          },
        },
      });
      chart.axis("value", {
        label: null,
        // title: {
        //   offset: 30,
        //   style: {
        //     fontWeight: 300,
        //     fill: "#ffffff",
        //   },
        // },
        grid: null,
      });
      chart.legend(false);
      chart.coordinate("rect").transpose();
      chart
        .interval()
        .position("type*value")
        .color("cat", [
          "#face1d",
          "rgba(73,146,255,1)",
          "rgba(5,192,145,1)",
          "rgba(141,72,227,1)",
        ])
        .size(26)
        .label("value", {
          style: {
            fill: "#ffffff",
          },
          offset: 10,
          content: (originData) => {
            return (originData.value + "").replace(
              /(\d)(?=(?:\d{3})+$)/g,
              "$1,"
            );
          },
        });

      chart.annotation().text({
        top: true,
        position: ["外聘教师", "min"],
        content: "人员类别",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        offsetY: 80,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().text({
        top: true,
        position: ["实验员", "min"],
        content: "岗位类别",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().text({
        top: true,
        position: ["工勤技能岗位", "min"],
        content: "工作岗位",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        offsetY: 35,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().text({
        top: true,
        position: ["双师型", "min"],
        content: "双师认证",
        style: {
          fill: "#ffffff",
          fontSize: 16,
          fontWeight: "300",
          textAlign: "left",
        },
        offsetX: -110,
        offsetY: 15,
        rotate: Math.PI * -0.5,
      });
      chart.annotation().line({
        start: ["-30%", "23%"],
        end: ["100%", "23%"],
        style: {
          stroke: "#ffffff",
          lineDash: [2, 2],
        },
      });
      chart.annotation().line({
        start: ["-30%", "62%"],
        end: ["100%", "62%"],
        style: {
          stroke: "#ffffff",
          lineDash: [2, 2],
        },
      });
      chart.annotation().line({
        start: ["-30%", "85%"],
        end: ["100%", "85%"],
        style: {
          stroke: "#ffffff",
          lineDash: [2, 2],
        },
      });
      chart.interaction("element-active");

      chart.render();
    }
  }, [ready]);

  return (<div id={componentIndex} style={style}>

  </div>);
}
zhongshizhi91
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE-g2 y轴最小间隔设定
lyfclear的专栏
04-28 1540
原有显示 Y轴值随数据的变化自动调整，当间隔太少时不能准确反映数据的变化。在不改变数据转换的情况下将Y轴刻度限定到一定范围 import { Chart, registerShape } from '@antv/g2'; function splitData(data) { const marker = data.length - Math.floor(data.length * 0.4); const data1 = []; const data2 = []; for (l
AntV | 蚂蚁数据可视化 G2Plot 快速入门
weixin_46703850的博客
11-12 1万+
AntV | 蚂蚁数据可视化 G2Plot 快速入门 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。
前端数据可视化之AntV的G2Plot、G6、L7入门
前端攻城狮
11-24 8212
AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案 G2：可视化引擎 G2Plot：图表库 G6 : 图可视化引擎 Graphin：基于G6的图分析组件 F2 ：移动可视化方案 ChartCube：AntV 图表在线制作 L7：地理空间数据可视化 因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到 的G2Plot、G6、L7 的入门使用 一、G2Plot <!DOCTYPE html> <ht.
在vue中使用antV-G2展示柱状图之组件参数设置详解
黄俊的博客
10-28 6212
在vue中使用antV-G2展示柱状图_情天可视化的博客-CSDN博客G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
上上上篇ANTV留下来的坑
热门推荐
qq_43144059的博客
01-18 3万+
上篇第三个方法有问题,emmm,我把Script标签的位置和div的标签位置顺序放错了,重新录制了一个视频,还是项目的源码. 链接：https://pan.baidu.com/s/1c7Beb-gYRFbWD_nW9CUGgw 提取码：c783 复制这段内容后打开百度网盘手机App，操作更方便哦–来自百度网盘超级会员V1的分享 ...
antv G2 vue修改柱状图的宽度
weixin_44173929的博客
05-20 4828
第一步：import {registerTheme, Chart } from '@antv/g2' 第二步：registerTheme('newTheme', {minColumnWidth:20,maxColumnWidth:60,}); // 自定义主题，设置柱状图的最大宽度和最小宽度 第三步：this.containerHistogramChart.theme('newTheme'); // 定义好了使用即可 附上api所在位置：里面可以自定义很多东西，仔细看api文档就能找到了。 ...
antv-g2.chm
07-25
angular antv-g2官网的帮助文档本地缓存做成的离线文档，可以在不联网的状态下查看帮助手册，方便内网的同事们做参考手册，基于g2-3.0版本
antV-X6-demo-master.zip
04-16
在“antV-X6-demo-master.zip”压缩包中，包含了AntV X6的最新示例代码，这为我们深入理解和使用AntV X6提供了宝贵的资源。 AntV X6的核心特性在于其强大的图形绘制能力，它基于Canvas技术，能够轻松实现复杂的图形...
antv-v3.1.6-3-20230705085354262_axza213.apk
最新发布
07-26
antv-v3.1.6-3-20230705085354262_axza213.apk
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
01-18
AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用。 安装viser-vue yarn add viser-vue yarn add @antv/data-set main.js中引入 import Viser from ‘viser-vue’ Vue.use(Viser) 定义d2demo....
antv-g2plot-master_java_
10-03
标题中的"antv-g2plot-master_java_"表明这是...总结来说，"antv-g2plot-master_java_"涉及到的是AntV中的G2Plot库，为Java开发者提供了便利的数据图表绘制工具，同时与G6一起，为图数据的可视化提供了全面的解决方案。
动态图表，用表单控件制作的条形动态图，可以根据滚动条和选择框自主选则数据
01-13
运用表单控件来控制所选区域，运用offset函数来确定区域，做出美观的动态图表。
antv/g2在react中画柱状图，条形图与饼图
qq_43586648的博客
04-20 1572
cnpm install @antv/g2 --save 复制代码： import React, { Component } from 'react' import { Chart } from '@antv/g2'; class Hello extends Component { constructor(props){ super(props); this.state = { data: [ { name: '.
AntV G2 条形图
忘川
01-05 1053
import { Chart } from '@antv/g2'; const data = [ { type: '1岁', value: 340 }, { type: '2岁', value: 530 }, { type: '3岁', value: 620 }, { type: '4岁', value: 470 }, { type: '5岁', value: 190 }, ]; const chart = new Chart({ container: 'container',.
仿蚂蚁金服AntV框架蚂蚁数据可视化F2条形图、柱状图（注释详尽）
shalDream的博客
07-12 3508
大家好，这次使用的是AntV的蚂蚁数据可视化F2框架，类似于蚂蚁基金的效果，代码如下： F2框架参考网址：https://antv-f2.gitee.io/zh <canvas id="barCanvas"></canvas> import F2 from '@antv/f2'; const data = [{ year: '1951 年', sales: 38 }, { year: '1952 年', sales: 52 }, { year: '1956 年
antv f2图表参数详解
qq_41954585的博客
03-03 1060
折线图是经常使用并且比较容易的一种图形，G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合，折线图和面积图混合就可以实现如图效果；图形相关设置，文档上的说明不是很全，可以从图表示例获取相应信息。用于绘制区域图（面积图）、层叠区域图、区间区域图等。用于绘制折线图、曲线图、阶梯线图等。配置 position 通道映射规则。提示 tooltip。
Mybatis plus括号中使用or语句，andNew用法
weixin_43835492的博客
03-02 1881
文章目录前言一、使用步骤1.java写法2.形成的sql 前言 本章是基于EntityWrapper中or的用法，QueryWrapper的用法请去别处查看，暂没用到，懒得整理 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用步骤 1.java写法 代码如下（示例）： //有很多中Wrapper实现类,我也不是很了解，这里我使用的是EntityWrapper EntityWrapper wrapper = new EntityWrapper(); wrapper.eq("status", s
antvg2中的Slider 滑块插件的简介
weixin_44471622的博客
05-21 3231
1. 使用前提： Slider 组件作为 G2 的交互插件，必须在 G2 引入的前提下使用！ 为了做到纯粹和解耦，Slider 组件是完全基于数据的筛选操作，需要配合 DataSet 以及状态量使用，当滑动条发生变化时，通过定义 onChange 更新状态量，来达到图表的自动更新。 引入脚本 import G2 from '@antv/g2'; import Slider from '@antv/g2-plugin-slider'; const slider = new Slider({ })
antv g2plot可视化图表在vue中的使用之二：绘制折线图条形图柱状图
砥砺前行的博客
09-21 6762
运行程序 npm run serve 修改首页 绘制图型 修改图例 替换背景 修改动效 点击跳转
antv-g2 如何设置饼图颜色渐变
06-03
在antv-g2中，可以通过设置饼图的color字段来设置饼图的颜色。如果要设置颜色渐变，可以使用linear-gradient或radial-gradient等CSS渐变样式。具体步骤如下： 1. 在color字段中使用一个渐变的CSS样式。例如： ```...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值