react-echarts

在有些后台项目中我们常常会用到一些图表,用echarts、hcharts都能实现本章我们主要介绍前者,本着拎包入住的原则,我们废话不多说,开搞

1.项目中引入echarts依赖

    a. npm install --save echarts

2.打开echarts的官网开始copy

    a.贴上网址:http://echarts.baidu.com/index.html

3.找到自己想要的图表

    a.我框起来的代码直接copy

4.在react中实现

    a.在JS的头部直接引入

    b.import ECharts from 'react-echarts';         //引入react-echarts包,实现echarts实现

    c.插入控件

    d.<ECharts option={Option} />

    e.Option是我们从官网上copy的json对象

5.实现效果


项目源码地址请参考我的第一篇文章:

《什么是react》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,776评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,491评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,050评论 3 119
  • 在关于青春的描述中,努力奋斗是高频词汇,例如,“青春是该奋斗的年纪”,“少壮不努力老大徒伤悲”等等。但是有...
    小伍爷阅读 7,096评论 2 10
  • 1.最近看到太多要月入过万,月入过几万的文章,这样就引起了太多年轻人的不安与浮躁,觉得自己的工作多么不好。 如果你...
    枝秋阅读 2,593评论 0 0