df_tree
2021-03-30 16:00
采纳率: 50%
浏览 121

wxCharts 柱状图 默认滚动到最后

1、创建的时候一个柱状图,默认填入30日考勤数据如下图

2、我想让图生成的时候直接显示30前几天的数据,如下图

还有就是,为什么数据多了中间的日期 就不显示了呢,如上图没有:03-28?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • qq_1872583947 2021-04-01 09:44
    已采纳

    点赞 打赏 评论
  • qq_1872583947 2021-04-01 09:44

    import * as echarts from '../../ec-canvas/echarts';

     

    let chart = null;

    let data = [32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32]

    let data2 = [18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18] 

    let categories = ["03-01", "03-02", "03-03", "03-04", "03-05", "03-06", "03-07", "03-08", "03-09", "03-10", "03-11", "03-12", "03-13", "03-14", "03-15", "03-16", "03-17", "03-18", "03-19", "03-20", "03-21", "03-22", "03-23", "03-24", "03-25", "03-26", "03-27", "03-28", "03-29", "03-30", "03-31"]

    function initChart(canvas, width, height, dpr) {

      chart = echarts.init(canvas, null, {

        width: width,

        height: height,

        devicePixelRatio: dpr // new

      });

      canvas.setChart(chart);

     

      var option = {

        color: ['#37a2da', '#32c5e9', '#67e0e3'],

        tooltip: {

          trigger: 'axis',

          axisPointer: {            // 坐标轴指示器,坐标轴触发有效

            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'

          },

          confine: true

        },

        legend: {

          left: 'center',

          bottom: '1%',

          data: ['出勤(人次)', '请假(人次)']

        },

        grid: {

          left: 20,

          right: 20,

          bottom: '7%',

          top: 40,

          containLabel: true

        },

        xAxis: [

          {

            type: 'category',

            axisTick: { show: false },

            data: categories,

            axisLine: {

              lineStyle: {

                color: '#999'

              }

            },

            axisLabel: {

              color: '#666'

            }

          }

        ],

        yAxis: [

          {

            type: 'value',

            axisLine: {

              lineStyle: {

                color: '#999'

              }

            },

            axisLabel: {

              color: '#666'

            }

          }

        ],

        

        dataZoom: [{

          type: 'inside',

          startValue: categories.length-3,

          endValue: categories.length

      }],

        series: [

          {

            name: '出勤(人次)',

            type: 'bar',

            label: {

              normal: {

                show: true,

                position: 'inside'

              }

            },

            data: data,

            itemStyle: {

              // emphasis: {

              //   color: '#37a2da'

              // }

            }

          },

          {

            name: '请假(人次)',

            type: 'bar',

            stack: '总量',

            label: {

              normal: {

                show: true

              }

            },

            data: data2,

            itemStyle: {

              // emphasis: {

              //   color: '#32c5e9'

              // }

            }

          }

        ]

      };

     

      chart.setOption(option);

      return chart;

    }

     

    Page({

      onShareAppMessage: function (res) {

        return {

          title: 'ECharts 可以在微信小程序中使用啦!',

          path: '/pages/index/index',

          success: function () { },

          fail: function () { }

        }

      },

      data: {

        ec: {

          onInit: initChart

        }

      },

     

      onReady() {

        // console.log(categories.reverse())

        setTimeout(function () {

          // 获取 chart 实例的方式

          // console.log(chart)

        }, 2000);

      }

    });

     

    点赞 1 打赏 评论
  • qq_1872583947 2021-03-31 10:49

    我写了个时间在前的滚动例子,中间日期有不显示是因为x轴标签太多,会自动稀释处理

    点赞 打赏 评论
  • qq_1872583947 2021-03-31 10:50

    <view class="container">

        <canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler" bindtouchmove="moveHandler" bindtouchend="touchEndHandler"></canvas>

    </view>

    点赞 打赏 评论
  • qq_1872583947 2021-03-31 10:50

    var wxCharts = require('../../../utils/wxcharts.js');

    var app = getApp();

    var columnChart = null;

    var chartData = {

        main: {

            title: '考勤',

            data: [32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32],

            data2:[18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18],

            categories: ['03-31','03-30','03-29','03-28','03-27','03-26','03-25','03-24','03-23','03-22','03-21','03-20','03-19','03-18','03-17','03-16','03-15','03-14','03-13','03-12','03-11','03-10','03-09','03-08','03-07','03-06','03-05','03-04','03-03','03-02','03-01']

        }   

    };

    Page({

        data: {

            isMainChartDisplay: true

        },   

        touchHandler: function (e) {

            columnChart.scrollStart(e);

        },

        moveHandler: function (e) {

            columnChart.scroll(e);

        },

        touchEndHandler: function (e) {

            columnChart.scrollEnd(e);                

        },

        onReady: function (e) {

            var windowWidth = 320;

            try {

              var res = wx.getSystemInfoSync();

              windowWidth = res.windowWidth;

            } catch (e) {

              console.error('getSystemInfoSync failed!');

            }

     

            columnChart = new wxCharts({

                canvasId: 'columnCanvas',

                type: 'column',

                animation: true,

                categories: chartData.main.categories,

                series: [{

                    name: '出勤(人次)',

                    data: chartData.main.data,

                },

                {

                    name: '请假(人次)',

                    data: chartData.main.data2,

                }],

                yAxis: {

                    title: 'hello',

                    min: 0

                },

                xAxis: {

                    disableGrid: false,

                    type: 'calibration'

                },

                extra: {

                    column: {

                        width: 15

                    }                

                },

                dataLabel: true,

                dataPointShape: true,

                enableScroll: true,

                width: windowWidth,

                height: 200,

            });

        }

    });

    点赞 打赏 评论
  • qq_1872583947 2021-04-01 09:44

    <!--index.wxml-->

    <view class="container">

      <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

    </view>

    点赞 打赏 评论
  • qq_1872583947 2021-04-01 09:45

    点赞 打赏 评论

相关推荐 更多相似问题