React中使用图表插件(ECharts)

在React项目中是如何使用ECharts的呢

简单粗暴不多bb 直接上代码  新手上路 不喜勿喷

ECharts文档:

代码如下：

import React from react;
import {
          
   Card} from antd;
import ReactEcharts from echarts-for-react;
export default class Line extends React.Component{
          
   
  componentWillMount(){
          
   
    //主题的设置要在willmounted中设置
  }
  getOption =()=> {
          
   
    let option = {
          
   
      tooltip: {
          
   
          trigger: axis,
          axisPointer: {
          
   
              type: cross,
              crossStyle: {
          
   
                  color: #999
              }
          }
      },
      toolbox: {
          
   
          feature: {
          
   
              dataView: {
          
   show: true, readOnly: false},
              magicType: {
          
   show: true, type: [line, bar]},
              restore: {
          
   show: true},
              saveAsImage: {
          
   show: true}
          }
      },
      legend: {
          
   
          data:[蒸发量,降水量,平均温度]
      },
      xAxis: [
          {
          
   
              type: category,
              data: [1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月],
              axisPointer: {
          
   
                  type: shadow
              }
          }
      ],
      yAxis: [
          {
          
   
              type: value,
              name: 水量,
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
          
   
                  formatter: {value} ml
              }
          },
          {
          
   
              type: value,
              name: 温度,
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
          
   
                  formatter: {value} °C
              }
          }
      ],
      series: [
          {
          
   
              name:蒸发量,
              type:bar,
              data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
          
   
              name:降水量,
              type:bar,
              data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
          
   
              name:平均温度,
              type:line,
              yAxisIndex: 1,
              data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
      ]
  };
   return option
  }

  render(){
          
   
    return(
      <div>
        <Card title="折线图表之一" style={
          
   {
          
   margin:20px}}>
            <ReactEcharts option={
          
   this.getOption()} style={
          
   {
          
   width:500px}}/>
        </Card>

      </div>
    )
  }
}

步骤说明

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

npm install --save echarts-for-react
npm install echarts --save	// 如有报错找不到echarts模块，需安装一下echarts

第二步：引入模块

import ReactEcharts from echarts-for-react;

第三步： 引入组建

<ReactEcharts option={
          
   this.getOption()} theme="Imooc"/>

喜欢文章 反手就是一个赞console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]])