You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
102 lines
2.6 KiB
// xtends//statics/index/index.js
|
|
import Scene from '../../../pages/index/scene'
|
|
import uCharts from '../../libs/u-charts';
|
|
const math = require('../../../utils/math')
|
|
const app = getApp()
|
|
|
|
var that;
|
|
var canvaColumn = null;
|
|
var windowWidth = 0;
|
|
|
|
Scene({
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
cWidth: '',
|
|
cHeight: '',
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad: function (options) {
|
|
that = this
|
|
windowWidth = wx.getSystemInfoSync().windowWidth
|
|
this.data.cWidth = windowWidth - this.rpx2px(100)
|
|
// math.divide
|
|
this.data.cHeight = this.rpx2px(400)
|
|
this.getServerData()
|
|
},
|
|
rpx2px: function(rpx) {
|
|
return rpx / 750 * windowWidth;
|
|
},
|
|
getServerData: function() {
|
|
wx.request({
|
|
url: 'https://www.ucharts.cn/data.json',
|
|
success: function (res) {
|
|
let Column = { categories: [], series: [] };
|
|
Column.categories = res.data.data.Pie.categories;
|
|
Column.series = res.data.data.Pie.series;
|
|
// 自定义标签颜色和字体大小
|
|
// Column.series[1].textColor = 'red';
|
|
// Column.series[1].textSize = 18;
|
|
that.showColumn("canvasColumn", Column);
|
|
},
|
|
fail: () => {
|
|
console.log("请点击右上角【详情】，启用不校验合法域名");
|
|
},
|
|
})
|
|
},
|
|
showColumn(canvasId, chartData) {
|
|
let ctx = wx.createCanvasContext(canvasId, this);
|
|
canvaColumn = new uCharts({
|
|
type: 'ring',
|
|
context: ctx,
|
|
// fontSize: 11,
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
// animation: true,
|
|
// categories: chartData.categories,
|
|
series: chartData.series,
|
|
color: [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
|
|
dataLabel: true,
|
|
width: that.data.cWidth,
|
|
height: that.data.cHeight,
|
|
legend: {
|
|
show: true,
|
|
position: "right",
|
|
float: "center",
|
|
padding: 5,
|
|
margin: 5,
|
|
fontSize: 13,
|
|
fontColor: "#666666",
|
|
lineHeight: 25,
|
|
hiddenColor: "#CECECE",
|
|
itemGap: 10
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 30,
|
|
centerColor: "#FFFFFF",
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
customRadius: 0,
|
|
labelWidth: 15,
|
|
border: true,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF",
|
|
linearType: "none"
|
|
}
|
|
}
|
|
});
|
|
},
|
|
touchColumn(e) {
|
|
canvaColumn.showToolTip(e, {
|
|
formatter: function (item) {
|
|
console.log(item)
|
|
return item.name + ':' + item.data
|
|
}
|
|
})
|
|
}
|
|
})
|