<style lang="less" scoped> #chartMmcolorsale{ font-size:12px; 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="chartMmcolorsale"> <searchComponent :search="search" /> <h2 >产品颜色销售排行</h2> <div id="myChart1" :style="{width: '100vw', height: '300%',display:mmcolorsaletop.length > 0 ? 'block' : 'none'}"></div> <img v-if="mmcolorsaletop.length <= 0" src="@/assets/noData.jpg" class="_img" alt=""> <h2>产品销售排行</h2> <div id="myChart2" :style="{width: '100vw', height: '300%',display:mmsaletop.length > 0 ? 'block' : 'none'}"></div> <img v-if="mmcolorsaletop.length <= 0" src="@/assets/noData.jpg" class="_img" alt=""> </div> </template> <script> import Util from '@/libs/util.js' import searchComponent from '@/components/search' import { Confirm } from 'vux' export default { name: 'chartMmcolorsale', data () { return { mmcolorsaletop:[], mmsaletop:[], search:{ dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'), dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'), }, timer:null, iProjectId:5599, i:0, myChart1:null, myChart2:null } }, async mounted(){ 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.getMmcolorsaletop(); await this.getMmsaletop(); this.global.$on('searchData',async ()=>{ await this.getMmcolorsaletop(); await this.getMmsaletop(); }); }, components:{ searchComponent, Confirm }, methods:{ async getMmcolorsaletop(){ let result = await this.request('getMmcolorsaletop',{ params:this.search },true,{iProjectId:this.iProjectId}) this.mmcolorsaletop = result; this.setChart(this.myChart1,'myChart1') }, async getMmsaletop(){ let result= await this.request('getMmsaletop',{ params:this.search },true,{iProjectId:this.iProjectId}) this.mmsaletop = result; this.setChart(this.myChart2,'myChart2') }, setChart(myChart,id){ var that = this; let options = { color:['#5cadff','#1c2438'], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#111' } } }, 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: id == 'myChart1' ? this.mmcolorsaletop.map(x => `${x.sMaterialNo}\n${x.sColorNo || ''}\n${x.sUnit || ''}`) : this.mmsaletop.map(x => `${x.sMaterialNo}\n${x.sUnit || ''}`), 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:id == 'myChart1' ? this.mmcolorsaletop.map(x => `${x.nAmount}`) : this.mmsaletop.map(x => `${x.nAmount}`), barMaxWidth:40, itemStyle:{ normal:{ color:'#000000' } } }, { name:'数量', type:'line', yAxisIndex: 1, data:'myChart1' ? this.mmcolorsaletop.map(x => `${x.nQty}`) : this.mmsaletop.map(x => `${x.nQty}`), barMaxWidth:40 } ], dataZoom: [{ type: 'inside', show: true, //flase直接隐藏图形 xAxisIndex: [0], left: '9%', //滚动条靠左侧的百分比 start: 0,//滚动条的起始位置 end: 15 //滚动条的截止位置(按比例分割你的柱状图x轴长度) }], }; myChart.setOption(options); window.addEventListener("resize",function(){ myChart.resize() if(id == 'myChart1'){ options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 20 : 10 }else{ options.dataZoom[0].end = document.documentElement.clientWidth > document.documentElement.clientHeight ? 70 : 50 } myChart.setOption(options); }); }, initChart(myChart,id){ myChart.on('mousedown', (param)=> { // this.switch = false; this.timer = setTimeout(()=>{ // this.i = 0; // options.tooltip.show = false; // myChart.setOption(options); // if(!this.switch){ longPress(param) // } },2000); }); myChart.on('mousemove', (param)=> { window.clearTimeout(this.timer); }); myChart.on('mouseup', (param)=> { 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.mmcolorsaletop[index],{type:'pbcustomer'}) }else{ data = Object.assign(that.mmsaletop[index],{type:'pbsales'}); } that.$store.dispatch('setChartHearData',data).then(()=>{ that.$router.push({name:'chartCustomDetail'}); }); // options.tooltip.show = true; // myChart.setOption(options); } }) } } } } </script>