detail.vue

<style lang="less" scoped>
    #chartMmcolorsale{
        font-size:12px;
        height:100%;
        display:flex;
        flex-direction: column;
        .Table{
            flex-grow: 1;
            height:1px;
            overflow: auto;
        }
        h2{
            text-align: center;
            height:40px;
            line-height: 40px;
            background: #19be6b;
            color:white;
            width:100%;
        }
        .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%;
        }
        .vux_table{
            margin-top:40px;
        }
        .noData{
            margin-top:120px;
        }
    }
</style>

<template>
  <div id="chartMmcolorsale"  :style="value.length <= 0 ? 'background:white;' : ''">
    <h2>{{title}}</h2>
    <!-- <div class="vux_table" v-if="value.length > 0">
        <x-table :cell-bordered="true" style="background-color:#fff;">
            <thead>
                <tr style="background-color: #F7F7F7">
                    <th>日期</th>
                    <th>金额</th>
                    <th>数量</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in value" :key="index">
                    <td>{{item.sYearMonth}}</td>
                    <td>{{item.nAmount || 0}}</td>
                    <td>{{item.nQty || 0}}</td>
                </tr>
            </tbody>
        </x-table>
    </div>
    <div class="noData" v-else>
        <img src="@/assets/noData.jpg" class="_img" alt="">
    </div> -->
     <div class="Table">
        <customerTable :columns="columns" :list="value" :tableStyle="tableStyle"></customerTable>  
    </div>

    <!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length > 0 ? 'block' : 'none'}"></div>
    <img v-if="value.lenght<= 0" src="@/assets/noData.jpg" class="_img" alt=""> -->
  </div>
</template>

<script>
import Util from '@/libs/util.js';
import { mapState } from 'vuex';
import customerTable from '@/components/Table'

export default {
    name: 'chartMmcolorsaleDetail',
    data () {
        return {
            mmcolorsaledeltop:[],
            mmsaledtltop:[],

            value:[],
            title:'',
            columns:[
                {
                    width:'40%',
                    name:'日期',
                    align:'center',
                    field:'sYearMonth'
                },
                {
                    width:'30%',
                    name:'金额',
                    align:'center',
                    field:'nAmount',
                },
                {
                    width:'30%',
                    name:'数量',
                    align:'center',
                    field:'nQty',
                }
            ],
            tableStyle:{
                theadBgColor:'rgba(223,238,253,1)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'calc(100vh)',
                tbodyTrBorderBottom:'1px solid #dbe9f8',
                width:'100%'
            },
            myChart:null
        }
    },
    components: {
        customerTable
    },
    async activated(){
        if(this.chartHearData.type == 'mmsaletop'){
            this.title = '产品销售排行';
            await this.getMmsaledtltop();
        }else{
            this.title = '产品颜色销售排行';
            await this.getMmcolorsaledtltop();
        }
        // this.setChart()
    },
    computed:{
        ...mapState({
            chartHearData:state => state.app.chartHearData,
            iProjectId:state => state.app.iProjectId
        })
    },
    mounted(){
        // this.myChart=this.$echarts.init(this.$refs.chart)
        // window.addEventListener("resize",()=>{
        //     var options=this.myChart.getOption()
        //     options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 40 : 20
        //     this.myChart.setOption(options);
        //     this.myChart.resize()
        // });
        // console.log(this.iProjectId)
    },
    methods:{
        async getMmcolorsaledtltop(){
            let result = await this.request('getMmcolorsaledtltop',{
                params:this.chartHearData
            },true,{iProjectId:this.iProjectId})
            this.value=typeof result=='object'&&result.length>0&&result||[]
            this.value = this.value.filter(x=>x.nAmount > 0 || x.nQty > 0)
        },
        async getMmsaledtltop(){
            let result= await this.request('getMmsaledtltop',{
                params:this.chartHearData
            },true,{iProjectId:this.iProjectId})
            this.value=typeof result=='object'&&result.length>0&&result||[]
            this.value = this.value.filter(x=>x.nAmount > 0 || x.nQty > 0)
        },
        setChart(){
            let options = {
                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: '3%',
                    right: '3%',
                    bottom: '10%',

                    containLabel: true
                },
                legend: {
                    data:['金额','数量'],
                    x: 'left'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.value.map(x => `${x.sYearMonth}`),
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval:0 
                        }
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额',
                        axisLabel: {
                            formatter: '¥{value}'
                        },
                        scale:true
                    },
                    {
                        type: 'value',
                        name: '数量',
                        scale:true,
                        axisLabel: {
                            formatter: '¥{value}'
                        }
                    }
                ],
                series: [
                    {
                        name:'金额',
                        type:'bar',
                        data:this.value.map(x => `${x.nAmount}`)
                    },
                    {
                        name:'数量',
                        type:'line',
                        yAxisIndex: 1,
                        data:this.value.map(x => `${x.nQty}`)
                    }
                ],
                dataZoom: [{
                    type: 'inside',
                    show: true, //flase直接隐藏图形
                    xAxisIndex: [0],
                    left: '9%', //滚动条靠左侧的百分比
                    start: 0,//滚动条的起始位置
                    end: 20 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                }] 
            };
            this.myChart.setOption(options);
            this.myChart.resize()
        }
    }
}
</script>