<template>
  <div class="kyfx" @click="keyuanfenxi">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;客源分析</div>
    <div id="kyfxchart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { kyfxchartInfo } from "../../servuces/prove";
export default {
  data () {
    return {
      ky_data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    kyfxchart () {
      const kyfxchart = document.getElementById('kyfxchart')
      const myChartkyfx = echarts.init(kyfxchart)
      const kyfxoption = {
        legend: [{
          data: ['线索总量'],
          right: '25%',
          textStyle: {
            color: 'white' // 设置柱子1的图例文本颜色
          },
          itemStyle: {
            color: 'rgb(84,112,198)' // 设置柱子1的图例文本颜色
          }
        },
        {
          data: ['交车量'],
          right: '6%',
          textStyle: {
            color: 'white' // 设置柱子2的图例文本颜色
          },
          itemStyle: {
            color: 'rgb(145,204,117)' // 设置柱子2的图例文本颜色
          }
        }
        ],
        tooltip: {
          backgroundColor: 'black',
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '6%',
          containLabel: true
        },
        dataset: {
          source:this.ky_data
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
            }
          },
          axisLabel: {
            color: 'white'
          }
        },
        yAxis: {
          show: true,

          splitLine: {
            //去除网格线
            lineStyle: {
              type: 'dashed',
              color: 'rgb(116, 116, 116,0.2)'
            },
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ' rgb(44,214,204)' // 设置x轴颜色为红色
            }
          },
          axisLabel: {
            color: 'white' // 设置x轴标签字体颜色为黑色
          },
          axisTick: {
            //坐标刻度
            show: true
          },
          // boundaryGap: [0, '10%']
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: '线索总量', type: 'bar', barWidth: 10, barGap: '80%', itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从左上到右下
                  [
                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
                    { offset: 0, color: 'rgb(84,112,198)' }  // 渐变结束颜色
                  ]
                )
              }
            },
          },
          {
            name: '交车量', type: 'bar', barWidth: 10, barGap: '80%', itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从左上到右下
                  [
                    { offset: 1, color: '#00000000' }, // 渐变起始颜色
                    { offset: 0, color: 'rgb(145,204,117)' }  // 渐变结束颜色
                  ]
                )
              }
            },
          }]
      }
      kyfxoption && myChartkyfx.setOption(kyfxoption);
      window.addEventListener('resize', function () {
        myChartkyfx.resize();
      })
    },
    getData () {
      kyfxchartInfo().then(res => {
        this.ky_data = res.data;
        this.kyfxchart();
      })
    },
    keyuanfenxi(){
      this.$router.push('/keyuanfenxidetail')

    }
  }
}
</script>
<style scoped lang="scss">
.kyfx {
  width: 100%;
  height: 100%;
  position: relative;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  // background-color: red;

  .godetail {
    position: absolute;
    top: 0;
  }

  #kyfxchart {
    width: 100%;
    height: 100%;
    // flex: 1;
  }
}
</style>