【React】react项目引入echarts插件 K线图

 

 

参考npm文档：https://www.npmjs.com/package/echarts-for-react

因为npm上已经有针对react项目出的echarts插件,因此在这里直接安装

第一步：npm安装echarts-for-react

npm install --save echarts-for-react npm install echarts --save //若是有报错找不到echarts模块，须要在安装一下exharts' 

第二步：引入模块和组件

import echarts from 'echarts' import echarts from 'echarts/lib/echarts' <ReactEcharts option={this.getOption()} /> 

第三步：参考echarts官网实例添加option参数

参考官网：https://echarts.baidu.com/examples/

  配置 option   =>>>

getOption =()=> { let option = { title:{ text:'用户骑行订单' }, tooltip:{ //展现数据 trigger:'axis' }, xAxis:{ data:['周一','周二','周三','周四','周五','周六','周日'] }, yAxis:{ type:'value' }, series:[ { name:'订单量', type:'bar', data:[1000,2000,1500,3000,2000,1200,800] } ] } return option; } 

注意：因为引入echarts文件太大，因此通常按需引入，完整项目代码以下：

import React from 'react'; import {Card} from 'antd'; import echartTheme from './../themeLight' //不是按需加载的话文件太大 //import echarts from 'echarts' //下面是按需加载 import echarts from 'echarts/lib/echarts' //导入折线图 import 'echarts/lib/chart/line'; //折线图是line,饼图改成pie,柱形图改成bar import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/markPoint'; import ReactEcharts from 'echarts-for-react'; export default class Line extends React.Component{ componentWillMount(){ //主题的设置要在willmounted中设置 echarts.registerTheme('Imooc',echartTheme); } getOption =()=> { let option = { title:{ text:'用户骑行订单', x:'center' }, tooltip:{ trigger:'axis', }, xAxis:{ data:['周一','周二','周三','周四','周五','周六','周日'] }, yAxis:{ type:'value' }, series:[ { name:'OFO订单量', type:'line', //这块要定义type类型，柱形图是bar,饼图是pie data:[1000,2000,1500,3000,2000,1200,800] } ] } return option } render(){ return( <div> <Card title="折线图表之一"> <ReactEcharts option={this.getOption()} theme="Imooc" style={{height:'400px'}}/> </Card> </div> ) } } 

注意：按需加载是引入node_modules文件夹中的js文件，因此，若是记得改import 'echarts/lib/chart/line'; 折线图不用改，饼图和柱形图line分别改成pie和bar

 

能够参考 简书文章 https://www.jianshu.com/p/9d97e5cdf486