text: import React from 'react'
  import ReactEcharts from 'echarts-for-react'
  import echarts from 'echarts'
  
  const CalendarComponent = () => {
    const getVirtulData = year => {
      year = year || '2017'
      let date = +echarts.number.parseDate(`${year}-01-01`)
      let end = +echarts.number.parseDate(`${+year + 1}-01-01`)
      let dayTime = 3600 * 24 * 1000
      let data = []
      for (let time = date; time < end; time += dayTime) {
        data.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 1000),
        ])
      }
      return data
    }
  
    let graphData = [
      [1485878400000, 260],
      [1486137600000, 200],
      [1486569600000, 279],
      [1486915200000, 847],
      [1487347200000, 241],
      [1487779200000, 411],
      [1488124800000, 985],
    ]
  
    let links = graphData.map((item, idx) => {
      return {
        source: idx,
        target: idx + 1,
      }
    })
    links.pop()
  
    const option = {
      tooltip: {
        position: 'top',
      },
      visualMap: [
        {
          min: 0,
          max: 1000,
          calculable: true,
          seriesIndex: [2, 3, 4],
          orient: 'horizontal',
          left: '55%',
          bottom: 20,
        },
        {
          min: 0,
          max: 1000,
          inRange: {
            color: ['grey'],
            opacity: [0, 0.3],
          },
          controller: {
            inRange: {
              opacity: [0.3, 0.6],
            },
            outOfRange: {
              color: '#ccc',
            },
          },
          calculable: true,
          seriesIndex: [1],
          orient: 'horizontal',
          left: '10%',
          bottom: 20,
        },
      ],
  
      calendar: [
        {
          orient: 'vertical',
          yearLabel: {
            margin: 40,
          },
          monthLabel: {
            nameMap: 'cn',
            margin: 20,
          },
          dayLabel: {
            firstDay: 1,
            nameMap: 'cn',
          },
          cellSize: 40,
          range: '2017-02',
        },
        {
          orient: 'vertical',
          yearLabel: {
            margin: 40,
          },
          monthLabel: {
            margin: 20,
          },
          cellSize: 40,
          left: 460,
          range: '2017-01',
        },
        {
          orient: 'vertical',
          yearLabel: {
            margin: 40,
          },
          monthLabel: {
            margin: 20,
          },
          cellSize: 40,
          top: 350,
          range: '2017-03',
        },
        {
          orient: 'vertical',
          yearLabel: {
            margin: 40,
          },
          dayLabel: {
            firstDay: 1,
            nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          },
          monthLabel: {
            nameMap: 'cn',
            margin: 20,
          },
          cellSize: 40,
          top: 350,
          left: 460,
          range: '2017-04',
        },
      ],
  
      series: [
        {
          type: 'graph',
          edgeSymbol: ['none', 'arrow'],
          coordinateSystem: 'calendar',
          links,
          symbolSize: 10,
          calendarIndex: 0,
          data: graphData,
        },
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: getVirtulData(2017),
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'calendar',
          calendarIndex: 1,
          symbolSize(val) {
            return val[1] / 40
          },
          data: getVirtulData(2017),
        },
        {
          type: 'scatter',
          coordinateSystem: 'calendar',
          calendarIndex: 2,
          symbolSize(val) {
            return val[1] / 60
          },
          data: getVirtulData(2017),
        },
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          calendarIndex: 3,
          data: getVirtulData(2017),
        },
      ],
    }
  
    return (
      <div className="examples">
        <div className="parent">
          <label> render a calendar-charts </label>
          <ReactEcharts
            option={option}
            style={{ height: '700px', width: '100%' }}
            className="react_for_echarts"
          />
        </div>
      </div>
    )
  }
  
  export default CalendarComponent
  