echarts-for-react 2018-04-10

前端实习小记

echarts-for-react

ECharts，一个使用 JavaScript 实现的开源可视化库，底层依赖轻量级的矢量图形库 ZRender。提供丰富的图表展示数据

echarts-for-react一个基于Echarts4.0，直接使用于react项目

1、安装

 npm install --save echarts-for-react

2、使用 import ReactEcharts from 'echarts-for-react';

  

   getOption=（）=>{

     return{

  //所有配置项

    }

  }

3、需要引入echarts

如配置项中需要使用渐变色

import echarts from 'echarts';

使用

color: new echarts.graphic.LinearGradient(

                                0,0,0,1,

                                [

                                    {offset:0,color:'#83bff6'},

                                    {offset:0.5,color:'#188df0'},

                                    {offset:1,color:'#188df0'}

                                ]

                            )

4、事件处理   

事件处理  

如果事件需要改变页面元素，要改变的配置项使用状态值，在事件处理函数中改变状态值

5、初始化echarts实例-myChart

小练习

效果：

点击前展示平均价格

点击海鲜查看具体海鲜的价格