React中使用图表插件(ECharts)

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

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

ECharts文档:https://www.echartsjs.com/zh/option.html#tooltip.trigger

代码如下：

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(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]])