一、简介及环境安装

les135-

1.常用数据可视化图表库

1) echarts

a. https://echarts.baidu.com/
b. 百度开源, 如果要在 react 项目中使用, 需要下载 echarts-for-react
文档 https://github.com/hustcc/echarts-for-react

2) G2

a. https://antv.alipay.com/zh-cn/g2/3.x/index.html
b. 阿里开源

3) bizcharts

a. https://bizcharts.net/products/bizCharts
b. 基于 react 包装 G2 的开源库
c. 需要额外下载 @antv/data-set

4) d3

a. https://d3js.org.cn/
b. 国外的免费可视化图表库

5) 其它可到印记中文找在-[ 可视化工具 ] 中

https://docschina.org

2.下载依赖

yarn add echarts echarts-for-react
yarn add bizcharts @antv/data-set

二、图表代码

1.bar.jsx-柱状图echarts

import React,{Component} from 'react'
import {Card,Button} from 'antd'
import ReactEcharts from 'echarts-for-react' //【1】引入图表export default class Bar extends Component{// 【4】设置状态state={sales:[50, 20, 36, 10, 20, 20], //销量stocks:[10,20,30,40,50,60] //库存}//【5】更新数据状态update=()=>{this.setState(state=>({sales:state.sales.map(sale=>sale+1), //用map方法逐个处理数组，都加1stocks:state.stocks.reduce((pre,stock)=>{ //用reduce方法逐个处理数组，都减1，此处是map方法快捷pre.push(stock-1)return pre},[]),}))}//【3】图表要展示的数据对象getOption=(sales,stocks)=>{return{title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量','库存']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: sales},{name:'库存',type:'bar',data:stocks}]}}render(){// 【6】解构取出状态内数据const {sales,stocks}=this.statereturn(<div className='bar'><Card><Button type='primary' onClick={this.update}>更新</Button></Card><Card title='柱状图一'>{/* 【2】引入图表组件 */}<ReactEcharts option={this.getOption(sales,stocks)} /></Card></div>)}
}

效果：点更新后库存会减少一个，销量增加一个

2.line.jsx: 折线图echarts

代码都同上，只有【1、2】两处把类型改了即可

import React,{Component} from 'react'
import {Card,Button} from 'antd'
import ReactEcharts from 'echarts-for-react' //引入图表export default class Line extends Component{// 设置状态state={sales:[50, 20, 36, 10, 20, 20], //销量stocks:[10,20,30,40,50,60] //库存}//更新数据状态update=()=>{this.setState(state=>({sales:state.sales.map(sale=>sale+1), //用map方法逐个处理数组stocks:state.stocks.reduce((pre,stock)=>{ //用reduce方法逐个处理数组，此处是map方法快捷pre.push(stock-1)return pre},[]),}))}//图表要展示的数据对象getOption=(sales,stocks)=>{return{title: {text: 'ECharts 销量库存示例图'},tooltip: {},legend: {data:['销量','库存']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'line', //【1】把bar改linedata: sales},{name:'库存',type:'line', //【2】把bar改linedata:stocks}]}}render(){// 解构取出状态内数据const {sales,stocks}=this.statereturn(<div><Card><Button type='primary' onClick={this.update}>更新</Button></Card><Card title='折线图一'>{/* 引入图表组件 */}<ReactEcharts option={this.getOption(sales,stocks)} /></Card></div>)}
}

效果：

3.pie.jsx: 饼状图echarts

import React, {Component} from 'react'
import {Card} from 'antd'
import ReactEcharts from 'echarts-for-react'/*
后台管理的饼图路由组件*/
export default class Pie extends Component {getOption = () => {return {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};}getOption2 = () => {return {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series : [{name:'访问来源',type:'pie',radius : '55%',center: ['50%', '50%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:274, name:'联盟广告'},{value:235, name:'视频广告'},{value:400, name:'搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]};}render() {return (<div><Card title='饼图一'><ReactEcharts option={this.getOption()} style={{height: 300}}/></Card><Card title='饼图二'><ReactEcharts option={this.getOption2()} style={{height: 300}}/></Card></div>)}
}

效果：

三.用bizcharts首页图表home/line.jsx

index.jsx

import React, {Component} from 'react'
import {Icon,Card,Statistic,DatePicker,Timeline
} from 'antd'
import moment from 'moment'import Line from './line'
import Bar from './bar'
import './home.less'const dateFormat = 'YYYY/MM/DD'
const {RangePicker} = DatePickerexport default class Home extends Component {state = {isVisited: true}handleChange = (isVisited) => {return () => this.setState({isVisited})}render() {const {isVisited} = this.statereturn (<div className='home'><CardclassName="home-card"title="商品总量"extra={<Icon style={{color: 'rgba(0,0,0,.45)'}} type="question-circle"/>}style={{width: 250}}headStyle={{color: 'rgba(0,0,0,.45)'}}><Statisticvalue={1128163}suffix="个"style={{fontWeight: 'bolder'}}/><Statisticvalue={15}valueStyle={{fontSize: 15}}prefix={'周同比'}suffix={<div>%<Icon style={{color: 'red', marginLeft: 10}} type="arrow-down"/></div>}/><Statisticvalue={10}valueStyle={{fontSize: 15}}prefix={'日同比'}suffix={<div>%<Icon style={{color: '#3f8600', marginLeft: 10}} type="arrow-up"/></div>}/></Card><Line/><CardclassName="home-content"title={<div className="home-menu"><span className={isVisited ? "home-menu-active home-menu-visited" : 'home-menu-visited'}onClick={this.handleChange(true)}>访问量</span><span className={isVisited ? "" : 'home-menu-active'} onClick={this.handleChange(false)}>销售量</span></div>}extra={<RangePickerdefaultValue={[moment('2019/01/01', dateFormat), moment('2019/06/01', dateFormat)]}format={dateFormat}/>}><CardclassName="home-table-left"title={isVisited ? '访问趋势' : '销售趋势'}bodyStyle={{padding: 0, height: 275}}extra={<Icon type="reload"/>}><Bar/></Card><Card title='任务' extra={<Icon type="reload"/>} className="home-table-right"><Timeline><Timeline.Item color="green">新版本迭代会</Timeline.Item><Timeline.Item color="green">完成网站设计初版</Timeline.Item><Timeline.Item color="red"><p>联调接口</p><p>功能验收</p></Timeline.Item><Timeline.Item><p>登录功能设计</p><p>权限验证</p><p>页面排版</p></Timeline.Item></Timeline></Card></Card></div>)}
}

bar.jsx

import React from "react"
import {Chart,Geom,Axis,Tooltip,
} from "bizcharts"export default class Bar extends React.Component {render() {const data = [{year: "1月",sales: 38},{year: "2月",sales: 52},{year: "3月",sales: 61},{year: "4月",sales: 145},{year: "5月",sales: 48},{year: "6月",sales: 38},{year: "7月",sales: 28},{year: "8月",sales: 38},{year: "59月",sales: 68},{year: "10月",sales: 38},{year: "11月",sales: 58},{year: "12月",sales: 38}]const cols = {sales: {tickInterval: 20}}return (<div style={{width: '100%', marginLeft: -30}}><Chart height={338} data={data} scale={cols} forceFit><Axis name="year"/><Axis name="sales"/><Tooltipcrosshairs={{type: "y"}}/><Geom type="interval" position="year*sales"/></Chart></div>)}
}

line.jsx

import React from "react"
import {Chart,Geom,Axis,Tooltip,Legend,
} from "bizcharts"
import DataSet from "@antv/data-set"export default class Line extends React.Component {render() {const data = [{month: "Jan",a: 7.0,b: 3.9,c: 5.9},{month: "Feb",a: 6.9,b: 4.2,c: 1.9},{month: "Mar",a: 9.5,b: 5.7,c: 3.9},{month: "Apr",a: 14.5,b: 8.5,c: 5.5},{month: "May",a: 18.4,b: 11.9,c: 8.9},{month: "Jun",a: 21.5,b: 15.2,c: 10.0},{month: "Jul",a: 25.2,b: 17.0,c: 12.9},{month: "Aug",a: 26.5,b: 16.6,c: 15.9},{month: "Sep",a: 23.3,b: 14.2,c: 20.7},{month: "Oct",a: 18.3,b: 10.3,c: 25.9},{month: "Nov",a: 13.9,b: 6.6,c: 30.9},{month: "Dec",a: 9.6,b: 4.8,c: 35.9}]const ds = new DataSet()const dv = ds.createView().source(data)dv.transform({type: "fold",fields: ["a", "b", "c"],// 展开字段集key: "city",// key字段value: "temperature" // value字段})const cols = {month: {range: [0, 1]}}return (<div style={{float: 'right', width: 750, height: 300}}><Chart height={250} data={dv} scale={cols} forceFit><Legend/><Axis name="month"/><Axisname="temperature"label={{formatter: val => `${val}万个`}}/><Tooltipcrosshairs={{type: "y"}}/><Geomtype="line"position="month*temperature"size={2}color={"city"}shape={"smooth"}/><Geomtype="point"position="month*temperature"size={4}shape={"circle"}color={"city"}style={{stroke: "#fff",lineWidth: 1}}/></Chart></div>)}
}

home.less

.home {padding: 24px;background: #fff;min-height: 850px;.home-card {float: left;}.home-content {position: absolute;top: 420px;width: 76%;border: 1px solid #e8e8e8;.home-menu {font-size: 20px;span {cursor: pointer;}.home-menu-active {border-bottom: 2px solid #1DA57A;color: #1DA57A;padding: 0 0 16px 0;}.home-menu-visited {margin-right: 40px;}}.home-table-left {float: left;width: 60%;}.home-table-right {float: right;width: 330px;}}
}

效果

《React后台管理系统实战：十一》可视图表及首页图表相关推荐

《React后台管理系统实战：五》产品管理（一）
一.概述 1.1目录结构及功能 src/pages/admin/product/add-update.jsx //添加及更新产品detail.jsx //产品详情home.jsx //产品默认页ind ...
《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页点击:onClick={() => this.props.history.push('/product/add-upda ...
Serverless 实战 —— Serverless + Egg.js 后台管理系统实战
Serverless + Egg.js 后台管理系统实战作为一名前端开发者,在选择 Nodejs 后端服务框架时,第一时间会想到 Egg.js,不得不说 Egg.js 是一个非常优秀的企业级框架,它 ...
从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的随便扯扯我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
React后台管理系统-品类选择器二级联动组件
React后台管理系统-品类选择器二级联动组件品类选择器二级联动 posted on 2018-06-26 22:21 gisery 阅读( ...) 评论( ...) 编辑收藏
react后台管理系统项目总结
React后台管理项目 1.创建一个项目 2.配置一个ui插件库开始实现跳转快速获取路由地址将路由和组件映射 axios请求实现登录模块隐藏二级路由按照价格排序或者按照销量等排序管理员 ...
react 拖拽连接插件_一款精美的 react 后台管理系统
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.这么好的react开源项目,值得珍藏了! 项目依赖模块项目是用create-react-app创建的,依赖包如下: react(是一个用于构建用户界面 ...
【共享单车】—— React后台管理系统开发手记：权限设置和菜单调整（未完）...
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

《React后台管理系统实战：十一》可视图表及首页图表