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

王小婷

发布于 2019-11-28 00:15:13

3K0

发布于 2019-11-28 00:15:13

文章被收录于专栏：编程微刊编程微刊

在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，这就可以实现一个图表了。