index.vue

<style lang="less" scoped>
    #chartCustom{
        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="chartCustom">
    <searchComponent :search="search" />
    <div class="Content">
        <div>
            <h2>客户</h2>
            <div ref="myChart1" :style="{width: '100vw', height: '300%',display:pbcustomer.length > 0 ? 'block' : 'none'}"></div>
            <img v-if="pbcustomer.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
        </div>
        
        <div>
            <h2>销售员</h2>
            <div ref="myChart2" :style="{width: '100vw', height: '300%',display:pbsales.length > 0 ? 'block' : 'none'}"></div>
            <img v-if="pbsales.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'
import { clearTimeout, setTimeout } from 'timers';

export default {
  name: 'chartCustom',
  data () {
    return {
        pbcustomer:[],
        pbsales:[],
        search:{
            dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
            dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
        },
        iProjectId:5599,

        myChart1:null,
        myChart2:null,
    }
  },
  async mounted(){
        window.c=this

        this.createChart('myChart1')
        this.createChart('myChart2')
        window.addEventListener("resize",()=>{
            setTimeout(()=>{
                this.resize(this.myChart1)
                this.resize(this.myChart2)
            })
        });
        // this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
        // this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        // this.initChart(this.myChart1,'myChart1');
        // this.initChart(this.myChart2,'myChart2');


    this.iProjectId = this.$route.params.iProjectId;
    this.$store.dispatch('setIproject',this.iProjectId);

    await this.getPbcustomer();
    await this.getPbsales();
    
    this.global.$off('searchData');
    this.global.$on('searchData',async ()=>{
        await this.getPbcustomer();
        await this.getPbsales();
    });
    
  },
  activated(){
      setTimeout(()=>{
            this.resize(this.myChart1)
            this.resize(this.myChart2)
      })
  },
  components:{
      searchComponent,
      Confirm
  },
  
  methods:{
    createChart(name){
        var charts=this.$echarts.init(this.$refs[name])
        let time=0
        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(()=>{
                    this.$vux.confirm.show({
                        title: '提示',
                        content: '是否查看详情',
                        onConfirm : () => {
                            let data = {};
                            if(name == 'myChart1'){
                                data = Object.assign(this.pbcustomer[index],{type:'pbcustomer'})
                            }else{
                                data = Object.assign(this.pbsales[index],{type:'pbsales'});
                            }
                            this.$store.dispatch('setChartHearData',data).then(()=>{
                                this.$router.push({name:'chartCustomDetail'});
                            });
                        }
                    })
                },500);
            }
        });
        charts.getZr().on('mousemove',  (param)=> {
            clearTimeout(time);
        });
        
        charts.getZr().on('mouseup', (param)=> {
            clearTimeout(time);
        });

        this[name]=charts
    },
    resize(chart){
        var option=chart.getOption()
        if(!option)return;
        option.dataZoom[0].end=option.dataZoom[0].start+(window.innerWidth*0.9)/option.xAxis[0].data.length
        chart.setOption(option)
        chart.resize()
    },

    async getPbcustomer(){
        let result = await this.request('getPbcustomer',{
            params:this.search
        },true,{iProjectId:this.iProjectId})
        this.pbcustomer = typeof result=='object'&&result.length>0&&result.map(v=>{
            v.name=`${v.sCustomerName||''}\n${v.sCustomerNo||''}`
            return v
        })||[];
        this.setChart(this.myChart1,this.pbcustomer,'pbcustomer')
    },
    async getPbsales(){
        let result= await this.request('getPbsales',{
            params:this.search
        },true,{iProjectId:this.iProjectId})
        this.pbsales = typeof result=='object'&&result.length>0&&result.map(v=>{
            v.name=`${v.sSalesName||''}\n${v.sSalesNo||''}`
            return v
        })||[];
        this.setChart(this.myChart2,this.pbsales,'pbsales')
    },
    setChart(myChart,value,id){
        let options = {
           title:{
               subtext:"长按查看详情",
               subtextStyle:{
                   color:"red",
                   verticalAlign:"top",
               },
               padding:[0,0,0,25],
               right:6,
           },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            // toolbox: {
            //     feature: {
            //         // dataView: {show: true, readOnly: false},
            //         magicType: {show: true, type: ['line', 'bar']},
            //         restore: {show: true},
            //         // saveAsImage: {show: true}
            //     },

            // },
            grid: {
                left: '2%',   // 与容器左侧的距离
                right: '2%', // 与容器右侧的距离
                containLabel: true
            },
            // legend: {
            //     data:['金额'],
            //     x: 'left'
            // },
            xAxis: [
                {
                    type: 'category',
                    data: value.map(x => x.name) ,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval:0 
                    }
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    scale:true
                }
            ],
            series: [
                {
                    name:'金额',
                    type:'bar',
                    data: value.map(x => `${x.nAmount}`) ,
                    barMaxWidth:40,
                    label:{
                        show:true,
                        position:"top",
                        color:'#6B9BF7',
                        formatter:val=>{
                            return `${val.data}`
                        }
                    },
                    itemStyle:{
                        normal:{
                            color:id == 'pbcustomer' ? '#708bf6' : '#00B2EE'
                        }
                    }
                }
            ],
            dataZoom: [{
                type: 'inside',
                show: true, //flase直接隐藏图形
                xAxisIndex: [0],
                left: '9%', //滚动条靠左侧的百分比
                start: 0,//滚动条的起始位置
                end: (window.innerWidth*0.9)/value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
            }] 
        };
        myChart.setOption(options);
    },

    initChart(myChart,id){
        myChart.getZr().on('mousedown', (param)=> {
            this.timer = setTimeout(()=>{
                longPress(param)
            },500);
        });
        myChart.getZr().on('mousemove',  (param)=> {
            window.clearTimeout(this.timer);
        });
        
        myChart.getZr().on('mouseup', (param)=> {
            console.log(this.timer)
            window.clearTimeout(this.timer);
        });
        

        var that = this;
        function longPress(param){
            that.$vux.confirm.show({
                title: '提示',
                content: '是否查看详情',
                // 组件除show外的属性
                onCancel : () => {
                    // options.tooltip.show = true;
                    // myChart.setOption(options);
                },
                onConfirm : () => {
                    let index = param.dataIndex;
                    let data = {};
                    if(id == 'myChart1'){
                        data = Object.assign(that.pbcustomer[index],{type:'pbcustomer'})
                    }else{
                        data = Object.assign(that.pbsales[index],{type:'pbsales'});
                    }
                    that.$store.dispatch('setChartHearData',data).then(()=>{
                        that.$router.push({name:'chartCustomDetail'});
                    });
                    // options.tooltip.show = true;
                    // myChart.setOption(options);
                }
            })
        }
    }
  }
}
</script>