微信小程序echarts图表横屏展示后怎么让x轴长度增加展示更多数据向右拖动查看更多写出例子

可以通过设置echarts的grid属性中的containLabel属性来实现x轴长度增加展示更多数据，同时可以通过设置echarts的dataZoom属性来实现向右拖动查看更多的功能。具体实现步骤如下：

1. 在echarts的option中设置grid属性的containLabel为true，表示包含坐标轴的刻度标签。

option = {
  grid: {
    containLabel: true
  },
  ...
}

2. 在echarts的option中设置dataZoom属性，用于实现缩放和拖动功能。其中，type为slider表示使用滑动条进行拖动，start和end分别表示初始缩放的范围，表示百分比。

option = {
  ...
  dataZoom: {
    type: 'slider',
    start: 0,
    end: 100
  },
  ...
}

完整例子如下：

// 引入echarts库
var echarts = require('../../utils/echarts');

Page({
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    }
  },

  onLoad: function (options) {
    // 获取组件
    this.ecComponent = this.selectComponent('#mychart');
    // 初始化图表
    this.initChart();
  },

  initChart: function () {
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 初始化echarts
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素比
      });

      // 设置echarts参数
      var option = {
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        },
        yAxis: {},
        series: [{
          name: '数据',
          type: 'bar',
          data: [10, 52, 200, 334, 390, 330, 220, 110, 80, 70, 60, 50, 40, 30, 20, 10, 8, 6, 4, 2, 1, 1, 1, 1, 1, 1]
        }],
        grid: {
          containLabel: true
        },
        dataZoom: {
          type: 'slider',
          start: 0,
          end: 100
        }
      };

      // 绘制图表
      chart.setOption(option);

      // 将图表实例绑定到页面上，方便其他方法调用
      this.chart = chart;
      return chart;
    });
  }
});

在上面的例子中，x轴的数据为26个字母，通过设置containLabel为true，x轴长度增加，可以展示更多的数据。同时，通过设置dataZoom的type为slider，可以使用滑动条进行拖动查看更多的数据。