React中使用ECharts

        在react前端开发过程中，很多时候需要呈现一些统计报表，在国内做的比较好的图表库就是百度的echarts，但是echarts不能直接在react中使用，需要通过一个中间库来间接使用，这个库就是echarts-for-react，当前最新版本2.0.14。把echarts-for-react和echarts安装到你的项目就可以使用了。

用法：

1.首先导入到组件

import ReactEcharts from 'echarts-for-react';

import echarts from 'echarts'

 

2.使用ReactEcharts创建图表

<ReactEcharts

option={this.deviceStatePieOption()}

style={{ height: '350px', width: '47%' }}

className='react_for_echarts'

theme='shine' />

 

option 就是配置项，配置图表的参数，请参照echarts官方文档的说明

style 自定义样式，根据自己的页面布局需求来调整

className demo中使用的是react_for_echarts但是我感觉没什么用,可以使用自己定义的样式

theme 定义图表的主题，官方提供了很多主题，可自行下载

到这一步图表就已经创建好了

 

3.注意事项

     a.关于主题theme的用法

从官方下载适合自己风格的主题，选择下载json，加入到项目中备用，例如：

export const SHINE = {"color":["#c12e34”..............}

在要用的组件中导入该主题，然后注册到echarts，如下：

componentWillMount() {

    echarts.registerTheme('shine', SHINE);

}

然后就可以在ReactEcharts中使用主题'shine'了。当然你也可以在其他地方统一注册主题，组件中直接使用。

 

   b.如何自定义工具栏

在option对象中有个toolbox对象，toolbox中有个feature对象，在feature里面可以自定义工具栏，默认的工具栏可以自行调整开启关闭等，自定义工具栏必须以my命名开始，例如：

myOneDay: {

                show: true,

                title: '当天',

                icon: 'image:///images/day.png',

                onclick: function () {

                    //点击事件

                }

            }

show 是否呈现的开关

title 鼠标移上去展示的标题

icon 图标 建议大小16px-18px比较合适

onclick 点击事件

 

这当中有一个比较奇怪的问题，就是我自定义的最后一个图标的title文字显示不全，因为是canvas画的也不知道是被哪个元素遮住了，不好排查，我就在title文字后面多敲了几个空格来规避了这个问题。