src/components/incomeOverview/index.vue

<template>
  <div class="app-incomeBox">
    <div class="theme-card">
      <div class="title"><span>收入概况</span> </div>
      <div class="content">
        <!--<div class="lineChart"></div>-->
        <div class="topBox eleVerHorCenter-flex">
          <span class="eleText">总计</span>
          <div class="eleMarginLeft" v-html="incomeTotal"></div>
        </div>
        <div class="bottomBox eleVerHorCenter-flex">
          <div class="incomeBar"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import common from '../../api/common';
  import echarts from 'echarts'
    export default {
      name: "incomeOverview",
      data() {
        return {
          demo:'',//示例
          incomeTotal:"",//总收入
          barChart: {},//柱状图
          barChartOption:{
            name:['支付宝', '微信', '其它'],
            barColor:[
              {name:"支付宝",from:"#2772F4",to:"#00CAFE",value:1683,color:'#01AEFE'},//color y轴颜色、value值
              {name:"微信",from:"#02C202",to:"#51EC51",value:234,color:'#06C406'},
              {name:"其它",from:"#FD8811",to:"#FFAB00",value:123,color:'#FFAB00'}
            ],//柱子颜色
            textColor:['#01AEFE', '#06C406', '#FFAB00'],//name颜色
          }
        }
      },
      mounted() {
        this.axios.post('urban/intelligence/income/queryIncomeStaByOrgIds',{
          orgIds: this.GLOBAL.paramsvariables
        }).then((response)=>{
          let  data = response.data.data
          this.incomeTotal = data.totalPay
          this.incomeTotal = common.formatNumToStr(this.incomeTotal)
          this.barChartOption.barColor[0].value = data.aliPay
          this.barChartOption.barColor[1].value = data.wxPay
          this.barChartOption.barColor[2].value = data.otherPay
          let barChartOption = this.barChartOption
          this.barChart=this.createBar(barChartOption);
          window.addEventListener('resize', function() {
            this.barChart.resize()
          }.bind(this));
        }).catch((response)=>{
          console.log(response);
        })
        //this.createLine();
        //debugger;
        //总收入
        this.incomeTotal=this.formatNumToStr();
        //收入Bar
      },
      methods: {
        /*
        * 格式化收入总数
        * */
        formatNumToStr:function(){
          return common.formatNumToStr(this.$options.data().demo);
        },
        /*
         * 创建收入Bar
         * */
        createBar:function(barChartOption){
          let root=barChartOption;
          console.log(root)
          let barChart = echarts.init(document.querySelector('.app-incomeBox .incomeBar'));
          const rightYdata=this._formatterValue(root.barColor);
          const seriesData=this._seriesData(root.barColor);
          var option={
//            grid: {
//              left: '0%',right: '0%',
//              bottom: '-15%', top: '0%',
//              containLabel: true
//            },
            grid: {
              top: 0,left: 0,
              right: 0,bottom: -25,
              containLabel: true
            },
            title:{show:false},
            xAxis: {
              show: false,//尽管显示false，但仍然占用空间containLabel为true的话[echarts bug]
              nameGap:0
            },
            yAxis: [{
              show: true,
              data: root.name,//['支付宝', '微信', '其它'],
              inverse: true,
              axisLine: {show: false},
              splitLine: {show: false},
              axisTick: {show: false },
              axisLabel: {color: this._formatterLabel}
            }, {
              show: true,inverse: true,
              data: rightYdata,//右侧Y轴值
              axisLabel: {
                textStyle: {fontSize: 12,color: this._formatterLabel},
              },
              axisLine: { show: false },
              splitLine: { show: false},
              axisTick: {show: false},
            }],
            series: [{
              name: '条',
              type: 'bar',
              yAxisIndex: 0,
              data: seriesData,//百分比
              barWidth: '40%',
              itemStyle: {
                normal: {
                  barBorderRadius: 0,
                  color: this._formatterBarColor,
                }
              },
              label: {
                normal: {show: false}
              },
            }, {
              name: '框',
              type: 'bar',
              yAxisIndex: 1,
              barGap: '-100%',
              data: [100, 100, 100],
              barWidth: '40%',
              itemStyle: {
                normal: {
                  color: 'none',
                  borderColor: '#157ADB',
                  borderWidth: 0.5,
                  //barBorderRadius: 15,
                }
              }
            }, ]
          };
          barChart.setOption(option);
          return barChart;
        },
        //格式化Y轴
        _formatterLabel: function (val, index) {
          var color = "";
          var root=this.$options.data().barChartOption;
          switch (val) {
            case '支付宝':
              color = root.textColor[0];
              break;
            case '微信':
              color = root.textColor[1];
              break;
            default:
              color = root.textColor[2];
              break;
          }
          return color;
        },
        _formatterBarColor: function (params) {
          var tmpObj={};
          var root=this.$options.data().barChartOption;
          switch (params.name) {
            case '支付宝':
              // code
              tmpObj = {
                colorStops: [{
                  offset: 0,
                  color: root.barColor[0].from // 0% 处的颜色
                }, {
                  offset: 1,
                  color: root.barColor[0].to // 100% 处的颜色
                }]
              };
              break;
            case '微信':
              // code
              tmpObj = {
                colorStops: [{
                  offset: 0,color: root.barColor[1].from // 0% 处的颜色
                }, {
                  offset: 1, color: root.barColor[1].to // 100% 处的颜色
                }]
              };
              break;
            default://其它
              tmpObj = {
                colorStops: [{
                  offset: 0, color: root.barColor[2].from // 0% 处的颜色
                }, {
                  offset: 1,color: root.barColor[2].to // 100% 处的颜色
                }]
              };
              break;
            // code
          }
          return tmpObj;
        },
        _formatterValue:function(val){
          let tmpObj=[];
          for(let i=0;i<val.length;i++){
            tmpObj.push({value:val[i].value,textStyle:{color:val[i].color}});
          }
          return tmpObj;
        },
        //格式化series值[占比]
        _seriesData:function(val){
          var  tmpData=[];
          for(let i=0;i<val.length;i++){
            var tmpv=(val[i].value/(val[0].value+val[1].value+val[2].value))*100;
            tmpData.push(Math.round(tmpv*100)/100);
          }
          return tmpData;
        }
      },
    }
</script>
<style scoped  lang="scss">
  .app-incomeBox {
    width: 100%;
  .theme-card{
    height: 100%;
  }
  .incomeBar{
    position: absolute;
    margin: 0 auto;
    top:0;
    bottom: 0;
    left:0;
    width: 100%;
    height: 100%;
  }
  /*.incomeBar>div, .incomeBar canvas{*/
    /*height: 100% !important;*/
  /*}*/
  }
</style>