#2019-02-26
react图表展示踩坑ing。。。
因为在react中使用图表的时候经常遇到预料之外的错误，我在心态大蹦之余决定记录下本次悲惨经历。
Echarts
Echarts是一个很好的图表库，听说要做图表我第一个想到的就是Echarts，然而真正在使用的时候才发现：Echarts的表格在React中是“假的”。为什么这么说呢，看我在百度中找到答案：
参考文案：在react项目中使用ECharts - 王甘林 - 博客园
npm install echarts --save
import React, { Component } from 'react';// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';// 引入柱状图
import 'echarts/lib/chart/bar';// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
class EchartsTest extends Component {
componentDidMount() { // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] },
yAxis: {},
series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
});
}
render() {
return ( <div id="main" style={{ width: 400, height: 400 }}></div>);
}
}
export default EchartsTest;
代码简单易懂，按照它的说法的确可以显示出图表，但是问题就出在componentDidMount()上面，上文中所有的表格信息，包括数据，都直接写死在componentDidMount()中。在componentDidMount()中，无法获取到this.state的内容，也无法获取到this.props的内容，fetch接口直接获取数据也是异步的，无法在图表渲染之前把data数据获取到，也就是说图表是“死”的，根本无法展示动态的数据信息。最后我用了很复杂的方式总算可以动态显示出来，但是太过于复杂，就不作介绍了（可能是我对react的理解还不够透彻）反正Echarts这条路失败了。
AntV-G2
蚂蚁数据可视化 - AntV是一个很好的图形表格库
废话不说直接列文案：在 react 中使用 G2
注：官方文档在g2对React的介绍不全，坑很多，我尝试了无数次才终于摸清了G2在React中的使用方式
官方文档
这是官方给出的，却跟本没有给我this.state?!!
4个this.state.xxx全部为空，怎么测试。。。
不过问题不大，机智的我把这4个state的内容替换成了官方的数据，经过多次调试，终于成功显示出了我自己的图表：
这是截图
state的数据
OK
粗略的介绍，有缘再心细更新把，想看的话评论一下QQ加我，没有就算了，以后写一个详细一点的，我们CSDN见
关于简书
参考文案：公然恶意抹黑程序员，简书，要点脸好么？ - 技术视界 - CSDN博客
作为学生，学习React，没有老师教，只能靠百度。
搜索React，大部分优质答案都是简书上回答的，SCDN关于React的文章太少了。所以我才选择了在简书上注册，发布文章，本是寄希望于可以与更多的人交流，学习。我还年轻，最需要的就是学习我想要得到的知识，和结识志同道合的朋友。而在这里写文章的最根本原因，还是因为8个月之前还是一个萌新的我在CSDN上发布了一个问题，一个很小的问题，甚至大佬们连看一眼的心思都没有的问题，4个月之后有一个人遇到了一样的问题，又过4个月之后我才发现了他的评论，他留下了QQ号，我顺着QQ去找他，是一个比我大3年的前辈，问题早就解决了，而他很耐心的跟我讲述程序员未来的事物、工作，我对未来的生活一无所知，能有一个人给我指出明路，我真的很开心。有时候，写作的动力源泉，也是为了与人产生灵魂的共鸣吧。
在写这篇文章时想看看别的前辈们是怎么镶嵌代码的，我也是个温州人，偶然间在简书看到了老鲍，顺藤摸瓜的看到了这篇文章，好奇心驱使我看完了。。。简直就是我的噩梦。。。噩梦是我对知识的渴望似乎永远得不到回应了，我在这里研究了这么久的代码，发布一篇稍微正经一点的文章，只为能结识有一起学习React的同学。看完之后只有4个字：心灰意冷。大佬们谁还会在这里帮我？
老式的博客关于React的文章太少，新兴的简书又不招师祖们待见，明明答案近在咫尺，却得不到解决方法，这是最让人无奈的，如果有人能便捷的解决React图表问题或者不嫌麻烦用我的办法，请务必与我交流，谢谢🙏！
网友评论