思路

• 五个tab公用一个柱状图组件
• 切换tab以及切换时间改变数据，传入子组件，子组件监听数据重新更新
• 点击柱状图显示具体数值
• 每个时间点有两个柱子（高压和低压），柱状图显示高压的最大值到最小值的范围
• 除了血压其余只有一条柱子
• 步数比较特殊，不是范围，而是一个具体的步数数值
• 根据tab设置不同的最小值
• 假如最大值==最小值，显示一个点
• 所有横坐标全部显示，不滚动

下载wx-echarts

堆叠柱状图子组件

• bar.json

{"component": true,"usingComponents": {"ec-canvas": "../../../ec-canvas/ec-canvas"}
}

• bar.wxml

<view class="w100 h100"><ec-canvas id="mychart-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

• bar.js

import * as echarts from '../../../ec-canvas/echarts';
Component({options: {addGlobalClass: true,},data: {ec: {lazyLoad: true // 懒加载},time: [],low1: [],high1: [],low2: [],high2: [],step: []},properties: {list: {type: Array,observer: function (newVal, oldVal) {if (newVal.length || oldVal.length) {console.log(newVal, oldVal, 88)let time = newVal.map(item => item.date)let low1 = newVal.map(item => item.firstLowIndicators * 1)let high1 = newVal.map(item => item.firstHighIndicators && item.firstHighIndicators == item.firstLowIndicators ? 'solo' : item.firstHighIndicators * 1 - item.firstLowIndicators * 1)// let high1 = newVal.map(item => (item.firstHighIndicators * 1 - item.firstLowIndicators * 1 == 0) ? 1 : item.firstHighIndicators * 1 - item.firstLowIndicators * 1)let low2 = newVal.map(item => item.secondLowIndicators * 1)let high2 = newVal.map(item => item.secondHighIndicators && item.secondHighIndicators == item.secondLowIndicators ? 'solo' : item.secondHighIndicators * 1 - item.secondLowIndicators * 1)// let high2 = newVal.map(item => (item.secondHighIndicators * 1 - item.secondLowIndicators * 1 == 0) ? 1 : item.secondHighIndicators * 1 - item.secondLowIndicators * 1)let step = newVal.map(item => item.firstHighIndicators)this.setData({time,low1,high1,low2,high2,step})this.initChart(); // 数据变化时重新初始化图表}}},tab: {type: Number,value: 1}},methods: {initChart() {// 绑定组件this.barComponent = this.selectComponent("#mychart-bar");// 初始化柱状图this.barComponent.init((canvas, width, height, dpr) => {// 初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 解决模糊显示问题})// 开发中根据从后端获取barData数据,动态更新图表chart.setOption(this.getOption())return chart})},getOption() {var option = {tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter: (params) => {// console.log(params)if (this.data.tab == 5) {return (params[0].axisValue +"\n" +params[0].marker +params[1].seriesName +"：" +(params[0].value || 0))} else if (this.data.tab == 1) {return (params[0].axisValue +"\n" +params[1].marker +params[0].seriesName +"：" +params[0].value +"~" +(params[0].value + ((params[1].value + '').slice(-6) == '521125' ? 0 : params[1].value)) +"\n" +params[3].marker +params[2].seriesName +"：" +params[2].value +"~" +(params[2].value * 1 + ((params[3].value + '').slice(-6) == '521125' ? 0 : params[3].value * 1)));} else {return (params[0].axisValue +"\n" +params[1].marker +params[0].seriesName +"：" +params[0].value +"~" +(params[0].value + ((params[1].value + '').slice(-6) == '521125' ? 0 : params[1].value)))}},},grid: {top: '8%',left: '5%',right: '5%',bottom: '3%',containLabel: true},// dataZoom: [{//   type: 'inside', // 内置型数据区域缩放//   show: true,//   startValue: 0,//   endValue: 5,// }],xAxis: {type: 'category',splitLine: {show: false},data: this.data.time},yAxis: {type: 'value',min: [40, 80, 50, 34, 0][this.data.tab * 1 - 1],},series: [{name: ['舒张压范围', '血氧范围', '心率范围', '体温范围', '步数'][this.data.tab * 1 - 1],type: 'bar',stack: 'Total',barWidth: 4,itemStyle: {borderColor: 'transparent',color: 'transparent'},data: this.data.tab == 5 ? 0 : this.data.low1},{name: '',type: 'bar',stack: 'Total',barWidth: 4,label: {// show: true,position: 'inside'},itemStyle: {color: '#2bdc70', // 设置整个系列柱子的颜色为蓝色barBorderRadius: 10 // 设置所有柱子的圆角半径为10px},data: this.data.tab == 5 ? this.data.step : this.data.high1.map(item => item == 'solo' ? [2.0521125, 0.3521125, 1.0521125, 0.12521125, 0][this.data.tab * 1 - 1] : item)},{name: ['舒张压范围', '血氧范围', '心率范围', '体温范围', '步数'][this.data.tab * 1 - 1],type: 'bar',stack: 'Total1',barWidth: 4,itemStyle: {borderColor: 'transparent',color: 'transparent',},data: this.data.low2},{name: '',type: 'bar',stack: 'Total1',barWidth: 4,label: {// show: true,position: 'inside'},itemStyle: {color: '#fa5151', // 设置整个系列柱子的颜色为蓝色barBorderRadius: 10 // 设置所有柱子的圆角半径为10px},data: this.data.high2.map(item => item == 'solo' ? [2.0521125, 0.3521125, 0.521125, 0.0521125, 0][this.data.tab * 1 - 1] : item)}]};return option}}
})

父组件

<view style="width: 100%; height: 260px;"><my-bar list="{{barList}}"></my-bar>
</view>"usingComponents": {"my-bar": "./components/bar/bar","solo-table": "./components/table/table"},barList: [{time: this.data.active,low1: 50,high1: 80,low2: 80,high2: 140}, {time: this.data.active,low1: 50,high1: 90,low2: 90,high2: 150}, {time: this.data.active,low1: 50,high1: 80,low2: 70,high2: 100}, {time: this.data.active,low1: 50,high1: 80,low2: 60,high2: 140}, {time: this.data.active,low1: 70,high1: 100,low2: 100,high2: 140}, ]

定制echarts.min.js

完整父组件

<view class="w100 min100"><van-sticky offset-top="{{ 0 }}"><van-tabs style="z-index: 99;" sticky animated class="gray-2 bold bg-white" active="{{ tab }}" bind:change="onChangeTab" color="#217EF7" line-width="{{20}}" line-height="{{4}}"><van-tab title="血压" name="1"></van-tab><van-tab title="血氧" name="2"></van-tab><van-tab title="心率" name="3"></van-tab><van-tab title="体温" name="4"></van-tab><van-tab title="步数" name="5"></van-tab></van-tabs></van-sticky><time bindchangeTab="onChangeTime" bindchangeDay="onChangeDay"></time><view class="flex w100 pl-30 ptb-20"><view class="bold size-32 flex-1">{{title}}统计分析</view><!-- <van-tabs animated type="card" class="gray-2 flex-1" active="{{ active }}" bind:change="onChangeTime" color="#217EF7"><van-tab title="日" name="1"></van-tab><van-tab title="周" name="2"></van-tab><van-tab title="月" name="3"></van-tab></van-tabs> --></view><view style="width: 100%; height: 250px;"><my-bar list="{{barList}}" tab="{{tab*1}}"></my-bar></view><view class="pd-30"><table1 head="{{head}}" list="{{tableList}}" tab="{{tab*1}}"></table1></view><view wx:if="{{tab==1}}"><view class="bold size-32 flex-1 plr-30 mt-30 mb-30">近30天血压趋势情况</view><view style="width: 100%; height: 320px;"><my-scatter list="{{scatterList}}"></my-scatter></view><view class="pd-30"><solo-table total="{{total}}" list="{{soloTable}}"></solo-table></view></view>
</view>

{"usingComponents": {"my-bar": "./components/bar/bar","bar1": "./components/bar1/bar","my-scatter": "./components/scatter/scatter","solo-table": "./components/solo-table/table","table1": "./components/table/table","time": "./components-time/time/time"},"navigationBarTitleText": "健康监测"
}

 Page({data: {tab: 1, // 大分类title: '血压',timeRange: 'day', //时间切换queryDate: '', //时间切换//  barbarList: [],stepList: [],scatterList: [],total: 0,soloTable: [],//  表格head: [{text: '指标',prop: 'name'},{text: '最高',prop: 'max'},{text: '最低',prop: 'min'},{text: '参考值',prop: 'range'}],tableList: []},onLoad(option) {let now = this.getNowData(new Date(), 'day')this.setData({timeRange: 'day',queryDate: now.content})this.getList()this.getList30()},getList() {let {timeRange,queryDate,tab} = this.dataconsole.log(timeRange, queryDate, 8888888888888, timeRange == 'weeks' ? queryDate.split(' 至 ').join(',') : timeRange == 'day' ? queryDate : queryDate.split(' 至 ')[0].split('-')[0] + '-' + queryDate.split(' 至 ')[0].split('-')[1])wx.http('occupant/health-records/chartList', Object.assign({dataSource: 1, //0 手动录入   1智能手表   2、健康检测userId: wx.getStorageSync('userInfo').userId,timeRange: timeRange == 'weeks' ? 'week' : timeRange,queryDate: timeRange == 'weeks' ? queryDate.split(' 至 ').join(',') : timeRange == 'day' ? queryDate : queryDate.split(' 至 ')[0].split('-')[0] + '-' + queryDate.split(' 至 ')[0].split('-')[1],firstIndicator: ['diastolic_blood_pressure', 'blood_oxygen', 'heart_rate', 'temperature', 'step_count'][tab * 1 - 1],}, tab == 1 ? {secondIndicator: ['systolic_blood_pressure'][tab * 1 - 1]} : {})).then(res => {if (res.data.table && res.data.table.length) {if (tab == 1) {res.data.table[0].name = '舒张压'res.data.table[0].range = '60-90'res.data.table[1].range = '90-140'res.data.table[1].name = '收缩压'} else if (tab == 2) {res.data.table[0].name = '血氧'res.data.table[0].range = '95-100%'} else if (tab == 3) {res.data.table[0].name = '心率'res.data.table[0].range = '60-100'} else if (tab == 4) {res.data.table[0].name = '体温'res.data.table[0].range = '35.3-37.3℃'} else if (tab == 5) {res.data.table[0].name = '步数'res.data.table[0].range = '5000-10000步'}}//  if (tab == 5) {//    this.setData({//      stepList: res.data.charts || [],//      tableList: res.data.table//    })//  } else {//  }this.setData({barList: res.data.charts || [],tableList: res.data.table})})},getList30() {wx.http('occupant/health-records/bloodPressureTrend', {dataSource: 1, //0 手动录入   1智能手表   2、健康检测userId: wx.getStorageSync('userInfo').userId,}).then(res => {this.setData({scatterList: res.data.charts,total: res.data.total,soloTable: res.data.table,})})},onChangeTab(e) {this.setData({tab: e.detail.name,title: e.detail.title})this.getList()if (this.data.tab == 1) {this.getList30()}},//  onChangeTime(e) { //    this.setData({//      timeRange: e.detail.id, //    }) //  },// 点击切换获取默认时间getNowData(date, dateType, direction) {let updateData = {};let content = "";let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate();let weeksDay = date.getDay();switch (dateType) {case 'day': {year = date.getFullYear();month = date.getMonth() + 1;day = date.getDate();content = year + "-" + month + "-" + day;break;}case 'weeks': {//获取当天在这一周是属于第几天，然后计算这一周的起始天日期和结束的日期weeksDay = date.getDay();let starDate = new Date(date.getTime());starDate.setDate(date.getDate() - weeksDay + 1);let startYear = starDate.getFullYear();let startMonth = starDate.getMonth() + 1;let startDay = starDate.getDate();let endDate = new Date(date.getTime());let endYear = endDate.getFullYear();let endMonth = endDate.getMonth() + 1;let endDay = endDate.getDate();//  let weeksDay = date.getDay(); // 获取今天是周几，注意：0代表周日，1代表周一//  // 计算本周第一天（周一）//  let startDate = new Date(date.getTime());//  if (weeksDay !== 0) { // 如果不是周日//    startDate.setDate(date.getDate() - weeksDay + 1); // 减去当前是周几再加1，得到周一//  } else {//    // 如果是周日，直接使用当前日期即可，因为已经是新的一周的开始//  }//  let startYear = startDate.getFullYear();//  let startMonth = startDate.getMonth() + 1; // 月份需要加1//  let startDay = startDate.getDate();//  // 计算本周最后一天（周日）//  let endDate = new Date(startDate.getTime());//  endDate.setDate(startDate.getDate() + 6); // 从周一基础上加6天到达周日//  let endYear = endDate.getFullYear();//  let endMonth = endDate.getMonth() + 1;//  let endDay = endDate.getDate();content = startYear + "-" + startMonth + "-" + startDay + ' 至 ' + endYear + "-" + endMonth + "-" + endDay;break;}case 'month': {let starDate = new Date(date.getTime());//计算当月的第一天日期starDate.setDate(1);let startYear = starDate.getFullYear();let startMonth = starDate.getMonth() + 1;let startDay = starDate.getDate();let endDate = new Date(date.getTime());let endYear = endDate.getFullYear();let endMonth = endDate.getMonth() + 1;let endDay = endDate.getDate();content = startYear + "-" + startMonth + "-" + startDay + ' 至 ' + endYear + "-" + endMonth + "-" + endDay;break;}}updateData.content = content;return updateData;},onChangeDay(e) {console.log(e.detail.id, 999999)this.setData({queryDate: e.detail.id.date.curDate,})if (e.detail.id.type) {this.setData({timeRange: e.detail.id.type,})}this.getList()},});