/**
 * 按天統(tǒng)計(jì)公交載客量
 */
import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'

import './index.less'

export default class BusLoad extends Component {
  constructor (props) {
    super(props)

    this.state = {
      chartsData: []
    }
  }

  createOptions = (chartsData = []) => {
    let padding = chartsData.length && chartsData[0].length? [0, 0, 0, 90]: [0, 0, 0, 30]
    const myOptions = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '0%',
        right: '0%',
        bottom: '3%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: '#9B9B9B'
        },
        splitLine: {
          show: false
        },
        data: [1,2,3,4,5]
      },
      yAxis: [{
        name: '發(fā)送人次',
        nameTextStyle: {
          color: '#AFBCC4',
          padding: padding
        },
        type: 'value',
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: '#9B9B9B'
        }
      }],
      series: [{
        name: '載客量',
        type: 'bar',
        yAxisIndex: 0,
        barWidth : 20,
        barMaxWidth: 40,
        itemStyle: {
            normal:{
　　　　　　　　　//每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長(zhǎng)度，則柱子顏色循環(huán)使用該數(shù)組
              color: function (params){
                 var colorList = [
                  ['#E02020','rgba(224,32,32,0.10)'],
                  ['#FA6400','rgba(250,133,0,0.10)'],
                  ['#F8E71C ','rgba(248,231,28,0.10)'],
                　['#00C1DE','rgba(0,193,222,0.10)'],
                  ['#6236FF','rgba(98,54,255,0.10)']];
                 
                                              var index=params.dataIndex;
                                              if(params.dataIndex >= colorList.length){
                                                      index=params.dataIndex-colorList.length;
                                               }
                 
                　　　　　　　　　　　　      return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                　　　　　　　　　　　　　     [
                　　　　　　　　　　　　　　       {offset: 0, color: colorList[index][0]},
                　　　　　　　　　　　　　　       {offset: 1, color: colorList[index][1]}
                　　　　　　　　　　　　　     ]);
                　　　　　　　　　　},
                　　　　　　　　　　barBorderRadius: 5  //柱狀角成橢圓形
                　　　　　　　　},
        },
        label: {
          show: false
        },
        data: [5,6,3,1,2]
      }]
    }
    return myOptions
  }

  componentWillReceiveProps (nextProps) {
    this.setState({ chartsData: nextProps.data })
  }

  render () {
    const myOptions = this.createOptions(this.state.chartsData)

    return (
      <div className='panel-chart1'>
        <div className='chart-main'>
          <ReactEcharts
            style={{ width: '100%', height: '100%' }}
            option={myOptions}
            lazyUpdate
            notMerge
          />
        </div>
      </div>
    )
  }
}