<style lang="less" scoped>
#statistics{
background:#f2f2f2;
height:100%;
display: flex;
flex-direction: column;
.Content{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
}
.Content>.double{
display:flex;
>.card{
flex-grow:1;
width:50%;
}
}
.card{
border-radius: 6px;
background:#fff;
box-shadow: 1px 1px 10px -1px #888;
overflow: hidden;
margin:6px;
position:relative;
.imgBC{
position:absolute;
top:32px;
}
img{
max-height: 80%;
left: 50%;
transform: translate(-50%,0);
}
>.head{
background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
padding:5px 0;
color:#fff;
text-align: center;
}
>.foot{
display:flex;
font-size:10px;
>div{
flex-grow:1;
width:50%;
margin:4px 0;
text-align: center;
>p{
margin:2px 0;
&:last-child{
color:#009BDE;
}
}
}
}
}
}
</style>
<template>
<div id="statistics">
<searchComponent :search='search' />
<div class="Content">
<div class='double'>
<div class="card">
<div class="head">月总订单金额同比率</div>
<div ref='chart1' style="width:100%;height:150px;"/>
</div>
<div class="card">
<div class="head">月总订单金额环比率</div>
<div ref='chart2' style="width:100%;height:150px;"/>
</div>
</div>
<div class="card">
<div class="head">销售排行</div>
<div ref='chart3' :style="{width:'100%',height:'180px',opacity:chartData.set3.length>0?'1':'0'}" />
<img v-if="chartData.set3.length==0" src="@/assets/noData.jpg" class="imgBC" />
<div class="foot">
<div style="border-right:1px solid #009BDE;">
<p>销售笔数</p>
<p >{{chartData.set4.iSellCount}}</p>
</div>
<div>
<p>销售额</p>
<p>￥{{chartData.set4.nSellAmount}}万</p>
</div>
</div>
</div>
<div class="card">
<div class="head">产品颜色销售排行</div>
<div ref='chart5' :style="{width:'100%',height:'230px',opacity:chartData.set5.length>0?'1':'0'}" />
<img v-if="chartData.set5.length==0" src="@/assets/noData.jpg" class="imgBC" />
</div>
<div class="card">
<div class="head">产品销售排行</div>
<div ref='chart6' :style="{width:'100%',height:'230px',opacity:chartData.set6.length>0?'1':'0'}" />
<img v-if="chartData.set6.length==0" src="@/assets/noData.jpg" class="imgBC" />
</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';
import { toUnicode } from 'punycode';
import echarts from 'echarts';
export default {
name:"statistics",
components:{searchComponent},
data(){
return{
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
},
iProjectId:5599,
chartData:{
set3:[],
set4:{
iSellCount:0,
nSellAmount:0,
},
set5:[],
set6:[],
},
chart1:null,
chart2:null,
chart3:null,
chart5:null,
chart6:null,
}
},
created(){
window.s=this
},
activated(){
setTimeout(()=>{
this.chart1.resize()
this.chart2.resize()
this.resize(this.chart3,1.15)
this.resize(this.chart5,1.35)
this.resize(this.chart6,1.35)
})
},
mounted(){
window.h=this
this.createChart('chart1')
this.createChart('chart2')
this.createChart('chart3')
this.createChart('chart5','set5',true)
this.createChart('chart6','set6',true)
window.addEventListener('resize',()=>{
setTimeout(()=>{
this.chart1.resize()
this.chart2.resize()
this.resize(this.chart3,1.15)
this.resize(this.chart5,1.35)
this.resize(this.chart6,1.35)
})
})
this.iProjectId= this.$route.params.iProjectId;
this.$store.dispatch('setIproject',this.iProjectId);
this.searchData();
this.global.$off('searchData');
this.global.$on('searchData',()=>{
this.searchData()
})
},
methods:{
createChart(name,kield,isLinstener){
var myChart=this.$echarts.init(this.$refs[name])
if(isLinstener){
let time=0
myChart.getZr().on('mousedown',param=>{
const pointInPixel = [param.offsetX, param.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
let index = myChart.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
time=setTimeout(()=>{
var data=this.chartData[kield]
var options=myChart.getOption()
options.tooltip[0].show=false
myChart.setOption(options)
this.$vux.confirm.show({
title:"提示",
content:"是否查看详情",
onConfirm:()=>{
this.$store.dispatch('setChartHearData',data[index]).then(()=>{
this.$router.push({name:"chartMmcolorsaleDetail"});
})
options.tooltip[0].show=true
myChart.setOption(options)
},
onCancel(){
options.tooltip[0].show=true
myChart.setOption(options)
}
})
},500)
}
})
myChart.getZr().on('mousemove',()=>{
clearTimeout(time)
})
myChart.getZr().on('mouseup',()=>{
clearTimeout(time)
})
};
this[name]=myChart
},
resize(chart,rate){
var options=chart.getOption()
if(!options)return;
options.dataZoom[0].end=options.dataZoom[0].start+(window.innerWidth*rate)/options.xAxis[0].data.length
chart.setOption(options)
chart.resize()
},
async searchData(){//搜索数据
await this.chart1Data()
await this.chart2Data()
this.showValue()
},
async chart1Data(){
var value =await this.request('sellinfo',{
params:{
dStartDate:this.search.dBeginDate,
dEndDate:this.search.dEndDate
}
},true,{iProjectId:this.iProjectId})
Object.assign(this.chartData,{
nOrderSameRatio:Math.round((value.set1&&value.set1[0]&&value.set1[0].nOrderSameRatio||0)*100)/100,
nOrderRingRatio:Math.round((value.set2&&value.set2[0]&&value.set2[0].nOrderRingRatio||0)*100)/100,
set4:{
iSellCount:value.set4&&value.set4[0]&&value.set4[0].iSellCount||0,
nSellAmount:Math.round((value.set4&&value.set4[0]&&value.set4[0].nSellAmount||0)/100)/100
}
})
console.log()
this.chartData.set3=typeof value.set3=='object'&&value.set3.length>0&&value.set3.map(v=>{
v.value=Math.round(v.nAmount/100)/100
return v
})||[]
},
async chart2Data(){
var value=await this.request('getMmcolorsaletop',{
params:this.search
},true,{iProjectId:this.iProjectId})
this.chartData.set5=typeof value=='object'&&value.length>0&&value||[]
this.chartData.set5.forEach(v=>v.type='mmcolorsaletop')
var value=await this.request('getMmsaletop',{
params:this.search
},true,{iProjectId:this.iProjectId})
this.chartData.set6=typeof value=='object'&&value.length>0&&value||[]
this.chartData.set6.forEach(v=>v.type='mmsaletop')
},
showValue(){
this.drawRing({
e:this.chart1,
value:this.chartData.nOrderSameRatio
})
this.drawRing({
e:this.chart2,
value:this.chartData.nOrderRingRatio
})
this.drawLing({
e:this.chart3,
value:this.chartData.set3
})
this.drawLing2({
e:this.chart5,
value:this.chartData.set5
})
this.drawLing2({
e:this.chart6,
value:this.chartData.set6
})
},
drawRing(data){//仪表盘
data.e.setOption({
tooltip : {
show:false,
},
series: [
{
type: 'gauge',
data: [{value: data.value, name: '比例'}],
radius:"90%",
min:-100,
max:100,
title:{
fontSize:10
},
detail:{
fontSize:11,
formatter:'{value}%',
padding:[50,0,0,0],
},
axisLine:{
show:false,
lineStyle:{
color:[[0.5,'red'],[0.75,'#1CB712'],[0.90,'#156F8E'],[1,'#152989']],
width:15
}
},
splitLine:{
length:15
},
axisLabel:{
fontSize:9,
distance:1,
},
itemStyle:{
opacity:0.3,
},
}
]
})
},
drawLing(data){//折线
data.e.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#111'
}
},
formatter:val=>{
return data.value[val[0].dataIndex].nAmount
}
},
toolbox: {
feature: {
restore: {show: true},
},
},
grid: {
top:30,
height:130,
right:10,
},
xAxis: {
type:"category",
data:data.value.map(v=>v.sYearMonth),
axisPointer:{
type:"shadow"
},
axisTick:{
alignWithLabel: true
},
axisLabel: {
interval:0
},
minInterval:10,
},
yAxis: {
type: 'value',
name:"金额(万)",
offset:-10,
},
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
show: false, //flase直接隐藏图形
filterMode: 'empty',
start: 0,//滚动条的起始位置
end: (window.innerWidth*1.15)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: 10,
data: data.value.map(v=>v.value),
label:{
show:true,
formatter:val=>{
return `${val.data}万`
}
},
itemStyle:{
normal:{
color:'#708bf6'
}
}
}
]
})
},
drawLing2(data){
data.e.setOption({
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%', // 与容器右侧的距离
height:160,
containLabel: true
},
legend: {
data:['金额','数量'],
x: 'left'
},
xAxis: [{
type: 'category',
data: data.value.map(v=>`${v.sMaterialNo}\n${v.sColorNo || ''}\n${v.sUnit || ''}`),
axisPointer: {
type: 'shadow'
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
},
}],
yAxis: [
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value}'
},
scale:true,
axisLine:{
lineStyle:{
color:'#5CADFF',
}
}
},
{
type: 'value',
name: '数量',
scale:true,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name:'金额',
type:'bar',
data:data.value.map(v=>v.nAmount),
barWidth:32,
color:new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
offset: 0,
color: '#708bf6'
}, {
offset: 1,
color: '#00B2EE'
}])
},
{
name:'数量',
type:'line',
yAxisIndex: 1,
data:data.value.map(v=>v.nQty),
itemStyle:{
normal:{
color:'#708bf6'
}
}
}
],
dataZoom: [{
type: 'inside',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
start: 0,//滚动条的起始位置
end: (window.innerWidth*1.35)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
})
}
},
}
</script>