react引入echart图表 超简单 一看就会~~

1 npm install echarts --save

2 按需导入柱状图

 // echars

import echarts from 'echarts/lib/echarts';

// 柱状图

import 'echarts/lib/chart/bar';

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

import 'echarts/lib/component/legend';

import 'echarts/lib/component/toolbox';

import 'echarts/lib/component/markPoint';

import 'echarts/lib/component/markLine';

3、export default class index extends Component {

componentDidMount() {

    // 实例化

    var myChart = echarts.init(this.refs.main);

    myChart.setOption(this.getOption());

  }

// echarts数据

  getOption=()=>{

   let option = {

      title: {

          text: 'ECharts 入门示例'

      },

      tooltip: {},

      legend: {

          data:['销量']

      },

      xAxis: {

          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

      },

      yAxis: {},

      series: [{

          name: '销量',

          type: 'bar',

          data: [5, 20, 36, 10, 10, 20]

      }]

  };

    return option  

  }

render(){

 

}

}

这样一个简单的图表就出来了~~~