大家好，今天为大家分享的是React中如何使用echarts图表。
我们都知道，Echarts图表功能非常强大，使用起来也很方便，我们的项目中就用到了Echarts，现在就带大家看看怎么在react中使用Echarts。
我们要想在react项目中高效使用echarts，建议大家安装echarts-for-react,它是一个简单的 echarts(v3.0)的 react 封装。在我们实际项目中使用非常简单。
如果是在react项目中使用图表，大家也可以使用bizcharts绘制图表，因为它是完全为react开发的，所以使用起来更容易上手。BizCharts 是一个基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表；并且集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。
1. 安装echarts-for-react
npm install --save echarts-for-react
2. 使用Echarts
import ReactECharts from 'echarts-for-react'; <ReactECharts option={this.getOption()} />
3. 实际代码演示
我们一般在实际项目中将图表都抽成一个组件，我们都知道，React有两种组件，一种是函数式组件，另一种是类组件，两种写法几乎都一样，现在笔者分别使用这两种对Echarts做简单的演示：
类组件式
import React, {Component} from 'react'; import ReactECharts from 'echarts-for-react'; // 在此组件中绘制一个简单的柱状图 export default class Bar extends Component{ // 返回柱状图的配置对象 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; render() { return( <div> <ReactECharts option={this.option} /> </div> ) } }
函数式组件式
import React from 'react'; import ReactECharts from 'echarts-for-react'; // 在此组件中绘制一个简单的折线图 const Line = () => { // 返回折线图的配置对象 let option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] }; return ( <div> <ReactECharts option={option} /> </div> ); }; export default Line;
饼图：
import React from 'react'; import ReactECharts from 'echarts-for-react'; // 在此组件中绘制一个简单饼图 const Pie = () => { // 返回饼图的配置对象 let option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 1048, name: '搜索引擎'}, {value: 735, name: '直接访问'}, {value: 580, name: '邮件营销'}, {value: 484, name: '联盟广告'}, {value: 300, name: '视频广告'} ] } ] }; return ( <div> <ReactECharts option={option} /> </div> ); }; export default Pie;
仪表盘图：
import React from 'react'; import ReactECharts from 'echarts-for-react'; // 在此组件中绘制一个仪表盘图 const Gauge = () => { // 返回仪表盘的配置对象 let option = { tooltip: { formatter: '{a} <br/>{b} : {c}%' }, series: [{ name: 'Pressure', type: 'gauge', progress: { show: true }, detail: { valueAnimation: true, formatter: '{value}' }, data: [{ value: 50, name: 'SCORE' }] }] }; return ( <div> <ReactECharts option={option} /> </div> ); }; export default Gauge;
以上就是本章的全部内容，感谢您的阅览
