一:npm 安装echarts依赖包

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

二:在js文件中import 引入echarts

import echarts from 'echarts'

三:之后书写echarts 方法 以挂载到生命周期函数中

 initEcharts=(list)=>{
    if(document.getElementById('mycharts')){
      var myCharts = echarts.init(document.getElementById('mycharts'));
      const that = this
      myCharts.setOption({
        title: {
          text: '近10天收益',
          subtext:"(收益明细可在我的订单查看)",
          textStyle: {
            color: '#666666',
            fontSize: 16,
            fontWeight: 400,
            fontFamily: 'PingFang SC',
          },
          left: 20,
          top:20,
        },
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          show: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#F5AC87',
            fontSize: 14,
          }
        },

        yAxis: {
          type: 'value',
          show: false
        },
        color: '#FF7C3D',
        series: [{
          data: list,
          type: 'bar',
          barWidth: 16,

          itemStyle: {
            //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
            emphasis: {
              barBorderRadius: 30
            },

            normal: {
              //柱形图圆角，初始化效果
              barBorderRadius: [10, 10, 10, 10],

            }
          }
        }]
      })
      myCharts.on('click', function (params) {
        get_newData({type: params.dataIndex}).then(res => {
          if ( res.code === 1 ) {
            that.setState({
              data1: res.data.data1,
              data2: res.data.data2,
              data3: res.data.data3,
              data4: res.data.data4,
              today:params.value
            })
          }
        })

      })
    }
  }

挂载到生命周期函数中:

 componentDidMount(){
    const {bar,Achievement_src,list} =this.state
    if(bar ==1){
      get_Team().then(res=>{
        this.setState({Team_src:res.data})
      })
    }
    if(bar==2){
      get_data().then(res=>{
        if(res.code===1){
          const arr=[];
          res.data.day.map((item,index)=>{
            arr.push(item)
          })
          this.setState({
            Achievement_src:res.data,
            today:res.data.today,
            data1:res.data.money_detail.data1,
            data2:res.data.money_detail.data2,
            data3:res.data.money_detail.data3,
            data4:res.data.money_detail.data4,
            list:arr
          })
          arr&&arr.length>0?this.initEcharts(arr):"";
        }else{
        }
      })
    }
    list&&list.length>0?this.initEcharts(list):"";
  }

上述为请求数据动态渲染echarts图表,总体思路为:
1.安装依赖包;
2.引入插件并根据echarts文档书写函数及对应的事件;
3.挂载到生命周期函数中;
4.请求接口,给需要渲染的data赋值,从而生成动态图表;

echarts.jpg