从零开始学习React-五分钟上手Echarts折线图(十）
- 2019 年 11 月 28 日
- 笔记
在jQuery里面，我会经常用到Echarts统计图，那么就从自己熟悉的地方写，今天在我之前写的React项目里面使用一下折线图。
1:安装Echarts依赖
cnpm install echarts cnpm install --save echarts-for-react
添加完成之后可以看到，package.json里面已经出现依赖了 。
2：新建一个组件空白组件模板，开始写代码
import React, { Component } from 'react'; class Echarts extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <div> <h2>我是echarts组件界面</h2> </div> ) } } export default Echarts;
3：在组件里面导入Echarts相关模块组件
引入 ECharts 主模块和引入需要用到的折线图：
// 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入折线图 import 'echarts/lib/chart/line';
4：render()内容
写一个盛放折线图的容器，和平时的写法是一致的
render() { return ( <div id="main" style={{ width: 600, height: 400 }}></div> ); }
5：使用生命周期函数，初始化echarts实例
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用，这里是在Echarts官方网站上复制过来的代码，暂时就写成静态的了，后面会继续写使用axios请求json，渲染在页面的过程。
componentDidMount() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [520, 932, 901, 1934, 1290, 1330, 1320], type: 'line' }] }); }
参考代码：
import React, { Component } from 'react'; // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入折线图 import 'echarts/lib/chart/line'; class Echarts extends Component { componentDidMount() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [520, 932, 901, 1934, 1290, 1330, 1320], type: 'line' }] }); } render() { return ( <div id="main" style={{ width: 600, height: 400 }}></div> ); } } export default Echarts ;
ok，这就可以实现一个图表了。
附：react系列教程完结，撒花~
从零开始学习React-开发环境的搭建（一） https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构，创建组件页面（二） https://www.jianshu.com/p/5b950b8cb73a 从零开始学习React-属性绑定（三） https://www.jianshu.com/p/2c251795d1b3 从零开始学习React-路由react-router配置(四) https://www.jianshu.com/p/2b86d5f4d9d7 从零开始学习React-axios获取服务器API接口（五） https://www.jianshu.com/p/81ca5cc94923 从零开始学习React-解析json、渲染数据（六） https://www.jianshu.com/p/1a998147b09b 从零开始学习React-在react项目里面使用mock（七） https://www.jianshu.com/p/2a5f296a865c 从零开始学习React-引入Ant Design 组件（八） https://www.jianshu.com/p/e7e905d89673 从零开始学习React-实现一个表格和分页（九） https://www.jianshu.com/p/eff442987730 从零开始学习React-五分钟上手Echarts折线图(十） https://www.jianshu.com/p/228fb761beb4
