zhaobing’
1 year ago
10 changed files with 292 additions and 4 deletions
@ -0,0 +1,145 @@ |
|||||
|
// package/subSystem/dayPatrolInfo/dayPatrolInfo.js
|
||||
|
import * as echarts from '../../components/ec-canvas/echarts'; |
||||
|
|
||||
|
const setPieOptions = ((chart, data) => { |
||||
|
const option = { |
||||
|
grid: { |
||||
|
top: '0%', |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
top: 'bottom', |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['30%', '55%'], |
||||
|
// avoidLabelOverlap: false,
|
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
data: data |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
chart.setOption(option); |
||||
|
}) |
||||
|
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
needEc: { lazyLoad: true }, |
||||
|
alreadyEc: { lazyLoad: true }, |
||||
|
}, |
||||
|
|
||||
|
// 今日待检分布图表
|
||||
|
initNeedChart: function (data) { |
||||
|
this.needEcComponent.init((canvas, width, height, dpr) => { |
||||
|
const chart = echarts.init(canvas, null, { |
||||
|
width: width, |
||||
|
height: height, |
||||
|
devicePixelRatio: dpr // new
|
||||
|
}); |
||||
|
setPieOptions(chart, data) |
||||
|
return chart; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 今日已检分布图表
|
||||
|
initAlreadyChart: function (data) { |
||||
|
this.alreadyEcComponent.init((canvas, width, height, dpr) => { |
||||
|
const chart = echarts.init(canvas, null, { |
||||
|
width: width, |
||||
|
height: height, |
||||
|
devicePixelRatio: dpr // new
|
||||
|
}); |
||||
|
setPieOptions(chart, data) |
||||
|
return chart; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
wx.setNavigationBarTitle({ title: options.day }) |
||||
|
setTimeout(() => { |
||||
|
this.initNeedChart([ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 580, name: 'Email2' }, |
||||
|
{ value: 580, name: 'Email3' }, |
||||
|
]) |
||||
|
this.initAlreadyChart([ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 580, name: 'Email2' }, |
||||
|
{ value: 580, name: 'Email3' }, |
||||
|
]) |
||||
|
}, 1000) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady() { |
||||
|
this.needEcComponent = this.selectComponent('#need-chart-dom'); |
||||
|
this.alreadyEcComponent = this.selectComponent('#already-chart-dom'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage() { |
||||
|
|
||||
|
} |
||||
|
}) |
@ -0,0 +1,9 @@ |
|||||
|
{ |
||||
|
"navigationBarBackgroundColor": "#006BE3", |
||||
|
"navigationBarTextStyle": "white", |
||||
|
"navigationBarTitleText": "", |
||||
|
"enablePullDownRefresh": false, |
||||
|
"usingComponents": { |
||||
|
"ec-canvas": "../../components/ec-canvas/ec-canvas" |
||||
|
} |
||||
|
} |
@ -0,0 +1,49 @@ |
|||||
|
<!--package/subSystem/dayPatrolInfo/dayPatrolInfo.wxml--> |
||||
|
<view class="day-patrol-info"> |
||||
|
<view class="card" style="margin-bottom: 10px"> |
||||
|
<view class="card-top flex flex-between"> |
||||
|
<view class="card-left flex"> |
||||
|
<image class="card-icon" src="/images/right_icon.png" /> |
||||
|
<view class="title">今日问题分布</view> |
||||
|
</view> |
||||
|
<image src="/images/right_card_bg.png" class="card-bg" /> |
||||
|
</view> |
||||
|
<view wx:for="{{[1,2,3,4]}}" class="problem-box flex"> |
||||
|
<view class="problem-title text---">类型1:</view> |
||||
|
<progress |
||||
|
style="width: 70%;" |
||||
|
percent="{{80}}" |
||||
|
stroke-width="8" |
||||
|
show-info |
||||
|
font-size="14" |
||||
|
border-radius="4" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="card" style="margin-bottom: 10px"> |
||||
|
<view class="card-top flex flex-between"> |
||||
|
<view class="card-left flex"> |
||||
|
<image class="card-icon" src="/images/right_icon.png" /> |
||||
|
<view class="title">今日待检分布</view> |
||||
|
</view> |
||||
|
<view class="card-right">总次数:{{50}}次</view> |
||||
|
<image src="/images/right_card_bg.png" class="card-bg" /> |
||||
|
</view> |
||||
|
<view class="pie-chart-box"> |
||||
|
<ec-canvas id="need-chart-dom" canvas-id="need-chart" ec="{{ needEc }}"></ec-canvas> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="card" style="margin-bottom: 10px"> |
||||
|
<view class="card-top flex flex-between"> |
||||
|
<view class="card-left flex"> |
||||
|
<image class="card-icon" src="/images/right_icon.png" /> |
||||
|
<view class="title">今日已检分布</view> |
||||
|
</view> |
||||
|
<view class="card-right">总次数:{{50}}次</view> |
||||
|
<image src="/images/right_card_bg.png" class="card-bg" /> |
||||
|
</view> |
||||
|
<view class="pie-chart-box"> |
||||
|
<ec-canvas id="already-chart-dom" canvas-id="already-chart" ec="{{ alreadyEc }}"></ec-canvas> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
@ -0,0 +1,71 @@ |
|||||
|
.day-patrol-info { |
||||
|
height: 100%; |
||||
|
background-image: linear-gradient(179deg, #006BE3 0%, #4E87FF 16%, #4e87ff00 93%); |
||||
|
padding: 0 15px 15px; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
box-sizing: border-box; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 2px 2px 11px 0 #00000008, 0 0 4px 0 #00000012; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.card-top { |
||||
|
height: 68px; |
||||
|
background-image: linear-gradient(0deg, #F3F7FF 84%, #DBE6FF 100%); |
||||
|
border-radius: 4px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.card-bg { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 11px; |
||||
|
width: 115px; |
||||
|
height: 67px; |
||||
|
} |
||||
|
|
||||
|
.card-left { |
||||
|
margin-left: 23px; |
||||
|
font-weight: 500; |
||||
|
font-size: 16px; |
||||
|
color: #000000d9; |
||||
|
} |
||||
|
|
||||
|
.card-right { |
||||
|
margin-right: 18px; |
||||
|
color: #1684FF; |
||||
|
} |
||||
|
|
||||
|
.card-icon { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.problem-box { |
||||
|
width: 100%; |
||||
|
height: 58px; |
||||
|
padding: 18px; |
||||
|
border-top: 1px solid rgb(238, 237, 237); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.problem-title { |
||||
|
width: 30%; |
||||
|
font-size: 14px; |
||||
|
color: #383A3B; |
||||
|
} |
||||
|
|
||||
|
.t-class-label { |
||||
|
font-size: 14px; |
||||
|
color: #383A3B; |
||||
|
} |
||||
|
|
||||
|
.pie-chart-box { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 280px; |
||||
|
padding: 0 10px 10px; |
||||
|
} |
Loading…
Reference in new issue