vue echarts 柱形图

<style>
  @import '../../css/style.css';
</style>
<style>
  @import "../../css/vue_single_bar.css";
</style>
<template>

    <div class="single_bar">
        <chart class="bar" :options="singleBar"></chart>
      <div class="space"></div>
      <div class="barBtn">
        <button @click="goBar">goBar</button>
        <button @click="goShadowLine">goShadowLine</button>
      </div>
    </div>

</template>



<script>
  import eCharts from 'vue-echarts/components/ECharts'
    export default {
        data() {
            return {
              data_val1: [],
              _boyActual: [],
              _college:[]}
        },
      created(){
        this._boyActual = [100, 100, 150];
        this._college = ['3', '2', '1'];
      },
      methods:{
        goBar(){
          this.$router.push({path:'/single_line'})
        },
        goShadowLine(){
          this.$router.push({path:'/shadow_line'})
        },
      },
      computed:{
        singleBar(){
          return{
            tooltip: {
                  show:"true",
                  trigger: 'item',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
            legend:{
              show: true,
              data: ['支出' ,'收入'],
              bottom: 'bottom'

            },
            grid: {
              left: '12%',
              right: '2%',
              bottom: '3%',
              top:"10%",
              containLabel: false
            },
             calculable: true,
              xAxis: {
                type: 'value',
                show: true,
                max: 150,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                splitLine: {
                  show: false
                }
              },
              yAxis: [
                {
                type: 'category',
                position: "left",
                data: this._college,
                  axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  color:'#fff'
                },
                splitLine: {
                  show: false
                }
              },
                {
                type: 'category',
                position: "left",
                data: this._college,
                  axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  color:'#fff'
                },
                splitLine: {
                  show: false
                }
              }],
              series: [
                {
                name: '支出',
                type: 'bar',
                barWidth: 25,
                silent: true,
                yAxisIndex: 1,
                label: {
                  normal: {
                    show: true,
                    color:'#fff',
                    formatter: function(data) {
                      return [120,100,90][data.dataIndex] ;
                    },
                    position: 'insideRight'
                  }
                },
                itemStyle: {
                  normal: {
               color: new eCharts.graphic.LinearGradient(0, 0, 1, 0, [
                 {
                   offset: 0,
                   color: '#F4FDFF'
                 },
                 {
                 offset: 0.5,
                 color: 'rgb(5,250,238,0.4)'
               },
                 {
                   offset: 1,
                   color: '#05FAEE'
                 }
               ]),
                  }
                },
                data:[120,100,90]
              },
                {
                  z: 10,
                  name: '',
                  type: 'bar',
                  barWidth: 1,
                  silent: false,
                  yAxisIndex: 0,
                  itemStyle: {
                    normal: {
                      color: '#05FAEE'
                    }
                  },
                  data:  [120,100,90]
                },

                {
                  name: '收入',
                  type: 'bar',
                  barWidth: 25,
                  silent: true,
                  yAxisIndex:1,
                  label: {
                    normal: {
                      show: true,
                      color:'#fff',
                      formatter: function(data) {
                        return [150,120,110][data.dataIndex] ;
                      },
                      position: 'insideRight'
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: new eCharts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 0,
                          color: '#FFFFFF'
                        },
                        {
                          offset: 0.5,
                          color: 'rgb(254,254,0,0.4)'
                        },
                        {
                          offset: 1,
                          color: '#FEFE00'
                        }
                      ]),
                    }
                  },
                  data: [150,120,110],
                  z: 0,
                },

                {
                  z: 2,
                  name: '',
                  type: 'bar',
                  barWidth: 1,
                  silent: false,
                  yAxisIndex: 0,
                  barGap: 35,
                  itemStyle: {
                    normal: {
                      color: '#FEFE00',
                    }
                  },
                  data:  [150,120,110]
                }
              ]
          }
        }
      }
    }

</script>