wxcharts 折线图 横屏适应设置

  https://github.com/xiaolin3303/wx-charts  下载wxcahrts.js文件  引入到utils下

wxml部分

<view class="chart-container">
  <canvas style="width:100%; height: 100%;" bindtouchstart="touchcanvas" canvas-id="yueEle" disable-scroll='true'></canvas>
</view>

wxss部分

.chart-container {
  width: 100%;
  height: 200px;
  /* background-color: rgb(151, 112, 112); */
}

js部分

data：{
 zhehArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',                 
           '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', 
           '28', '29', '30', '31'],
 zhezArr: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 
              8, 2, 4, 9, 8, 7],
 yuelineChart: null,
}  ，
onLoad: function () {
    var that = this;
    that.setList();
    //监听屏幕旋转
    wx.onWindowResize(function (res) {
      that.drawChart()
    });
  },  
// 图表
  drawChart: function () {
    var windowWidth = 320;
    var windowHeight = 200;
    const that = this;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
      // windowHeight =250;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    that.yuelineChart = new wxCharts({
      canvasId: 'yueEle',
      type: 'line',
      categories: that.data.zhehArr, //categories X轴
      animation: true,
      series: [{
        name: '数据',
        data: that.data.zhezArr,
        format: function (val, name) {
          return val + '';
        },
      },
      ],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        title: '数值',
        format: function (val) {
          return val;
        },
        min: 0
      },
      width: windowWidth,
      height: windowHeight,
      dataLabel: false,
      dataPointShape: true,
      extra: {
        lineStyle: 'curve',
      },

    });
  },
  // canvas点击
  touchcanvas:function(e){
    console.log(e);
    const that = this;
    that.yuelineChart.showToolTip(e, {
      format: function (item, category) {
        console.log(item,category);
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },