207 lines
3.9 KiB
JavaScript
207 lines
3.9 KiB
JavaScript
// pages/task/check/index/index.js
|
||
import * as echarts from '../../../../ec-canvas/echarts';
|
||
let chart = null;
|
||
const app = getApp()
|
||
|
||
/**
|
||
* 获取像素比
|
||
*/
|
||
const getPixelRatio = () => {
|
||
let pixelRatio = 0
|
||
wx.getSystemInfo({
|
||
success: function (res) {
|
||
pixelRatio = res.pixelRatio
|
||
},
|
||
fail: function () {
|
||
pixelRatio = 0
|
||
}
|
||
})
|
||
return pixelRatio
|
||
}
|
||
|
||
/**
|
||
* 设置echarts
|
||
*/
|
||
function initChart(data) {
|
||
if (chart == null) return
|
||
chart.init((canvas, width, height) => {
|
||
var dpr = getPixelRatio();
|
||
const chart = echarts.init(canvas, null, {
|
||
width: width,
|
||
height: height,
|
||
devicePixelRatio: dpr
|
||
});
|
||
canvas.setChart(chart);
|
||
|
||
const option = {
|
||
angleAxis: {
|
||
show: false,
|
||
max: (100 * 360) / 180, //-45度到225度，二者偏移值是270度除360度
|
||
type: "value",
|
||
startAngle: 180, //极坐标初始角度
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
barMaxWidth: 10, //圆环宽度
|
||
radiusAxis: {
|
||
show: false,
|
||
type: "category",
|
||
},
|
||
//圆环位置和大小
|
||
polar: {
|
||
center: ["50%", "80%"],
|
||
radius: "250%",
|
||
},
|
||
|
||
series: [{
|
||
type: "bar",
|
||
data: [{
|
||
//上层圆环，显示数据
|
||
value: 50,
|
||
itemStyle: {
|
||
color: "#0062FF",
|
||
},
|
||
}, ],
|
||
barGap: "-100%", //柱间距离,上下两层圆环重合
|
||
coordinateSystem: "polar",
|
||
roundCap: true, //顶端圆角
|
||
z: 3, //圆环层级，同zindex
|
||
},
|
||
{
|
||
//下层圆环，显示最大值
|
||
type: "bar",
|
||
data: [{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: "#EBEDF0",
|
||
borderWidth: 0,
|
||
},
|
||
}, ],
|
||
barGap: "-100%",
|
||
coordinateSystem: "polar",
|
||
roundCap: true,
|
||
z: 1,
|
||
},
|
||
//仪表盘
|
||
{
|
||
type: "gauge",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLabel: {
|
||
show: false,
|
||
},
|
||
pointer: false,
|
||
detail: {
|
||
formatter: function () {
|
||
return `{number|${50 + "%\n"}}{wcl|完成进度}`;
|
||
},
|
||
rich: {
|
||
number: {
|
||
fontSize: 18,
|
||
textAlign: "center",
|
||
color: "#202229",
|
||
fontWeight: "bolder",
|
||
},
|
||
wcl: {
|
||
fontSize: 12,
|
||
textAlign: "center",
|
||
color: "#606977",
|
||
},
|
||
},
|
||
color: "#fff",
|
||
offsetCenter: ["0", "20"],
|
||
},
|
||
title: {
|
||
show: false,
|
||
},
|
||
data: [{
|
||
value: 50,
|
||
}, ],
|
||
},
|
||
],
|
||
};
|
||
|
||
chart.clear();
|
||
chart.setOption(option);
|
||
return chart;
|
||
})
|
||
}
|
||
|
||
Page({
|
||
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
topBarH: app.globalData.CustomBar,
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady() {
|
||
chart = this.selectComponent('#d-chart')
|
||
initChart({})
|
||
this.setData(this.data)
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面隐藏
|
||
*/
|
||
onHide() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面相关事件处理函数--监听用户下拉动作
|
||
*/
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
onShareAppMessage() {
|
||
|
||
}
|
||
}) |