<template>
    <div ref="Columnar" class="histogram"></div>
</template>

<script>
import * as echarts from 'echarts';
    export default {
        props:['data'],
        methods:{
            //横向柱状图
            setColumnarData(){
              const Columnar = echarts.init(this.$refs['Columnar']);
              let option ={
                grid: {
                  top: 80,
                },
                title:{
                  text:"个人创客资金",
                  top:0
                },
                dataset: {
                  // 提供一份数据。
                  source:this.data
                },
                // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                xAxis: { 
                  type: 'category',
                  axisLabel: {
                    formatter: function (value) {
                      // 设置每行显示的最大字符数
                      var maxLength = 4;
                      // 计算文本需要换行的行数
                      var rowNumber = Math.ceil(value.length / maxLength);
                      // 拼接换行后的文本
                      var newText = '';
                      for (var i = 0; i < rowNumber; i++) {
                        var start = i * maxLength;
                        var end = start + maxLength;
                        newText += value.slice(start, end) + '\n';
                      }
                      return newText;
                    }
                  }
                },
                // 声明一个 Y 轴，数值轴。
                yAxis: {
                  name:"单位：万元",
                  nameTextStyle:{
                    fontSize:14,
                    align:"center",
                  }
                },
                // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
              }
              Columnar.setOption(option)
            }
        },
        mounted(){
            this.setColumnarData();
        }
    }
</script>

<style lang="less" scoped>

</style>