• 最近写有图表的页面,饼图、折线图都有。用的插件是蚂蚁金服下的一款开源可视化的前端组件库G2。 比较好上手,官方文档也写的清清楚楚,只是踩了个小小的坑。...询问大神可能是G2在计算屏幕宽度的...

    最近在写有图表的页面,饼图、折线图都有。用的插件是蚂蚁金服下的一款开源可视化的前端组件库G2。

    比较好上手,官方文档也写的清清楚楚,只是踩了个小小的坑。

    按照官方文档写下来,设置了图表的宽度自适应。然而页面在刚开始刷新的时候,canvas超出了屏幕的宽度,如果改变浏览器的大小,forceFit: true这个属性会自适应屏幕的宽度,这时图表的大小是正常的。

    询问大神可能是G2在计算屏幕宽度的时候有偏差,需要手动更新一下。所以需要在componentDidMount这个生命周期函数里加段这样的代码    const e = document.createEvent('Event');
                          e.initEvent('resize', true, true);
                          window.dispatchEvent(e);

    完美解决。

    展开全文
  • slider会遇到的问题,slider两边要求展示的为文字,但过滤的时候过滤条件为下标,实现思路如下: 过滤的时候判断条件是数值类型即下标,但为了滑块两端展示文字,需要将’start’,'end’那边改成对应的起始...
  • react+Antv-g2 demo 2020-03-14 22:05:44
    import React, { Component } from 'react' import './relevance.css' import Relevancenum from './Relevancenum' import Tabschange from './Tabschange' export default class Demo1 extends ...
  • react 中使用antv 生成柱状图
  • 项目需要大规模数据的展示,所以希望对几款主流的数据可视化数据渲染效率做一个简单的测评,包括G2、Echarts和D3,同时G2和Echarts都有对React框架进行封装的的版本,这里选择了使用原生的 环境 测试方向:本文只...
  • React 环境下使用 G2,官方推荐可以尝试使用 BizCharts 和 Viser-react。 总结: Bizcharts是一款基于antv的G2进行react封装的组件,是以数据为驱动的可视化图表。 Antv官网:antv.alipay.com/zh-cn...
  • React+G2踩坑:使用changeData 实时更新数据 用类组件 componentDidMount初始化图表,然后将chart实例进行保存即可 componentWillUpdate的时候完成对于图标的更新 代码例子 import React from 'react'; ...
  • React ECharts 使用后小结 2018-10-25 14:30:23
    本文主要讲述在react中使用ECharts图表工具echarts-for-react,文中列举出三个例子,即饼图Pie 折线图Line 柱状图Bar. 安装依赖echarts-for-react npm install echarts-for-react --save 效果图 饼图Pie 折线图...
  • ant design 和 G2使用 2018-05-13 15:14:46
    需求:开发过程遇报表可视化统计的效果。1. 使用npm指令新建一个react项目2. 打开antdesign官网拉到页面底部,如下3. 找到G2开发网站,加载你项目需要的依赖。具体使用看官网说明...
  • 第一步:引入地图api js ,地图容器id,初始化 <script type="text/javascript" src=...key=bca3c8db7e16261dadc9b149bb686e71"></script> ...div id="add-notice-container"...
  • 日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区、华东大区、华南大区、华西大区、华中大区以及华北大区并用颜色标识...
  • React Hooks介绍及应用场景 2019-02-28 18:14:36
    背景在使用React开发相关页面或维护相关组件时,常常会遇到一些难以避免的问题,比如:组件与状态相关的逻辑很难复用,例如相似弹层组件的打开、关闭、loading等逻辑复杂的组件难以开发与维护,当我们的组件需要...
  • ANTD组件中有图标组件,是基于G2,但我还是偏爱echarts,于是尝试在react中使用echarts,趟过了很多坑。本人小白,于是把自己趟过的坑记录下来分享给初学者们,我们大家一起学习进步。 坑1:第一次渲染数据为空,map...
  • 一,对于使用creat-react-app构建的项目,可以直接package.json下配置,具体如下"proxy": "http://api.xxxx.com"或者如果创建多个域,该如何设置proxy,能满足可以调用不同域下的API的需求?...
  • React使用与JSX的转换 2019-11-09 11:14:59
    前置技能:Chrome浏览器 一.拿糖:React使用 React v0.14 RC 发布,主要更新项目: 两个包: ReactReact DOM DOM node refs 无状态...
  • 学习React的Hadding Events这一章节,发现事件回调函数的几种写法,看似区别不大,但实际差异还是蛮大的。 class Toggle extends React.Component{ constructor(props) { super(props); this.state = ...
  • JTopo踩坑记 – React项目中使用JTopo JTopo-in-node & JTopo 最近实习公司一个项目需要绘制电网的拓扑图,大致要求的效果如下: 首先想到的是Echarts和d3,因为这个项目其他图表都是使用的Echarts, 但是...
  • 基于蚂蚁金服开发的可视化工具G2React版本封装,使用体验更符合 React 技术栈的习惯,并且与 AntV 有着紧密的协同。 Bizcharts 地址:alibaba.github.io/BizCharts/ 如何使用Bizcharts? 安装BizCharts npm 包...
  • 一.echarts的折线图的使用demo如下,linecharts为实例化的封装组件,line为实际应用的组件 cnpm install echarts import React from 'react'; import './lineCharts.less'; let echarts = require('...
  • 快速上手AntV G2Plot 2020-04-02 15:09:32
    小白一枚,引入官方示例各种报错,发现Line对象在G2Plot对象里面! 将const linePlot = new Line()…改为const linePlot = new G2Plot.Line后正常, 标题复制下面代码可直接出效果 <!DOCTYPE html> <...
1 2 3 4 5 ... 20
收藏数 717
精华内容 286