小程序之wxcharts（图表）

小胡同志0526

已于 2024-09-05 11:23:45 修改

阅读量4.7k

点赞数 1

分类专栏：前端日常笔记文章标签： wxChart 小程序

于 2018-02-02 13:23:56 首次发布

本文链接：https://blog.csdn.net/sinat_35656188/article/details/79237920

版权

前端日常笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

一、wxml


<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" hidden='{{canvaShow}}'></canvas>

二、js


var  wxCharts = require('../../utils/wxcharts.js');
var seriesArr = [];//数据数组
for (var i = 0; i < Datas.length; i++) {
var objs = new Object();
objs.name = Datas[i].Name;
objs.format = function (val) {
return val.toFixed(2);
}
var dataArr = [];
for (var j = 0; j < Datas[i].ObjChild.length; j++) {
dataArr.push(Datas[i].ObjChild[j].StaffScorePoint);
}
objs.data = dataArr;
seriesArr.push(objs);
}
new wxCharts({
canvasId: 'lineCanvas', // canvas-id
type: 'line', // 图表类型，可选值为pie, line, column, area, ring
categories: ['', '', '', '', ''],
series: seriesArr,
yAxis: {
format: function (val) {
return val.toFixed(2);
},
min: 0 // Y轴起始值
},
width: 300,
height: 160,
legend: true, // 是否显示图表下方各类别的标识
xAxis: {
disableGrid: true
}
});