微信小程序中使用echarts踩坑记录

从后台请求的数据改变，echarts图表未更新问题

描述
当从后台请求新的数据赋值给echarts时,图表的数据仍是初始化状态。
解决
造成该问题是没有将改变后的echarts数据重新更新到echarts组件配置中：

 chartMxin.setOption(mxinOption);

上面的chartMxin是echarts.init()方法初始化的对象

设置echarts柱状图背景色宽度比柱状图宽的问题

示例
实现方案

        series: [
          {
            data: [],
            type: "bar",
            name: "实际产量",
            // showBackground: true,
            // backgroundStyle: {
            //   color: "#f1f2fb",
              
            // },
            itemStyle: {
              normal: {
                color: "#505BD2"
              },
            },
            barWidth: "10",
            zlevel: 11
          },
                  {
            // name: '背景',
            type: 'bar',
            barWidth: '20px',
            barGap: '-150%',
            data: [],
            itemStyle: {
                normal: {
                    color: '#f1f2fb',
                },
            },
            tooltip: {
                show: false
            },
            zlevel: 9
        },
        ],

讲解
核心思路再定义一类柱状图用于作为背景，需要使用barGap位移将背景柱状图位移到与柱状图在同一个位置，这里需要设置两者的层级关系，注意：pc端上使用zlevel属性即可，小程序中不可使用zlevel属性否则会报错，应该使用z属性。

小程序中echarts图表横向内容超出滚动坐标轴固定的需求

描述
在移动设备上当x轴内容过多需要内容滚动坐标轴固定时可添加dataZoom属性来实现。
实现

    dataZoom: [
        {
          type: 'inside', //1平移 缩放
          throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
          minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
          start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
          end: 2, //数据窗口范围的结束百分比。范围是：0 ~ 100。
          zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        }
      ],

通过设置start,end属性可以缩放一屏上元素之间的距离，通过minValueSpan控制一屏展示的元素个数