// pages/graph/graph.js
import * as echarts from '../../ec-canvas/echarts';
const networkUtil = require('../../../utils/network_util');
const heightWeightData = {
height: {
man: {
"3rd": [[0, 47.1], [2, 54.6], [4, 60.3], [6, 64], [9, 67.9], [12, 71.5], [15, 74.4], [18, 76.9], [21, 79.5], [24, 82.1], [30, 86.4], [36, 89.7], [42, 93.4], [48, 96.7], [54, 100], [60, 103.3]],
"10th": [[0, 48.1], [2, 55.9], [4, 61.7], [6, 65.4], [9, 69.4], [12, 73.1], [15, 76.1], [18, 78.7], [21, 81.4], [24, 84.1], [30, 88.6], [36, 91.9], [42, 95.7], [48, 99.1], [54, 102.4], [60, 105.8]],
"25th": [[0, 49.2], [2, 57.2], [4, 63], [6, 66.8], [9, 70.9], [12, 74.7], [15, 77.8], [18, 80.6], [21, 83.4], [24, 86.2], [30, 90.8], [36, 94.2], [42, 98], [48, 101.4], [54, 104.9], [60, 108.4]],
"50th": [[0, 50.4], [2, 58.7], [4, 64.6], [6, 68.4], [9, 72.6], [12, 76.5], [15, 79.8], [18, 82.7], [21, 85.6], [24, 88.5], [30, 93.3], [36, 96.8], [42, 100.6], [48, 104.1], [54, 107.7], [60, 111.3]],
"75th": [[0, 51.6], [2, 60.3], [4, 66.2], [6, 70], [9, 74.4], [12, 78.4], [15, 81.8], [18, 84.8], [21, 87.9], [24, 90.9], [30, 95.9], [36, 99.4], [42, 103.2], [48, 106.9], [54, 110.5], [60, 114.2]],
"90th": [[0, 52.7], [2, 61.7], [4, 67.6], [6, 71.5], [9, 75.9], [12, 80.1], [15, 83.6], [18, 86.7], [21, 90], [24, 93.1], [30, 98.2], [36, 101.8], [42, 105.7], [48, 109.3], [54, 113.1], [60, 116.9]],
"97th": [[0, 53.8], [2, 63], [4, 69], [6, 73], [9, 77.5], [12, 81.8], [15, 85.4], [18, 88.7], [21, 92], [24, 95.3], [30, 100.5], [36, 104.1], [42, 108.1], [48, 111.8], [54, 115.7], [60, 119.6]]
},
woman: {
"3rd": [[0, 46.6], [2, 53.4], [4, 59.1], [6, 62.5], [9, 66.4], [12, 70], [15, 73.2], [18, 76], [21, 78.5], [24, 80.9], [30, 85.2], [36, 88.6], [42, 92.4], [48, 95.8], [54, 99.2], [60, 102.3]],
"10th": [[0, 47.5], [2, 54.7], [4, 60.3], [6, 63.9], [9, 67.8], [12, 71.6], [15, 74.9], [18, 77.7], [21, 80.4], [24, 82.9], [30, 87.4], [36, 90.8], [42, 94.6], [48, 98.1], [54, 101.5], [60, 104.8]],
"25th": [[0, 48.6], [2, 56], [4, 61.7], [6, 65.2], [9, 69.3], [12, 73.2], [15, 76.6], [18, 79.5], [21, 82.3], [24, 84.9], [30, 89.6], [36, 93.1], [42, 96.8], [48, 100.4], [54, 104], [60, 107.3]],
"50th": [[0, 49.7], [2, 57.4], [4, 63.1], [6, 66.8], [9, 71], [12, 75], [15, 78.5], [18, 81.5], [21, 84.4], [24, 87.2], [30, 92.1], [36, 95.6], [42, 99.4], [48, 103.1], [54, 106.7], [60, 110.2]],
"75th": [[0, 50.9], [2, 58.9], [4, 64.6], [6, 68.4], [9, 72.8], [12, 76.8], [15, 80.4], [18, 83.6], [21, 86.6], [24, 89.6], [30, 94.6], [36, 98.2], [42, 102], [48, 105.7], [54, 109.5], [60, 113.1]],
"90th": [[0, 51.9], [2, 60.2], [4, 66], [6, 69.8], [9, 74.3], [12, 78.5], [15, 82.2], [18, 85.5], [21, 88.6], [24, 91.7], [30, 97], [36, 100.5], [42, 104.4], [48, 108.2], [54, 112.1], [60, 115.7]],
"97th": [[0, 53], [2, 61.6], [4, 67.4], [6, 71.2], [9, 75.9], [12, 80.2], [15, 84], [18, 87.4], [21, 90.7], [24, 93.9], [30, 99.3], [36, 102.9], [42, 106.8], [48, 110.6], [54, 114.7], [60, 118.4]]
}
},
weight: {
man: {
"3rd": [[0, 2.62], [2, 4.53], [4, 5.99], [6, 6.8], [9, 7.56], [12, 8.16], [15, 8.68], [18, 9.19], [21, 9.71], [24, 10.22], [30, 11.11], [36, 11.94], [42, 12.73], [48, 13.52], [54, 14.37], [60, 15.26]],
"10th": [[0, 2.83], [2, 4.88], [4, 6.43], [6, 7.28], [9, 8.09], [12, 8.72], [15, 9.27], [18, 9.81], [21, 10.37], [24, 10.9], [30, 11.85], [36, 12.74], [42, 13.58], [48, 14.43], [54, 15.35], [60, 16.33]],
"25th": [[0, 3.06], [2, 5.25], [4, 6.9], [6, 7.8], [9, 8.66], [12, 9.33], [15, 9.91], [18, 10.48], [21, 11.08], [24, 11.65], [30, 12.66], [36, 13.61], [42, 14.51], [48, 15.6], [54, 16.43], [60, 17.52]],
"50th": [[0, 3.32], [2, 5.68], [4, 7.45], [6, 8.41], [9, 9.33], [12, 10.05], [15, 10.68], [18, 11.29], [21, 11.93], [24, 12.54], [30, 13.64], [36, 14.65], [42, 15.63], [48, 16.64], [54, 17.75], [60, 18.98]],
"75th": [[0, 3.59], [2, 6.15], [4, 8.04], [6, 9.07], [9, 10.06], [12, 10.83], [15, 11.51], [18, 12.16], [21, 12.86], [24, 13.51], [30, 14.7], [36, 15.8], [42, 16.86], [48, 17.98], [54, 19.22], [60, 20.61]],
"90th": [[0, 3.85], [2, 6.59], [4, 8.61], [6, 9.7], [9, 10.75], [12, 11.58], [15, 12.3], [18, 13.01], [21, 13.75], [24, 14.46], [30, 15.73], [36, 16.92], [42, 18.08], [48, 19.29], [54, 20.67], [60, 22.23]],
"97th": [[0, 4.12], [2, 7.05], [4, 9.2], [6, 10.37], [9, 11.49], [12, 12.37], [15, 13.15], [18, 13.9], [21, 14.7], [24, 15.46], [30, 16.83], [36, 18.12], [42, 19.38], [48, 20.71], [54, 22.24], [60, 24]],
}, woman: {
"3rd": [[0, 2.57], [2, 4.21], [4, 5.55], [6, 6.34], [9, 7.11], [12, 7.7], [15, 8.22], [18, 8.73], [21, 9.26], [24, 9.76], [30, 10.65], [36, 11.5], [42, 12.32], [48, 13.1], [54, 13.89], [60, 14.64]],
"10th": [[0, 2.76], [2, 4.5], [4, 5.93], [6, 6.76], [9, 7.58], [12, 8.2], [15, 8.75], [18, 9.29], [21, 9.86], [24, 10.39], [30, 11.35], [36, 12.27], [42, 13.14], [48, 13.99], [54, 14.85], [60, 15.68]],
"25th": [[0, 2.96], [2, 4.82], [4, 6.34], [6, 7.21], [9, 8.08], [12, 8.74], [15, 9.33], [18, 9.91], [21, 10.51], [24, 11.08], [30, 12.12], [36, 13.11], [42, 14.05], [48, 14.97], [54, 15.92], [60, 16.84]],
"50th": [[0, 3.21], [2, 5.21], [4, 6.83], [6, 7.77], [9, 8.69], [12, 9.4], [15, 10.02], [18, 10.65], [21, 11.3], [24, 11.92], [30, 13.05], [36, 14.13], [42, 15.16], [48, 16.17], [54, 17.22], [60, 18.26]],
"75th": [[0, 3.49], [2, 5.64], [4, 7.37], [6, 8.37], [9, 9.36], [12, 10.12], [15, 10.79], [18, 11.46], [21, 12.17], [24, 12.84], [30, 14.07], [36, 15.25], [42, 16.38], [48, 17.5], [54, 18.66], [60, 19.83]],
"90th": [[0, 3.75], [2, 6.06], [4, 7.9], [6, 8.96], [9, 10.01], [12, 10.82], [15, 11.53], [18, 12.25], [21, 13.01], [24, 13.74], [30, 15.08], [36, 16.36], [42, 17.59], [48, 18.81], [54, 20.1], [60, 21.67]],
"97th": [[0, 4.04], [2, 6.51], [4, 8.47], [6, 9.59], [9, 10.71], [12, 11.57], [15, 12.33], [18, 13.11], [21, 13.93], [24, 14.71], [30, 16.16], [36, 17.55], [42, 18.89], [48, 20.24], [54, 21.67], [60, 23.14]],
}
},
BMI: {
man: {
"-3SD": [[0, 10.2], [2, 12.5], [4, 13.4], [6, 13.6], [9, 13.6], [12, 13.4], [15, 13.1], [18, 12.9], [21, 12.8], [24, 12.9], [30, 12.6], [36, 12.4]],
"-2SD": [[0, 11.1], [2, 13.7], [4, 14.5], [6, 14.7], [9, 14.7], [12, 14.4], [15, 14.1], [18, 13.9], [21, 13.7], [24, 13.8], [30, 13.6], [36, 13.4]],
"-1SD": [[0, 12.2], [2, 15], [4, 15.8], [6, 16], [9, 15.8], [12, 15.5], [15, 15.2], [18, 14.9], [21, 14.7], [24, 14.8], [30, 14.6], [36, 14.4]],
"0SD": [[0, 13.4], [2, 16.3], [4, 17.2], [6, 17.3], [9, 17.2], [12, 16.8], [15, 16.4], [18, 16.1], [21, 15.9], [24, 16], [30, 15.8], [36, 15.6]],
"+1SD": [[0, 14.8], [2, 17.8], [4, 18.7], [6, 18.8], [9, 18.6], [12, 18.2], [15, 17.8], [18, 17.5], [21, 17.2], [24, 17.3], [30, 17.1], [36, 16.9]],
"+2SD": [[0, 16.3], [2, 19.4], [4, 20.3], [6, 20.5], [9, 20.3], [12, 19.8], [15, 19.4], [18, 19], [21, 18.7], [24, 18.9], [30, 18.6], [36, 18.4]],
"+3SD": [[0, 18.1], [2, 21.1], [4, 22.1], [6, 22.3], [9, 22.1], [12, 21.6], [15, 21.2], [18, 20.8], [21, 20.5], [24, 20.6], [30, 20.2], [36, 20]]
}, woman: {
"-3SD": [[0, 10.1], [2, 11.8], [4, 12.7], [6, 13], [9, 12.9], [12, 12.7], [15, 12.5], [18, 12.3], [21, 12.2], [24, 12.4], [30, 12.3], [36, 12.1]],
"-2SD": [[0, 11.1], [2, 13], [4, 13.9], [6, 14.1], [9, 14.1], [12, 13.8], [15, 13.5], [18, 13.3], [21, 13.2], [24, 13.3], [30, 13.2], [36, 13.1]],
"-1SD": [[0, 12.2], [2, 14.3], [4, 15.2], [6, 15.5], [9, 15.3], [12, 15], [15, 14.7], [18, 14.4], [21, 14.3], [24, 14.4], [30, 14.3], [36, 14.2]],
"0SD": [[0, 13.3], [2, 15.8], [4, 16.7], [6, 16.9], [9, 16.7], [12, 16.4], [15, 16], [18, 15.7], [21, 15.5], [24, 15.7], [30, 15.5], [36, 15.4]],
"+1SD": [[0, 14.6], [2, 17.3], [4, 18.3], [6, 18.5], [9, 18.3], [12, 17.9], [15, 17.5], [18, 17.2], [21, 17], [24, 17.1], [30, 16.9], [36, 16.8]],
"+2SD": [[0, 16.1], [2, 19], [4, 20], [6, 20.3], [9, 20.1], [12, 19.6], [15, 19.2], [18, 18.2], [21, 18.6], [24, 18.7], [30, 18.5], [36, 18.4]],
"+3SD": [[0, 17.7], [2, 20.7], [4, 22], [6, 22.3], [9, 22.1], [12, 21.6], [15, 21.1], [18, 20.8], [21, 20.5], [24, 20.6], [30, 20.4], [36, 20.3]]
}
}
};
let chart;
const option = {};
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
chart.setOption(option);
return chart;
}
function findHeightWeightPoint(xData, yData) {
const pointData = [];
for (var i = 0; i < xData.length; i++) {
if (yData[i]) {
pointData.push([xData[i], yData[i]]);
}
}
return pointData;
}
function findHeightWeightData(sex, type) {
let data = {};
switch (sex) {
case 0:
data = type === "height" ? heightWeightData.height.woman : type === "weight" ? heightWeightData.weight.woman : heightWeightData.BMI.woman;
break;
case 1:
data = type === "height" ? heightWeightData.height.man : type === "weight" ? heightWeightData.weight.man : heightWeightData.BMI.man;
break;
default:
data = type === "height" ? heightWeightData.height.man : type === "weight" ? heightWeightData.weight.man : heightWeightData.BMI.man;
}
return data;
}
function drawPrintChart(data) {
const childrenReportOptions = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
var innerHtml = "";
if (params && params.length > 0) {
innerHtml += params[0].axisValue + '月\n';
params.forEach(item => {
innerHtml += item.marker + item.seriesName + ":" + item.data[1] + '\n';
})
}
return innerHtml;
}
},
// legend: {
// left: 'center',
// itemWidth: 20,
// itemHeight: 2,
// data: [
// { name: '身长', icon: 'image://https://dev-talk-api.healthbaby.com.cn/art/showPic/1640243295595.png' },
// { name: '体重', icon: 'image://https://dev-talk-api.healthbaby.com.cn/art/showPic/1640243439900.png'}
// ]
// },
grid: {
left: '5%',
right: '5%',
bottom: '4%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: false,
name: "检查时间(月)",
nameLocation: 'middle',
min: 0,
max: 36,
interval: 4,
nameGap: 20,
axisLine: {
lineStyle: {
color: '#979797',
width: 1
}
}
},
yAxis: [{
name: "身长 (CM)",
min: 20,
max: 110,
interval: 3,
nameLocation: 'center',
nameGap: 30,
axisLine: {
lineStyle: {
color: '#979797',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#979797',
width: 1
}
},
type: 'value'
}, {
name: "体重(kg)",
nameLocation: 'center',
nameGap: 30,
min: 0,
max: 30,
interval: 3,
axisLine: {
lineStyle: {
color: '#979797',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#979797',
width: 1
}
},
type: 'value'
}],
series: [
{
name: '身长',
type: 'line',
yAxisIndex: 0,
smooth: true,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
type: 'solid',
color: '#000',
width: 1
}
},
data: findHeightWeightPoint(data.heightTitles, data.heightValues)
},
{
name: '身长3rd',
type: 'line',
yAxisIndex: 0,
smooth: true,
symbolSize: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#C30F20'
}
},
data: findHeightWeightData(data.sex, "height")["3rd"]
},
{
name: '身长10th',
type: 'line',
smooth: true,
yAxisIndex: 0,
symbolSize: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#C31371'
}
},
data: findHeightWeightData(data.sex, "height")["10th"]
},
{
name: '身长25th',
type: 'line',
smooth: true,
yAxisIndex: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#C3AE1E'
}
},
symbolSize: 0,
data: findHeightWeightData(data.sex, "height")["25th"]
},
{
name: '身长50th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#39C30F'
}
},
data: findHeightWeightData(data.sex, "height")["50th"]
},
{
name: '身长75th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#C3AE1E'
}
},
data: findHeightWeightData(data.sex, "height")["75th"]
},
{
name: '身长90th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#C31371'
}
},
data: findHeightWeightData(data.sex, "height")["90th"]
},
{
name: '身长97th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
type: 'dashed',
color: '#C30F20'
}
},
data: findHeightWeightData(data.sex, "height")["97th"]
},
{
name: '体重',
yAxisIndex: 1,
type: 'line',
itemStyle: {
width: 0.6,
color: '#000'
},
lineStyle: {
width: 1,
color: '#000',
normal: {
type: 'solid',
color: '#000',
opacity: 0.5
}
},
data: findHeightWeightPoint(data.weightTitles, data.weightValues)
},
{
name: '体重3rd',
type: 'line',
yAxisIndex: 1,
smooth: true,
symbolSize: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#C30F20',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["3rd"]
},
{
name: '体重10th',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbolSize: 0,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#C31371',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["10th"]
},
{
name: '体重25th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 1,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#C3AE1E',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["25th"]
},
{
name: '体重50th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 1,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#39C30F',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["50th"]
},
{
name: '体重75th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 1,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#C3AE1E',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["75th"]
},
{
name: '体重90th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 1,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#C31371',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["90th"]
},
{
name: '体重97th',
type: 'line',
smooth: true,
symbolSize: 0,
yAxisIndex: 1,
itemStyle: {
color: '#000'
},
lineStyle: {
normal: {
width: 1,
color: '#C30F20',
type: 'solid'
}
},
data: findHeightWeightData(data.sex, "weight")["97th"]
}
]
};
return childrenReportOptions;
}
Page({
data: {
id: "",
hospitalId: "",
ec: {
onInit: initChart
},
tableList: []
},
onLoad: function (options) {
if (options.id) {
this.setData({
id: options.id
})
}
let that = this;
setTimeout(function () {
that.getEcharts()
}, 1000)
},
onShow: function () {
},
getEcharts: function () {
let that = this
networkUtil._get('/baby/queryBabyCurve/'+this.data.id, {},function (res) {
const data = res.data.data
that.setData({
tableList: data.tables
})
const option = drawPrintChart(data);
chart.setOption(option);
})
},
showImage(e) {
let imgUrl = e.currentTarget.dataset.src;
// wx.previewImage({
// urls: [imgUrl], //需要预览的图片http链接列表，注意是数组
// current: '', // 当前显示图片的http链接，默认是第一个
// success: function (res) { },
// fail: function (res) { },
// complete: function (res) { },
// })
}
})