index.vue

<style lang="less" scoped>
    #chartIncome{
        font-size:12px;
        height:100%;
        display: flex;
        flex-direction: column;
        .Content{
            height:100%;
            // height:1px;
            // flex-grow: 1;
            // overflow: auto;
            // -webkit-overflow-scrolling: touch;
        }
        h2{
            text-align: center;
        }
        .center{
            text-align: center;
        }
        /deep/ .weui-cells{
            margin-top:0;
        }
        /deep/ .vux-datetime{
            div>p{
                margin-bottom: 0;
            }
        }
        /deep/ .weui-cell_access{
            padding-right: 10px;
        }
        /deep/ .weui-cell_access .weui-cell__ft:after{
            height: 10px;
            width: 10px;
            margin-top: -4px;
            right: 0;
        }
        /deep/ .weui-dialog{
            max-width:60px;
        }
        img{
            width:100%;
        }
    }
</style>

<template>
  <div id="chartIncome">
    <searchComponent :search="search" />
    <div class="Content">
        <div>
            <h2 style="margin-top:0.2rem;">应收-应付</h2>
            <div id="myChart1" :style="{width: '100vw', height: '300%',display:payable.length > 0 ? 'block' : 'none'}"></div>
            <img v-if="payable.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
        </div>
        <div>
            <h2>实收-实付</h2>
            <div id="myChart2" :style="{width: '100vw', height: '300%',display:receivepay.length > 0 ? 'block' : 'none'}"></div>
            <img v-if="receivepay.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
        </div>
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import { Confirm } from 'vux'

export default {
  name: 'chartIncome',
  data () {
    return {
        payable:[],
        receivepay:[],
        search:{
            dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
            dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
        },
        iProjectId:5599,
        toUrl:{
            "myChart20":"/shopVersion/pages/form/revenue",
            "myChart21":"/shopVersion/pages/form/expenditure",
            "myChart10":"/shopVersion/pages/form/receipts",
            "myChart11":"/shopVersion/pages/form/payment",
        },
        myChart1:null,
        myChart2:null,
    }
  },
  activated(){
        setTimeout(()=>{
            this.myChart1.resize()
            this.myChart2.resize()
        })
  },
  async mounted(){
    this.createChart('myChart1')
    this.createChart('myChart2')
    window.addEventListener('resize',()=>{
        setTimeout(()=>{
            this.myChart1.resize()
            this.myChart2.resize()
        })
    })

    this.iProjectId = this.$route.params.iProjectId;
    this.$store.dispatch('setIproject',this.iProjectId);
    
    await this.getPayable();
    await this.getReceivepay();
    
    this.global.$off('searchData');
    this.global.$on('searchData',async ()=>{
        await this.getPayable();
        await this.getReceivepay();
    });

  },
  components:{
      searchComponent,
      Confirm
  },
  
  methods:{
      createChart(name){
            let time=null
            // 基于准备好的dom，初始化echarts实例
            var charts=this.$echarts.init(document.getElementById(name))
            charts.getZr().on('mousedown',param=>{
                const pointInPixel = [param.offsetX, param.offsetY]
                if(charts.containPixel('grid',pointInPixel)){
                    let index=charts.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
                    time=setTimeout(()=>{
                        console.log(index)
                        if(index == 2) return;
                        var options=charts.getOption()
                        options.tooltip[0].show=false
                        charts.setOption(options)
                        this.$vux.confirm.show({
                            title:"提示",
                            content:"是否查看详情",
                            onConfirm:()=>{
                                console.log(name + index)
                                wx.miniProgram.navigateTo({
                                    url:this.toUrl[name+index]
                                })
                                options.tooltip[0].show=true
                                charts.setOption(options)
                            },
                            onCancel(){
                                options.tooltip[0].show=true
                                charts.setOption(options)
                            }
                        })
                    },500)
                }
            })
            
            charts.getZr().on('mousemove',()=>{
                clearTimeout(time)
            })
            charts.getZr().on('mouseup',()=>{
                clearTimeout(time)
            })
            this[name]=charts
      },
    async getPayable(){
        let result = await this.request('getPayable',{
            params:this.search
        },true,{iProjectId:this.iProjectId})
        this.payable = result;
        this.drawLine1('myChart1');
    },
    async getReceivepay(){
        let result= await this.request('getReceivepay',{
            params:this.search
        },true,{iProjectId:this.iProjectId})
        this.receivepay = result;
        this.drawLine2('myChart2');
    },
    drawLine1(id){
        // 绘制图表
        this.setChart(this.myChart1,'myChart1')
    },
    drawLine2(id){
        // 绘制图表
        this.setChart(this.myChart2,'myChart2')
    },
    setChart(myChart,id){
        let seriesData = [];
        let xAxisData = [];
        let data = id == 'myChart1' ? this.payable[0] : this.receivepay[0];
        let fieldNames = ['nSumReceive','nSumPay','nAmountYE']
        for(let x of fieldNames){
            let fieldName;
            if(x == 'nSumPay'){
                fieldName = id == 'myChart1' ? '应付' : '实付';
            }else if(x == 'nSumReceive'){
                fieldName = id == 'myChart1' ? '应收' : '实收';
            }else if(x == 'nAmountYE'){
                fieldName = '差价'
            }
            xAxisData.push(fieldName);

            if(data[x] > 0){
                seriesData.push(data[x]||0)
            }else{
                seriesData.push(data[x]||0)
            }
        }
       let options = {
           tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:seriesData
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type : 'category',
                axisTick : {show: false},
                data : xAxisData
            },
            yAxis: {
                type : 'value',
                position: 'top',
                splitLine: {lineStyle:{type:'dashed'}},
            },
            series : [
                {
                    name:'',
                    type:'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: false,
                            formatter: '{b}'
                        }
                    },
                    barMaxWidth:40,
                    data:seriesData,
                    itemStyle:{
                        normal:{
                            color:id == 'myChart1' ? '#708bf6' : '#00B2EE'
                        }
                    }
                }
            ]
       }
        myChart.setOption(options);
    }
  }
}
</script>