<template>
  <div
    id="mainGantt"
    style="width:100%;height:100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainGantt')
      var myChart = echarts.init(chartDom)
      var option

      let xAxisData = []
      let dataX = [[], [], [], [], [], [], [], [], [], [], [], [], []]
      let data = [
        'W分区H4路(一期)',
        'W分区2号路',
        '西科四路',
        '师牛路工程',
        '西永大道拓宽改造',
        'M分区A4路',
        'M分区B2路',
        'M分区B5路',
        'W分区Z3路',
        'L分区永源路',
        'W分区H7路'
      ]
      for (let i = 0; i < 10; i++) {
        xAxisData.push(data[i])
        if (i < 1) {
          for (let j = 0; j < 13; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 2) {
          for (let j = 0; j < 12; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 3) {
          for (let j = 0; j < 11; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 4) {
          for (let j = 0; j < 10; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 5) {
          for (let j = 0; j < 9; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 6) {
          for (let j = 0; j < 8; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 7) {
          for (let j = 0; j < 7; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 8) {
          for (let j = 0; j < 6; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else if (i < 9) {
          for (let j = 0; j < 5; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        } else {
          for (let j = 0; j < 4; j++) {
            if (j == 9) {
              dataX[j].push(4)
            } else {
              dataX[j].push(0.5)
            }
          }
        }
      }
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      }
      option = {
        tooltip: {
          axisPointer: {
            type: ''
          },
          formatter: function(value) {
            let kg = '2020-05-06'
            let jg = '2021-07-09'
            let hh = '<br/>'
            return (
              value.name +
              hh +
              value.marker +
              '项目状态：' +
              value.seriesName +
              hh +
              value.marker +
              '开工时间：' +
              kg +
              hh +
              value.marker +
              '竣工时间：' +
              jg
            )
          }
        },
        xAxis: {
          name: '项目状态',
          nameTextStyle: {
            color: '#9FA1A7',
            fontSize: 16
          },
          type: 'value',
          axisTick: {
            // y轴刻度线
            show: false
          },
          type: 'value',
          interval: 0.5,
          min: 0,
          max: 10,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9FA1A7'
            },
            fontSize: 16,
            rotate: 30,
            // 这里重新定义就可以
            formatter: function(value) {
              var texts = []
              if (value === 0.5 || value === '0.5') {
                texts.push('立项')
              } else if (value === 1 || value === '1') {
                texts.push('可研')
              } else if (value === 1.5 || value === '1.5') {
                texts.push('规划')
              } else if (value === 2 || value === '2') {
                texts.push('初设')
              } else if (value === 2.5 || value === '2.5') {
                texts.push('概算')
              } else if (value === 3 || value === '3') {
                texts.push('施工图设计')
              } else if (value === 3.5 || value === '3.5') {
                texts.push('招投标')
              } else if (value === 4 || value === '4') {
                texts.push('合同')
              } else if (value === 4.5 || value === '4.5') {
                texts.push('施工许可')
              } else if (value === 7 || value === '7') {
                texts.push('工程施工')
              } else if (value === 9 || value === '9') {
                texts.push('竣工验收')
              } else if (value === 9.5 || value === '9.5') {
                texts.push('结算')
              } else if (value === 10 || value === '10') {
                texts.push('决算')
              } 
              return texts
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(255, 255, 255, 0.37)' // 左边线的颜色
            }
          }
        },
        yAxis: {
          data: xAxisData,
          name: '项目名称',
          nameTextStyle: {
            fontSize: 16
          },
          axisLine: {onZero: true},
          splitLine: {show: false},
          splitArea: {show: false},
          triggerEvent: true,
          axisLabel: {
            fontSize: 16,
            formatter: a => {
              return a.substring(0, 4) + '...'
            }
          }
        },
        grid: {
          bottom: 100
        },
        series: [
          {
            name: '立项',
            type: 'bar',
            stack: 'one',         
            emphasis: emphasisStyle,
            data: dataX[0],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#5470c6'
                  },
                  {
                    offset: 1,
                    color: '#50c48f'
                  }
                ])
              }
            }
          },
          {
            name: '可研',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[1],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#91cc75'
                  },
                  {
                    offset: 1,
                    color: '#26ccd8'
                  }
                ])
              }
            }
          },
          {
            name: '规划',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[2],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fac858'
                  },
                  {
                    offset: 1,
                    color: '#3685fe'
                  }
                ])
              }
            }
          },
          {
            name: '初设',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[3],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9977ef'
                  },
                  {
                    offset: 1,
                    color: '#ee6666'
                  }
                ])
              }
            }
          },
          {
            name: '概算',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[4],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#73c0de'
                  },
                  {
                    offset: 1,
                    color: '#f5616f'
                  }
                ])
              }
            }
          },
          {
            name: '施工图设计',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[5],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3ba272'
                  },
                  {
                    offset: 1,
                    color: '#f7b13f'
                  }
                ])
              }
            }
          },
          {
            name: '招投标',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[6],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fc8452'
                  },
                  {
                    offset: 1,
                    color: '#f9e264'
                  }
                ])
              }
            }
          },
          {
            name: '合同',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[7],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9a60b4'
                  },
                  {
                    offset: 1,
                    color: '#f47a75'
                  }
                ])
              }
            }
          },
          {
            name: '施工许可',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[8],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#ea7ccc'
                  },
                  {
                    offset: 1,
                    color: '#009db2'
                  }
                ])
              }
            }
          },
          {
            name: '工程施工',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[9],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#f89588'
                  },
                  {
                    offset: 1,
                    color: '#7cd6cf'
                  }
                ])
              }
            }
          },
          {
            name: '竣工验收',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[10],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#91cc75'
                  },
                  {
                    offset: 1,
                    color: '#0780cf'
                  }
                ])
              }
            }
          },
          {
            name: '结算',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[11],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fac858'
                  },
                  {
                    offset: 1,
                    color: '#765005'
                  }
                ])
              }
            }
          },
          {
            name: '决算',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: dataX[12],
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#ee6666'
                  },
                  {
                    offset: 1,
                    color: '#63b2ee'
                  }
                ])
              }
            }
          }
        ]
      }
      myChart.on('brushSelected', function(params) {
        var brushed = []
        var brushComponent = params.batch[0]
        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
          var rawIndices = brushComponent.selected[sIdx].dataIndex
          brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '))
        }
        myChart.setOption({
          title: {
            backgroundColor: '#333',
            text: '数据: \n' + brushed.join('\n'),
            bottom: 0,
            right: '10%',
            width: 100,
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        })
      })

      option && myChart.setOption(option)
      // //提示泡
      // myChart.on('mouseover', function(params) {
      //   if(params.componentType === 'yAxis') {
      //     let offsetX = params.event.event.offsetX
      //     let offsetY = params.event.event.offsetY
      //     let xAxisTip= document.querySelector('.x-axis-tip')
      //     xAxisTip.innerHTML = params.value.split('#')[0]
      //     xAxisTip.style.left = offsetX + 'px'
      //     xAxisTip.style.top = offsetY + 'px'
      //     xAxisTip.style.display = 'block'
      //   }
      // })
      // myChart.on('mousemove', function(params) {
      //   if(params.componentType === 'yAxis') {
      //     let offsetX = params.event.event.offsetX
      //     let offsetY = params.event.event.offsetY
      //     let xAxisTip= document.querySelector('.x-axis-tip')
      //     xAxisTip.innerHTML = params.value.substring(0,2)
      //     xAxisTip.style.left = offsetX + 30 + 'px'
      //     xAxisTip.style.top = offsetY + 10 + 'px'
      //     xAxisTip.style.display = 'block'
      //   }
      // })
      // myChart.on('mouseout', function(params) {
      //   let xAxisTip = document.querySelector('.x-axis-tip')
      //   xAxisTip.style.display = 'none'
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>