react中使用Echarts图表

Echarts图表功能很强大，使用起来也很方便，我们的项目中就用到了Echarts，现在我们就说说怎么在react中使用Echarts。我们用的前端开发工具时webStorm

1.添加依赖
在webStorm的命令行输入以下语句：

npm install --save echarts-for-react

依赖添加完成后项目的node_modules目录下出现echarts的依赖目录和echarts-for-react的依赖目录

image.png

在项目的package.json中出现echarts-for-react的依赖，如图所示：

image.png

我将代码提交到公司的git仓库中，别的同事pull下来后，在自己的项目中执行

npm  install

启动本地服务后会报错，说找不到echarts的依赖，所以如果只执行npm install --save echarts-for-react会报错，可以执行下面的命令

npm install --save echarts-for-react
npm install echarts --save

此时项目的package.json会出现两个依赖，如下图所示：

image.png

2.在图表页面引入Echarts

import React from 'react';
import ReactEcharts from 'echarts-for-react';

3.echarts的官方图表示例
官方网站：http://echarts.baidu.com/examples.html，提供了很多图表
我们以折线图为例，下图是官方的图表和对应的代码示例：

image.png

在react中使用echarts很简单，只需要将option中的代码放到react的getOtion方法中就就OK了，具体代码实现如下：

import React from 'react';
import ReactEcharts from 'echarts-for-react';

const LineMarkerEcharts = React.createClass({
    propTypes: {
    },
    getOtion: function() {
        const option = {
title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
        };
        return option;
    },
    render: function() {
        let code = "<ReactEcharts " +
            "    option={this.getOtion()} " +
            "    style={{height: '350px', width: '1000px'}}  " +
            "    className='react_for_echarts' />";
        return (
                    <ReactEcharts
                        option={this.getOtion()}
                        style={{height: '350px', width: '1000px'}}
                        className='react_for_echarts' />
        );
    }
});

export default LineMarkerEcharts;

此时，这个图表就成为了我们react中的组件，在项目中需要使用图表的时候直接引入组件就可以了，如下图我们在项目中的引用方法：

image.png

（因为项目的问题，原谅我不能将代码公布，只是看一下怎么使用就好了）

启动本地服务

npm run dev

我们就可以看到图表已经生成

很简单，如果我们需要别的图表直接在官网找到图表对应的示例代码，拷贝到getOtion的方法中

至于图表的一些设置可以看官方的api或者百度，有很多教程可以学习，就可以根据自己的需求展示不同的图表。

欢迎指正！！！