|
|
@@ -3,62 +3,7 @@ import * as echarts from "../../../components/ec-canvas/echarts.min"
|
|
|
const Parse = getApp().Parse;
|
|
|
const company = getApp().globalData.company;
|
|
|
|
|
|
-function initChart(canvas, width, height, dpr) {
|
|
|
- const chart = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height,
|
|
|
- devicePixelRatio: dpr
|
|
|
- });
|
|
|
- canvas.setChart(chart);
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
- axisLabel: {
|
|
|
- formatter: function (value, index) {
|
|
|
- const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
|
|
|
- return index === 1 ? '今天' : value + '\n' + '\n' + dates[index];
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- max: 20000, // 设置Y轴最大值为20000
|
|
|
- axisLabel: {
|
|
|
- formatter: function (value) {
|
|
|
- if (value >= 10000) {
|
|
|
- return (value / 10000) + 'k'; // 格式化为20k
|
|
|
- }
|
|
|
- return value;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- data: [
|
|
|
- 12000,
|
|
|
- {
|
|
|
- value: 12000,
|
|
|
- itemStyle: {
|
|
|
- color: '#a90000',
|
|
|
- }
|
|
|
- },
|
|
|
- 12000,
|
|
|
- 12000,
|
|
|
- 12000,
|
|
|
- 12000,
|
|
|
- 12000
|
|
|
- ],
|
|
|
- type: 'bar',
|
|
|
- barWidth: '10',
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 15,
|
|
|
- }
|
|
|
- }],
|
|
|
- };
|
|
|
- chart.setOption(option);
|
|
|
|
|
|
- return chart;
|
|
|
-}
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
|
@@ -88,10 +33,11 @@ Page({
|
|
|
totalsportDate: 0,
|
|
|
|
|
|
ec: {
|
|
|
- onInit: initChart
|
|
|
+ onInit: null
|
|
|
},
|
|
|
resultList: [],
|
|
|
- stepsData: [],
|
|
|
+ stepsData: [], //统计图柱状
|
|
|
+ xAxis: [], //x轴
|
|
|
|
|
|
percentage: '',
|
|
|
percent: '',
|
|
|
@@ -123,9 +69,95 @@ Page({
|
|
|
await this.gettarget()
|
|
|
await this.order()
|
|
|
this.allorder()
|
|
|
- this.getweekday()
|
|
|
+ await this.getweekday()
|
|
|
+ this.echartsComponnet = this.selectComponent('#mychart')
|
|
|
+ await this.initChart()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 将 initChart 定义在 Page 上下文中
|
|
|
+ initChart() {
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.clear();
|
|
|
+ }
|
|
|
+ this.echartsComponnet.init((canvas, width, height, dpr) => {
|
|
|
+ // 初始化图表
|
|
|
+ this.chart = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ devicePixelRatio: dpr // 清晰度 使canvas的图表更加清晰
|
|
|
+ });
|
|
|
+ this.chart.setOption(this.getOption())
|
|
|
+ return this.chart;
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
+ getOption() {
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
+ axisLabel: {
|
|
|
+ formatter: (value, index) => this.formatter(value, index)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ max: 20000, // 设置Y轴最大值为20000
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (value) {
|
|
|
+ if (value >= 10000) {
|
|
|
+ return (value / 1000) + 'k'; // 格式化为20k
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ // data: [
|
|
|
+ // 12000,
|
|
|
+ // {
|
|
|
+ // value: 12000,
|
|
|
+ // itemStyle: {
|
|
|
+ // color: '#a90000',
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // 12000,
|
|
|
+ // 12000,
|
|
|
+ // 12000,
|
|
|
+ // 12000,
|
|
|
+ // 12000
|
|
|
+ // ],
|
|
|
+ data: this.data.stepsData,
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '10',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 15,
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ return option; // 返回 option 对象
|
|
|
+ },
|
|
|
+ // 返回x轴底下的字
|
|
|
+ formatter(value, index) {
|
|
|
+ let daylist = this.data.resultList.map(item => {
|
|
|
+ const day = new Date(item.createdAt); // 获取当前日期
|
|
|
+ const dayOfMonth = day.getDate(); // 获取今天是几号
|
|
|
+ return dayOfMonth
|
|
|
+ })
|
|
|
+ daylist.reverse()
|
|
|
+ const dayindex = daylist.length-1
|
|
|
+ if (daylist.length < 7) {
|
|
|
+ for (let i = daylist.length; i < 7; i++) {
|
|
|
+ const lastDay = daylist[daylist.length - 1];
|
|
|
+ daylist.push(lastDay + (i - daylist.length + 1)); // 补充后续日期
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const dates = daylist.map(item=>{
|
|
|
+ return `${item}号`
|
|
|
+ })
|
|
|
+ console.log('dates',dates);
|
|
|
+ return index === dayindex ? '今天' : value + '\n' + '\n' + dates[index];
|
|
|
+ },
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
@@ -179,6 +211,8 @@ Page({
|
|
|
this.setData({
|
|
|
active: event.detail
|
|
|
});
|
|
|
+ this.echartsComponnet = this.selectComponent('#mychart')
|
|
|
+ this.initChart()
|
|
|
},
|
|
|
//修改30天或者7天数据
|
|
|
changeday() {
|
|
|
@@ -344,7 +378,21 @@ Page({
|
|
|
|
|
|
// 取出对应数量的数据
|
|
|
const resultList = allList.slice(0, numItemsToTake);
|
|
|
- const stepsData = resultList.map(item => item.steps);
|
|
|
+ const stepsData = resultList.map((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ // 如果是第一条数据，设置特殊样式
|
|
|
+ return {
|
|
|
+ value: item.steps,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#a90000',
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 其他数据直接返回 steps
|
|
|
+ return item.steps;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
this.setData({
|
|
|
resultList,
|
|
|
stepsData
|
