微信小程序精品插件：饼状图，K线图
本帖最后由 cyk 于 2017-1-11 18:09 编辑很多人一直在找的K线图:lol
代码实例：
//引入painter工厂
var painterFactoryFile = require("painter/painterFactory.js");
var painterFactory = painterFactoryFile.painterFactory;
/**
* @author Merlin
* @date 2016-11-10
* @description 图表库
*/
var chartUtil = {
createObj : function(){
var obj = {};
//需要渲染图表的 canvas ID
var _canvas_id = null;
//参数配置
var _options = null;
//setter and getter
obj.setCanvasId = function(canvas_id){
_canvas_id = canvas_id;
}
obj.getCanvasId = function(){
return _canvas_id;
}
obj.setOptions = function(options){
_options = options;
}
obj.getOptions = function(){
return _options;
}
/**
* 初始化
*/
obj.init = function(canvas_id, options){
obj.setCanvasId(canvas_id);
obj.setOptions(options);
}
obj.hello = function(){
console.log("hello world");
};
obj.draw = function(){
var testPainterObj = painterFactory.createObj(_canvas_id, _options);
testPainterObj.draw();
};
return obj;
}
};
module.exports.chartUtil = chartUtil;
//引入其他文件
var chartTypeFile = require("chartType.js");
var chartType = chartTypeFile.chartType;
module.exports.chartType = chartType;
var chartColorFile = require("chartColor.js");
var chartColor = chartColorFile.chartColor;
module.exports.chartColor = chartColor;
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
//引入文件
var chartUtilFile = require("../../utils/wxChart/chartUtil.js");
//实例化
var chartUtilObj = chartUtilFile.chartUtil.createObj();
//配置参数
var canvas_id = "first_canvas";
var xaxis = [
{
xdata : ["07:00", "11:00", "15:00", "20:00", "00:00", "04:00"]
}
];
var ydata = ;
for (var i = 1; i < 200; i++) {
ydata.push(Math.round((Math.random() - 0.5)*10 + ydata));
}
var yaxis = [
{
ydata : ydata
}
];
var options = {
"page_obj" : this,
"chart_type" : chartUtilFile.chartType.brokenLine,
"xaxis" : xaxis,
"yaxis" : yaxis,
"line_color" : chartUtilFile.chartColor.red,
"text" : "此处放标题！",
"unit" : "（元/10克）",
"font_size": 10
};
//初始化
chartUtilObj.init(canvas_id, options);
//开始画图
chartUtilObj.draw();
},
data: {
imgUrls: [
'http://cdn.qilin99.cn/ctrade_cms/img/default_1479207074514',
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 1000
}
})
**** Hidden Message *****
正需要谢谢大佬 正需要谢谢大佬 我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊
页:
[1]