从零开始学习React
在jQuery里面，我会经常用到Echarts统计图，那么就从自己熟悉的地方写，今天在我之前写的React项目里面使用一下折线图。
1:安装Echarts依赖代码语言：javascript
代码运行次数：
0
运行
复制
cnpm install echarts cnpm install --save echarts-for-react
添加完成之后可以看到，package.json里面已经出现依赖了 。
代码语言：javascript
代码运行次数：
0
运行
复制
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 主模块和引入需要用到的折线图：
代码语言：javascript
代码运行次数：
0
运行
复制
// 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入折线图 import 'echarts/lib/chart/line';4：render()内容
写一个盛放折线图的容器，和平时的写法是一致的
代码语言：javascript
代码运行次数：
0
运行
复制
render() { return ( <div id="main" style={{ width: 600, height: 400 }}></div> ); }5：使用生命周期函数，初始化echarts实例
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用，这里是在Echarts官方网站上复制过来的代码，暂时就写成静态的了，后面会继续写使用axios请求json，渲染在页面的过程。
代码语言：javascript
代码运行次数：
0
运行
复制
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' }] }); }
参考代码：
代码语言：javascript
代码运行次数：
0
运行
复制
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-开发环境的搭建（一）
https://cloud.tencent.com/developer/article/1532965
从零开始学习React-目录结构，创建组件页面（二）
https://cloud.tencent.com/developer/article/1532966
从零开始学习React-属性绑定（三）
https://cloud.tencent.com/developer/article/1534225
从零开始学习React-路由react-router配置(四)
https://cloud.tencent.com/developer/article/1536340
从零开始学习React-axios获取服务器API接口（五）
https://cloud.tencent.com/developer/article/1536339
从零开始学习React-解析json、渲染数据（六）
https://cloud.tencent.com/developer/article/1536334
从零开始学习React-在react项目里面使用mock（七）
https://cloud.tencent.com/developer/article/1542288
从零开始学习React-引入Ant Design 组件（八）
https://cloud.tencent.com/developer/article/1541870
从零开始学习React-实现一个表格和分页（九）
https://cloud.tencent.com/developer/article/1544905
从零开始学习React-五分钟上手Echarts折线图(十）
https://cloud.tencent.com/developer/article/1545043
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
相关知识
React Native：用JavaScript开发移动应用
react 对象克隆
2023版完整版web前端学习路线图（超详细自学路线）
React Session Seed：构建基于React和Fluxor的用户认证种子项目
【React】在项目中使用阿里图标库
揭秘：React框架，水能浇灌的编程之花？
深度学习与安全
从零开始学养花音频，养花技巧视频大全
App前端开发跨平台框架比较：React Native、Flutter、Xamarin等
从零开始学养花攻略，养花教程
网址: 从零开始学习React https://m.huajiangbk.com/newsview1946814.html
| 上一篇: 魔兽世界怀旧服费伍德轻歌花位置在 |
下一篇: Pandas入门篇（三） |
