<template>
    <div ref="Horizontal" class="mid"></div>
</template>

<script>
import * as echarts from 'echarts';
    export default {
        props:['data'],
        methods:{
            setHorizontalData(){
              const Horizontal = echarts.init(this.$refs['Horizontal']);
              let option = {
                grid: {
                  top: 80, // 设置网格顶部的边距为 50px 
                  left:10,
                  bottom:0,
                  right:"100px"
                  // left:'-10px'
                },
                title:{
                  text:"创客活动资金"
                },
                dataset: {
                  source: [
                    [ 'product', 'amount'],
                    ...this.data
                  ],
                },
                xAxis: { 
                  position:"top",
                  name:"单位：万元",
                  nameTextStyle:{
                    fontSize:14,
                    align:"left",
                    verticalAlign:"bottom",
                    padding:[0,0,7,10],
                  }
                },
                yAxis: {
                  type: 'category',
                  zlevel:1,
                  axisLabel:{
                    inside:true,
                    margin:4,
                    formatter: function (value) {
                      const vl = Math.floor(value.length/2);
                      let newText = value.slice(0,vl)+'\n'+value.slice(vl)
                      return newText;
                  },
                  color:function(value,index){
                    const textWidth = option['dataset']['source'][option['dataset']['source'].length-1][1]/6/2;
                    const vl = option['dataset']['source'][index+1][1]
                    return vl >= textWidth ? 'white' : '#3c4654';
                  }
                  },
                },
                series: [
                  {
                    type: 'bar',
                    barWidth:55,
                    label:{
                      show:true,
                      position:"right"
                    },
                    encode: {
                      x: 'amount',
                      y: 'product'
                    },
                    itemStyle:{
                      color:"#3eb370"
                    }
                  }
                ]
              }
              Horizontal.setOption(option)
            },
        },
        mounted(){
            this.setHorizontalData();
        }

    }
</script>

<style lang="less" scoped>

</style>