10分钟快速学会React图表搭建

本次紧着之前的antd，接着学习有关react图表以及富文本编辑器的搭建。

本次的功能实现基于上次的【工具篇】10分钟学会Ant Design of React用法,再次的基础上添加成员的增删改功能，具体效果图如下：

本次图表搭建是基于百度的Echarts框架而来的。

既然本次是在react的基础上利用echarts来搭建好看的图表，那么首先先去npmjs官网下载echarts-for-react这个模块。

yarn add echarts echarts-for-react --save

并在config/menuConfig.js中添加新页面以及在pages下新建echart等文件夹，并在IRouter.js中添加页面新路由。

走起来瓷！！！学习喽！！！

一、柱形图搭建

1. 文件目录

pages
- echarts
  - bar
    - index.js
    - index.less

2.加载所需的文件

// 引入echarts
// 加载echart主题色
import echartTheme from '../echartTheme';
// 按需加载
import echarts from 'echarts/lib/echarts';
// 导入柱形图
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
// 引入react-for-echarts
import ReactEcharts from 'echarts-for-react';

3.柱形图搭建

class index extends React.Component {constructor(props) {super(props);this.state = { };}componentWillMount(){echarts.registerTheme("template",echartTheme);}getOption=()=>{let option = {title:{text:"用户阅读时长"},tooltip:{trigger:"axis"},xAxis:{data:["周一","周二","周三","周四","周五","周六","周日",]},yAxis:{type:"value"},series:[{name:"学习时长",type:"bar",data:[1,5,2,7,6,3,2]}]}return option;}getOption2=()=>{let option = {title:{text:"用户阅读时长"},tooltip:{trigger:"axis"},legend:{data:["小明","小红","小绿"]},xAxis:{data:["周一","周二","周三","周四","周五","周六","周日",]},yAxis:{type:"value"},series:[{name:"小明",type:"bar",data:[1,5,2,7,6,3,2]},{name:"小红",type:"bar",data:[2,10,8,9,4,6,5]},{name:"小绿",type:"bar",data:[3,7,8,7,8,9,10]}]}return option;}render() {return (<div><Card title="柱形图表之一" className="card-wrap" style={{height:500}}><ReactEcharts option={this.getOption()} theme="template"/></Card><Card title="柱形图表之二" className="card-wrap" style={{height:500}}><ReactEcharts option={this.getOption2()} theme="template"/></Card></div>);}
}export default index;

4.效果展示

二、饼图搭建

1.文件目录

pages

echarts
- pie
  - index.js
  - index.less

2.加载所需文件

// 引入echarts
// 加载echart主题色
import echartTheme from '../echartTheme';
// 按需加载
import echarts from 'echarts/lib/echarts';
// 导入柱形图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
// 引入react-for-echarts
import ReactEcharts from 'echarts-for-react';

3.饼图搭建

class index extends React.Component {constructor(props) {super(props);this.state = { };}componentWillMount(){echarts.registerTheme("template",echartTheme);}getOption=()=>{let option = {title:{text:"用户阅读时长",x:"center"},legend:{orient:"vertical",left:"right",data:["周一","周二","周三","周四","周五","周六","周日",]},tooltip:{trigger:"item",formatter:"{a}<br/>{b}:{c}({d}%)"},series:[{name:"学习时长",type:"pie",radius:'80%',center:["50%","60%"],data:[{value:3,name:"周一"},{value:5,name:"周二"},{value:7,name:"周三"},{value:10,name:"周四"},{value:9,name:"周五"},{value:5,name:"周六"},{value:2,name:"周日"}]}]}return option;}getOption2=()=>{let option = {title:{text:"用户阅读时长",x:"center"},legend:{orient:"vertical",left:"right",data:["周一","周二","周三","周四","周五","周六","周日",]},tooltip:{trigger:"item",formatter:"{a}<br/>{b}:{c}({d}%)"},series:[{name:"学习时长",type:"pie",radius:["50%","70%"],data:[{value:3,name:"周一"},{value:5,name:"周二"},{value:7,name:"周三"},{value:10,name:"周四"},{value:9,name:"周五"},{value:5,name:"周六"},{value:2,name:"周日"}]}]}return option;}render() {return (<div><Card title="饼图表之一" className="card-wrap" style={{height:500}}><ReactEcharts option={this.getOption()} theme="template"/></Card><Card title="图表之二" className="card-wrap" style={{height:500}}><ReactEcharts option={this.getOption2()} theme="template"/></Card></div>);}
}export default index;

4.效果展示

三、折线图搭建

1.文件目录

pages

echarts
- pie
  - index.js
  - index.less

2.加载所需文件

// 加载echart主题色
import echartTheme from '../echartTheme';
// 按需加载
import echarts from 'echarts/lib/echarts';
// 引入react-for-echarts
import ReactEcharts from 'echarts-for-react';

3.折线图构建

class index extends React.Component {constructor(props) {super(props);this.state = { };}componentWillMount(){echarts.registerTheme("template",echartTheme);}getOption=()=>{let option={title:{text:"用户学习时长",},tooltip:{trigger:'axis',},xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},yAxis:{type:"value"},series:[{name:"学习时长",type:"line",data:[4,6,2,5,6,8,10]}]}return option;}getOption2=()=>{let option={title:{text:"用户学习时长",},tooltip:{trigger:'axis',},legend:{data:["小明阅读时长","小红阅读时长","小绿阅读时长"]},xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},yAxis:{type:"value"},series:[{name:"小明阅读时长",type:"line",data:[4,6,2,5,6,8,10]},{name:"小红阅读时长",type:"line",data:[2,8,3,8,9,10,12]},{name:"小绿阅读时长",type:"line",data:[3,5,8,10,14,2,1]},]}return option;}render() {return (<div><Card title="折线图表之一" className="card-wrap" style={{height:500}}><ReactEcharts option={this.getOption()} theme="template"/></Card><Card title="折线图表之二" className="card-wrap" style={{height:500}}><ReactEcharts option={this.getOption2()} theme="template"/></Card></div>);}
}export default index;

4.效果展示

四、富文本编辑器搭建

富文本编辑器基于react-draft-wysing、draft-js以及通过draftjs-to-html来获取编辑器中的文本。

yarn add react-draft-wysiwyg draft-js draftjs-to-html --save

1.文件目录

pages

rich
- index.js
- index.less

2.加载所需文件

import React from 'react';
import {Card,Button,Modal} from 'antd';
import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';

3.编辑器构建

import React from 'react';
import {Card,Button,Modal} from 'antd';
import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';class index extends React.Component {constructor(props) {super(props);this.state = {  editorState:"",};}onEditorStateContent=(contentChange)=>{this.setState({contentChange,})}onEditorStateChange=(editorState)=>{this.setState({editorState,})}render() {return (<div><Card className="card-wrap" title="富文本编辑器"><EditoreditorState={this.state.editorState}onContentStateChange={this.onEditorStateContent}onEditorStateChange={this.onEditorStateChange}/></Card></div>);}
}export default index;

4.富文本编辑器

import React from 'react';
import {Card,Button,Modal} from 'antd';
import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';class index extends React.Component {constructor(props) {super(props);this.state = {  editorState:"",showRichText:false};}onContentStateChange=(contentChange)=>{this.setState({contentChange,})}onEditorStateChange=(editorState)=>{this.setState({editorState,})}handleClearContent=()=>{this.setState({editorState:'',})}handleGetText=()=>{this.setState({showRichText:true})}render() {return (<div><Card><Button type="primary" onClick={this.handleClearContent}>清空内容</Button><Button type="primary" onClick={this.handleGetText} style={{marginLeft:10}}>获取HTML文本</Button></Card><Card className="card-wrap" title="富文本编辑器"><EditoreditorState={this.state.editorState}onContentStateChange={this.onContentStateChange}onEditorStateChange={this.onEditorStateChange}/></Card><Modaltitle="富文本"visible={this.state.showRichText}onCancel={()=>{this.setState({showRichText:false})}}footer={null}>{draftToHtml(this.state.contentChange)}</Modal></div>);}
}export default index;

5.效果展示

结束了，估摸在更新一下有关react权限的，前端就差不多了！！！
接下来重点就是后端以及一些计算机基础知识和算法上了！！！

【工具篇】10分钟快速学会React图表搭建相关推荐

转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金
掘金首页探索掘金搜索 lvhanghmm的头像 Gopal lv-4 2021年03月09日阅读 9930 关注 [工具]10分钟快速搭建属于自己的文档网站前言很多同学都希望能够拥有自己的 ...
【PyCharm使用教程】10分钟快速学会使用PyCharm
PyCharm使用教程 Pycharm快捷键 1.配置解释器 2.安装python包 package 3.代码模版 4.IdeaVim插件 5.长句自动换行设置 6.复制路径和在访达中打开 7.str ...
【华为云技术分享】10分钟快速在华为云鲲鹏弹性云服务器上部署一个自己的弹幕网站！
摘要:从零代码开始,10分钟快速开发一个可以发送弹幕的网站,并将其部署在华为云服务器上:学完本期教程,将知道如何使用Nginx.如何将自己的网站部署到云服务器上. 直播相信大家都不陌生了吧,大家经常会 ...
10分钟快速配置sublime2支持jQuery开发
昨天介绍了javascript的开发工具sublime 2 edit,今天我们将介绍如何10分钟快速配置sublime2支持jQuery开发.希望大家能喜欢着款jQuery开发工具. 相关介绍:使用s ...
python的spider程序下载_PHPspider爬虫10分钟快速教程（内附python教程分享）
说到做爬虫,大家都可能第一时间想到的是python,其实php也是可以用来写爬虫程序的.php一贯简洁.易用,亲测使用PHPspider框架10分钟就能写出一个简单的爬虫程序. 一.PHP环境安装和 ...
文字识别软件测试初学者,【只要10分钟快速掌握文字识别】
[只要10分钟快速掌握文字识别] 教程 1．获取接口权限 2．下载接口调用工具 3．进行接口调用具体步骤如下: 1．获取接口权限 1.1 登录网址:ai.baidu.co ...
python爬虫十分钟速学教程_PHPspider爬虫10分钟快速教程
说到做爬虫,大家都可能第一时间想到的是python,其实php也是可以用来写爬虫程序的.php一贯简洁.易用,亲测使用PHPspider框架10分钟就能写出一个简单的爬虫程序. 一.PHP环境安装和 ...
新浪付稳：揭秘微博如何10分钟快速应对百亿级访问量
本文转载自:新浪付稳:揭秘微博如何10分钟快速应对百亿级访问量新浪微博几亿+的用户量,热点事件给其带来数倍流量瞬间暴增,如何不影响用户体验,又不增加巨大的服务器成本投入对技术是一个挑战. 作者:谢海 ...
Spring Boot 永远滴神！10分钟快速入门
为什么是 SpringBoot 因为目前开发 WEB 应用,Spring Boot 是启动 Spring 项目最快最流行的方式了.无论我们要构建一个什么样的应用,它都可以让我们尽可能快的启动运行起来. ...

【工具篇】10分钟快速学会React图表搭建

10分钟快速学会React图表搭建

一、柱形图搭建

1. 文件目录

2.加载所需的文件

3.柱形图搭建

4.效果展示

二、饼图搭建

1.文件目录

2.加载所需文件

3.饼图搭建

4.效果展示

三、折线图搭建

1.文件目录

2.加载所需文件

3.折线图构建

4.效果展示

四、富文本编辑器搭建

1.文件目录

2.加载所需文件

3.编辑器构建

4.富文本编辑器

5.效果展示

【工具篇】10分钟快速学会React图表搭建相关推荐

最新文章

热门文章