双图柱

/*
 * 固定资产右侧——图1
 * @Author: chen.yefeng
 * @Date: 2019-07-20 10:12:48
 * @Last Modified by: chen.yefeng
 * @Last Modified time: 2019-09-02 20:11:43
*/
import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import ReactEcharts from 'echarts-for-react'
import '../index.less'

@inject('UI')
@observer
export default class extends Component {
    constructor(props){
        super(props)
        this.state = {
            chartsData: [],
            chartsData1: [],
            mode:props.mode || '1',
           

          }
    }
    
    

    createOptions = (data) => {
          const myOptions = {
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              top: 0,
              right: 0,
              itemGap: 5,
              itemWidth: 15,
              itemHeight: 10,
              textStyle: {
                color: 'rgba(255,255,255,0.7)',
                fontSize: 10
              },
              data: data[3]
            },
            grid: {
              left: '5%',
              right: '5%',
              bottom: '5%',
              top: '15%',
              containLabel: true
            },
            xAxis: {
            //   name: '月份',
              nameTextStyle: {
                color: 'rgba(233,233,233,0.7)',
                fontSize: '70%'
              },
              type: 'category',
              axisLabel: {
                show: true,
                color: 'rgba(233,233,233,0.7)',
                fontSize: 10
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(233,233,233,0.3)'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: ['rgba(233,233,233,0.3)']
                }
              },
              data: data[0]
            },
            yAxis: [{
              show:true,
              nameTextStyle: {
                color: 'rgba(233,233,233,0.7)',
                fontSize: '70%'
              },
              type: 'value',
              splitNumber: 3,
              minInterval: 1,
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: ['rgba(233,233,233,0.3)']
                  }
              },
              axisLabel: {
                textStyle: {
                  color: 'rgba(233,233,233,0.7)',
                  fontSize: 10
                }
              },
              axisLine: {
                  show:false,
                lineStyle: {
                  color: 'rgba(233,233,233,0.3)'
                }
              }
            }
        ],
            series: [
              {
                name: '到达量',
                type: 'bar',
                yAxisIndex:0,
                smooth: true,
                itemStyle: {
                  color: '#4A90E2'
                },
                data: data[1]
              }, {
                name: '发送量',
                type: 'bar',
                yAxisIndex:0,
                smooth: true,
                itemStyle: {
                  color: '#F7B500'
                },
                data: data[2]
            }
            ]
          }
          return myOptions
        }


    componentWillReceiveProps (nextProps) {
      // if (nextProps !== this.props) {
      //   this.setState({ chartsData: nextProps.chartsData,mode:nextProps.mode })
      // }
    }

    componentDidMount () {
    }
    popClick = ()=>{
        // alert('44')
    }
    
    
    render () {
      const  { data } = this.props
    const myOptions = this.createOptions(data)
      return (
        

                    
        
      )
    }
}

image.png