从零开始学习React-五分钟上手Echarts折线图(十）

在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

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。

最后编辑于：2019.11.25 18:54:45