注意此处的 `.container`，新建小程序项目后，其中 `app.wxss` 中默认自动生成的此 class 与本 demo 中的可能不一致，导致图表不能正常显示，只显示空白。
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var chart = null;
var chart1 = null;
var chart2 = null
function initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
return chart;
}
function initChart1(canvas, width, height, dpr) {
chart1 = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart1);
return chart1;
}
function initChart2(canvas, width, height, dpr) {
chart2 = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart2);
return chart2;
}
Page({
/**
* 页面的初始数据
*/
data: {
motto: '',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
id: '',
xid: '',
chaxun: '',
ec: {
onInit: initChart
},
ec1: {
onInit: initChart1
},
ec2: {
onInit: initChart2
},
jilu: [],
jilu1: [],
jilu2: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.setData({
id: options.id,
xid: options.xid
})
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
console.log(that.data.id);
this.getdata();
that.getLastDay();
that.getLastDay1();
that.getLastDay2();
},
//获取七天的日期
getLastDay() {
var that = this;
wx.request({
url: 'https://****************/Show.ashx',
method: 'post',
data: {
types: "jilu",
id: that.data.id,
xid: that.data.xid,
openId: wx.getStorageSync('openId'),
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
that.setData({
jilu: res.data,
});
var option = {
title: {
left: 'center'
},
color: [ "#f00","#ffb400", "#4f931c", "#0085cd"],
legend: {
data: [ '宝宝','3rd', '50th', '97th'],
top: 20,
left: 'center',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['出生', '2月', '4月', '6月', '9月', '12月', '15月', '18月', '21月', '2岁', '2.5岁', '3岁', '3.5岁', '4岁', '4.5岁', '5岁', '5.5岁', '6岁', '6.5岁', '7岁', '7.5岁', '8岁', '8.5岁', '9岁', '9.9岁', '10岁', '10.5岁', '11岁', '11.5岁', '12岁', '12.5岁', '13岁', '13.5岁', '14岁', '14.5岁', '15岁', '15.5岁', '16岁', '16.5岁', '17岁', '18岁'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: that.data.jilu
};
setTimeout(() => {
chart.clear()
chart.setOption(option);
}, 1500)
},
fail: function (e) {
wx.showToast({
title: '网络异常！',
duration: 2000
});
},
complete: function () {
}
});
},
//获取七天的日期
getLastDay1() {
var that = this;
wx.request({
url: 'https://****************/Show.ashx',
method: 'post',
data: {
types: "jilu1",
id: that.data.id,
xid: that.data.xid,
openId: wx.getStorageSync('openId'),
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data)
that.setData({
jilu1: res.data,
});
var option1 = {
title: {
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
grid: {
left: 10,
right: 10,
bottom: 10,
top: 20,
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
data: ['平均身高', '当前身高'],
color: ['#37a2da', '#f000'],
axisLine: {
lineStyle: {
color: '#f000'
}
},
axisLabel: {
color: '#666'
}
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}],
series: [{
type: 'bar',
barMaxWidth: 30, //最大宽度
label: {
normal: {
show: true,
position: 'inside'
}
},
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function (params) {
var colorList = [
'#2ed0dd', '#f9b231'
];
return colorList[params.dataIndex]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: that.data.jilu1,
}]
// series: that.data.jilu1
};
setTimeout(() => {
chart1.clear()
chart1.setOption(option1);
}, 1500)
},
fail: function (e) {
wx.showToast({
title: '网络异常！',
duration: 2000
});
},
complete: function () {
}
});
},
//获取七天的日期
getLastDay2() {
var that = this;
wx.request({
url: 'https://****************/Show.ashx',
method: 'post',
data: {
types: "jilu2",
id: that.data.id,
xid: that.data.xid,
openId: wx.getStorageSync('openId'),
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data)
that.setData({
jilu2: res.data,
});
var option2 = {
title: {
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
grid: {
left: 10,
right: 10,
bottom: 10,
top: 20,
containLabel: true
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
data: ['预测身高', '期望身高', '遗传身高'],
axisLine: {
lineStyle: {
color: '#f000'
}
},
axisLabel: {
color: '#666'
}
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}],
series: [{
type: 'bar',
barMaxWidth: 30, //最大宽度
label: {
normal: {
show: true,
position: 'inside'
}
},
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function (params) {
var colorList = [
'#ff5a46', '#58df9d', '#40a4fc'
];
return colorList[params.dataIndex]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: that.data.jilu2,
}]
// series: that.data.jilu2
};
setTimeout(() => {
chart2.clear()
chart2.setOption(option2);
}, 1500)
},
fail: function (e) {
wx.showToast({
title: '网络异常！',
duration: 2000
});
},
complete: function () {
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})