前端知识|浅谈在React中使用echarts-创新互联
方法一：
echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。
和使用所有其他插件一样，首先，我们需要 install 它：
第一步：
npminstall --save echarts（依赖）
npminstall --save echarts-for-react
第二步：
在我们的项目中导入：
importReactEcharts from 'echarts-for-react'
第三步：
在 render 函数中使用：
option={this.getOption}
notMerge={true}
lazyUpdate={true}
style={{width: ‘400px’, height: ‘400px’}}
/>
组件基本参数介绍：
option:接收一个对象，该对象为 echarts 的配置项，详见： http://echarts.baidu.com/option.html#title
notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
LazyUpdate:可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
style:echarts 容器 div 大小，默认：{height: ‘300px’}
方法二：
当然，我们也不是真的需要一个 react-echarts 插件，我们可以使用 echarts 提供的模块化加载方法，按需导入我们需要的图表：
首先，我们需要在项目中导入 echarts：
importecharts from 'echarts/lib/echarts' //必须
import'echarts/lib/component/tooltip' //图表提示框（按需）
import'echarts/lib/component/grid' //图表网格（按需）
import 'echarts/lib/chart/bar' //引入柱状图（按需）
import'echarts/lib/chart/line’ //引入折线图（按需）
然后：我们需要在 render 函数中为图表放好一个容器：
{this.chartContainer = refs}} style={{width: ‘400px’, height: ‘400px’}}>
最后，我们需要在合适的生命周期中绘制我们的图表：
letmyChart = echarts.init(this.chartContainer)
letoption = {//echarts配置项}
myChart.setOption(option,true)
好了，echarts 已经成功的在项目中跑起来啦！
-END-
创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。
分享题目：前端知识|浅谈在React中使用echarts-创新互联
URL分享：http://scjbc.cn/article/dosgsh.html
