echart dataZoom区域缩放

微信小程序场景遇到的问题：
使用dataZoom进行区域缩放，echart实例编辑器已编译出数据，但是在微信小程序上的显示，拖动数据区域，数据缺失，仅显示前3条！！！（echart实例编辑器：https://echarts.apache.org/examples/zh/editor.html?c=line-simple）


图片可以看出，微信上数据缺失；

//代码片段
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: {
          show: true,
          realtime: true,
          start: 0,
          end: 50
        },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

解决方式

（若有更好更完善的方式，欢迎告知，非常感谢！）

dataZoom: {
          show: true,
          realtime: true,
          start: 0,
          end: 50,
          filterMode: 'empty',//增加这句属性设值
        },

拖动区域也不会变形

【话外：uchart没有这个区域缩放缺失数据问题，本来打算改用uchart的。可是可是，安卓端的x轴’\n’换行显示不出来，echart的可以显示出来，如果有能解决的方案，麻烦告知一下。】

dataZoom属性大全

（原文：https://blog.csdn.net/alice9999999/article/details/78027726）
dataZoom=[ //区域缩放
{
id: ‘dataZoomX’,
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:“rgba(47,69,84,0)”, //组件的背景颜色
type: ‘slider’, //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:“rgba(167,183,204,0.4)”, //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: ‘filter’, //‘filter’：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
//‘weakFilter’：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
//‘empty’：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
//‘none’: 不过滤数据，只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:“horizontal”, //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。‘horizontal’：水平。‘vertical’：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。‘shift’：表示按住 shift 和鼠标滚轮能触发缩放。‘ctrl’：表示按住 ctrl 和鼠标滚轮能触发缩放。‘alt’：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。‘shift’：表示按住 shift 和鼠标移动能触发数据窗口平移。‘ctrl’：表示按住 ctrl 和鼠标移动能触发数据窗口平移。‘alt’：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:“center”, //组件离容器左侧的距离,‘left’, ‘center’, ‘right’,‘20%’
top:“top”, //组件离容器上侧的距离,‘top’, ‘middle’, ‘bottom’,‘20%’
right:“auto”, //组件离容器右侧的距离,‘20%’
bottom:“auto”, //组件离容器下侧的距离,‘20%’

},
{
    id: 'dataZoomY',
    type: 'inside',
    filterMode: 'empty',
    disabled:false,                         //是否停止组件的功能。
    xAxisIndex:0,                           //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
    yAxisIndex:[0,2],                       //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
    radiusAxisIndex:3,                      //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
    angleAxisIndex:[0,2],                   //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
    start: 30,                               //数据窗口范围的起始百分比,表示30%
    end: 70,                                  //数据窗口范围的结束百分比,表示70%
    startValue:10,                           //数据窗口范围的起始数值
    endValue:100,                            //数据窗口范围的结束数值。
    orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
    zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
    throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
    zoomOnMouseWheel:true,                   //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
    moveOnMouseMove:true,                    //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}

]