<style lang="less" scoped> #chartCustomDetail{ font-size:12px; height:100%; h2{ text-align: center; height:40px; line-height: 40px; background: #19be6b; color:white; position: fixed; top:0; left:0; width:100%; z-index:999; } .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="chartCustomDetail" :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> </tr> </thead> <tbody> <tr v-for="(item,index) in value" :key="index"> <td>{{item.sYearMonth}}</td> <td>{{item.nAmount || 0}}</td> </tr> </tbody> </x-table> </div> <div class="noData" v-else> <img src="@/assets/noData.jpg" class="_img" alt=""> </div> <!-- <div ref='chart' :style="{width: '100vw', height: '100vh',display:value.length> 0 ? 'block' : 'none'}"></div> <img v-if="value.length<= 0" src="@/assets/noData.jpg" class="_img" alt=""> --> </div> </template> <script> import Util from '@/libs/util.js' import { mapState } from 'vuex'; import { XTable } from 'vux' export default { name: 'chartCustomDetail', data () { return { value:[], title:'' } }, async activated(){ if(this.chartHearData.type == 'pbcustomer'){ this.title = '客户'; await this.getPbcustomerDtl(); }else{ this.title = '销售员'; await this.getPbsalesDtl(); } // 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",()=>{ // this.myChart.resize() // var options=this.myChart.getOption() // options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 40 : 20 // this.myChart.setOption(options); // }); }, methods:{ async getPbcustomerDtl(){ let result = await this.request('getPbcustomerDtl',{ 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) }, async getPbsalesDtl(){ let result= await this.request('getPbsalesDtl',{ 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) }, setChart(){ let options = { color:['#5CADFF'], 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%', // 与容器右侧的距离 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 } ], series: [ { name:'金额', type:'bar', data: this.value.map(x => `${x.nAmount||0}`) , } ], dataZoom: [{ type: 'inside', show: true, //flase直接隐藏图形 xAxisIndex: [0], left: '9%', //滚动条靠左侧的百分比 start: 0,//滚动条的起始位置 end: 20 //滚动条的截止位置(按比例分割你的柱状图x轴长度) }] }; this.myChart.setOption(options); this.myChart.resize() } }, components: { XTable } } </script>