Echarts圖表功能很強大，使用起來也很方便，我們的項目中就用到了Echarts，現(xiàn)在我們就說說怎么在react中使用Echarts。我們用的前端開發(fā)工具時webStorm

1.添加依賴
在webStorm的命令行輸入以下語句：

npm install --save echarts-for-react

依賴添加完成后項目的node_modules目錄下出現(xiàn)echarts的依賴目錄和echarts-for-react的依賴目錄

image.png

在項目的package.json中出現(xiàn)echarts-for-react的依賴，如圖所示：

image.png

我將代碼提交到公司的git倉庫中，別的同事pull下來后，在自己的項目中執(zhí)行

npm  install

啟動本地服務(wù)后會報錯，說找不到echarts的依賴，所以如果只執(zhí)行npm install --save echarts-for-react會報錯，可以執(zhí)行下面的命令

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

此時項目的package.json會出現(xiàn)兩個依賴，如下圖所示：

image.png

2.在圖表頁面引入Echarts

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

3.echarts的官方圖表示例
官方網(wǎng)站：http://echarts.baidu.com/examples.html，提供了很多圖表
我們以折線圖為例，下圖是官方的圖表和對應(yīng)的代碼示例：

image.png

在react中使用echarts很簡單，只需要將option中的代碼放到react的getOtion方法中就就OK了，具體代碼實現(xiàn)如下：

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

const LineMarkerEcharts = React.createClass({
    propTypes: {
    },
    getOtion: function() {
        const option = {
title: {
        text: '未來一周氣溫變化',
        subtext: '純屬虛構(gòu)'
    },
    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

（因為項目的問題，原諒我不能將代碼公布，只是看一下怎么使用就好了）

啟動本地服務(wù)

npm run dev

我們就可以看到圖表已經(jīng)生成

很簡單，如果我們需要別的圖表直接在官網(wǎng)找到圖表對應(yīng)的示例代碼，拷貝到getOtion的方法中

至于圖表的一些設(shè)置可以看官方的api或者百度，有很多教程可以學(xué)習(xí)，就可以根據(jù)自己的需求展示不同的圖表。

歡迎指正?。?！