十行代码搞定React图表需求

简介:

老板安排了一个图表需求,让我未使用过的React框架上编写一个图表,查询了一圈之后头晕脑胀的,一大堆图表工具echarts , G2什么的,傻傻搞不清楚。明天就要交需求的,想来想去,只有像Excel那种生成图表的工具才能救我。搜索了一圈之后,只有居然都是收费的,还卖得很贵。想去发帖求助,觉得花两千雇个来帮我写一下,一时半会也找不到。公司就我一个前端程序员,也没有后端来帮忙一下。咋整!

搜索一圈之后,发现居然有一个工具叫做react-auto-chart,看说明应该很容易使用,可以通过后台编译出让图表,我就简简单单的填一下数据,前端引入基础库就可以了。

搞起!!!

1、如果还有学过前端包管理软件npm的就用不了,还好这事简单,我会。安装了Node之后,就有npm命令行可以使用了。在teminal中敲击:

yarn add @openapplus/react-auto-chart --save

2、在React 的组件class中使用组件代码。

export default class Chart extends Component  {
     render() {
        const {
            match: {
                params: { code },
            }
        } = this.props;
        return (<GraphreportTempletAutoChart code={code} ></GraphreportTempletAutoChart>);
    }
}

这里code是从url中获取的。不过首先还是的有一个code,其实就是图表的ID。

3、读了Readme之后,找到开放的服务管理后台。注册登录一下。进入链接,在后台创建一下数据源,哈哈,MYSQL的,有各种驱动可以选择。我们公司就MySQL的数据库。然后创建一下chart,选择一个图表的样式,一个数据源可以生成多种样式,然后到组合图表里面把创建的chart关联起来。果然生成了一张大的复杂图表了。美滋滋!
4、把系统生成的图表链接的URL的最后一段数字拿出来,拼接React App的URL,就可以了。

十分钟就搞定了一周的工作。
Screen_Shot_2020_02_29_at_9_49_10_PM

目录
相关文章
|
17天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
10月前
|
前端开发 数据可视化 BizCharts
React使用echarts绘制图表
大家好,今天为大家分享的是React中如何使用echarts图表。 我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在就带大家看看怎么在react中使用Echarts。
|
5月前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
71 1
|
6月前
|
前端开发 容器
react使用echarts图表
react使用echarts图表
41 0
|
9月前
|
前端开发 API
react项目引入图表
要在React项目中使用图表,可以使用以下步骤: 安装图表库 可以使用React Chart.js、React Vis、Recharts等图表库。可以使用以下命令安装React Chart.js:
72 0
|
前端开发 JavaScript API
React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)
Ehcarts 作为数据展示的组件,应用场景丰富,所以在 React 里引入 Echarts 图表是每个前端必会技能。而 Echarts配置项多且复杂,每个配置项都会细分很多个配置小项,并且还对外暴露了一套 API,包括图表实例,事件监听等,还是有一定的上手难度。本文手把手教大家如何在 React 里使用 Echarts,并结合实际使用场景,分享我是如何处理图表自适应等具体问题。 最后来一个实战教学,教大家如何结合 ant-design React UI 框架,开发企业级的「数字币走势数据看板」,帮助大家加深对 Echarts 的理解。
|
存储 前端开发 API
(译)React hooks:它不是一种魔法,只是一个数组——使用图表揭秘提案规则
(译)React hooks:它不是一种魔法,只是一个数组——使用图表揭秘提案规则
146 0
|
Web App开发 JavaScript 前端开发
React Native 利用webView 加载echars图表 不显示问题
先看下 效果图吧 IMG_2273.PNG IMG_2272.PNG 之前用 第三方组件 native-echarts 也实现了雷达图,但是比较复杂,而且 android 和ios 上引入tpl.html文件也不一样,而且也没有上图中的渐变,反正效果不是很好。
2069 0
|
20天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
12天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择