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

她姓曹 發表於 2019-6-8 10:17:00

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

<div class="image-package">
<div class="image-caption">
<img src="https://img2018.cnblogs.com/blog/1255309/201906/1255309-20190608100936337-1762194371.png" alt="">
 
</div>
</div>
<h6><img src="https://img2018.cnblogs.com/blog/1255309/201906/1255309-20190608101013723-1661936583.png" alt=""></h6>
 
<h6>参考npm文档：https://www.npmjs.com/package/echarts-for-react</h6>
由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装
<h6>第一步：npm安装echarts-for-react</h6>
<pre class="hljs cpp"><code class="cpp">npm install --save echarts-for-react
npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts'
</code></pre>
<h6>第二步：引入模块和组件</h6>
<pre class="hljs javascript"><code class="javascript">import echarts from 'echarts'
import echarts from 'echarts/lib/echarts'
<ReactEcharts option={this.getOption()} />
</code></pre>
<h6>第三步：参考echarts官网实例添加option参数</h6>
参考官网：https://echarts.baidu.com/examples/
  配置 option   =>>>
<pre class="hljs javascript"><code class="javascript">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;
}
</code></pre>
<h6>注意：由于引入echarts文件太大，所以一般按需引入，完整项目代码如下：</h6>
<pre class="hljs javascript"><code class="javascript">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>
)
}
}
</code></pre>
<h6>注意：按需加载是引入node_modules文件夹中的js文件，所以，如果记得改import 'echarts/lib/chart/line'; 折线图不用改，饼图和柱形图line分别改为pie和bar</h6>
 
可以参考简书文章 https://www.jianshu.com/p/9d97e5cdf486
<img src="https://img2018.cnblogs.com/blog/1255309/201906/1255309-20190608101616360-1308431727.gif" alt="">
  
来源：https://www.cnblogs.com/reeber/p/10990082.html

頁: [1]

琼殿技术论坛's Archiver

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