echarts4.0 scroll 不能按照预期工作

[wuyoudehe]

One-line summary [问题简述]

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:4.0.1
• Browser version [浏览器类型和版本]:Chrome 63 32位
• OS Version [操作系统类型和版本]: win10 专业版

Expected behaviour [期望结果]

legend 中加入 type:'scroll' 出现了分页按钮但表现为 0/2 且不可点击

大小设置为1600*800

预期加入这个后 legend处能够分页

ECharts option [ECharts配置项]

dataList=[
, [5, 3, 5, 7, 3, 8, 8, 7, 2, 2, 2, 3, 2, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
,[2, 3, 10, 0, 3, 5, 0, 0, 5, 0, 6, 4, 3, 0, 4, 8, 7, 5, 2, 1, 1, 0, 0, 0, 0, 0, 0]
,[7, 3, 8, 5, 3, 7, 1, 6, 0, 0, 5, 5, 3, 0, 7, 10, 3, 2, 0, 8, 0, 0, 0, 0, 0, 0, 0]
, [4, 7, 9, 4, 6, 3, 8, 1, 4, 9, 12, 4, 0, 0, 0, 7, 6, 4, 0, 4, 2, 1, 0, 0, 0, 0, 0]
, [2, 6, 3, 4, 3, 9, 10, 0, 2, 7, 12, 8, 2, 0, 7, 7, 5, 0, 1, 4, 1, 1, 0, 0, 0, 0, 0]
, [4, 7, 4, 5, 3, 6, 1, 2, 7, 4, 4, 6, 3, 0, 5, 0, 1, 3, 1, 4, 2, 0, 0, 0, 0, 0, 0]
,[1, 8, 7, 0, 5, 7, 3, 1, 6, 1, 4, 7, 3, 0, 0, 5, 2, 1, 0, 7, 1, 1, 1, 0, 0, 0, 0]
,[0, 4, 7, 5, 5, 6, 0, 5, 3, 0, 5, 6, 5, 0, 0, 4, 3, 1, 0, 1, 0, 8, 0, 1, 0, 0, 0]
, [3, 6, 2, 4, 6, 7, 3, 4, 3, 0, 10, 9, 5, 0, 0, 6, 1, 1, 0, 10, 3, 2, 0, 3, 0, 0, 0]
,[6, 4, 5, 8, 2, 3, 2, 1, 0, 0, 9, 6, 4, 0, 0, 3, 2, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0]
, [1, 6, 4, 3, 9, 5, 5, 10, 5, 0, 4, 7, 0, 0, 0, 7, 3, 1, 1, 3, 0, 0, 0, 0, 0, 0, 0]
, [0, 6, 0, 7, 6, 9, 3, 5, 0, 1, 6, 3, 7, 0, 2, 4, 0, 5, 1, 1, 0, 0, 0, 0, 0, 0, 0]
,[5, 7, 1, 5, 6, 0, 2, 8, 3, 3, 5, 7, 3, 0, 3, 4, 1, 2, 1, 4, 0, 4, 0, 0, 0, 0, 0]
,[6, 1, 6, 6, 7, 3, 2, 3, 0, 0, 7, 8, 1, 0, 10, 6, 4, 2, 1, 4, 2, 2, 0, 0, 1, 0, 0]
,[4, 8, 3, 3, 2, 6, 5, 0, 5, 2, 4, 7, 4, 0, 5, 4, 3, 0, 1, 1, 1, 0, 0, 2, 0, 1, 0]
,[2, 5, 0, 8, 4, 0, 2, 1, 1, 10, 4, 4, 1, 0, 4, 2, 4, 6, 0, 1, 1, 0, 0, 0, 0, 0, 0]
, [0, 5, 2, 1, 5, 6, 5, 0, 1, 1, 8, 8, 2, 0, 6, 5, 3, 2, 0, 4, 1, 0, 0, 0, 0, 0, 0]
, [4, 3, 0, 3, 6, 6, 2, 7, 1, 6, 9, 7, 11, 0, 5, 4, 0, 4, 1, 2, 6, 1, 0, 0, 0, 0, 0]
, [0, 7, 2, 3, 7, 10, 7, 0, 3, 4, 10, 7, 6, 0, 8, 10, 3, 3, 0, 5, 2, 0, 0, 0, 0, 0, 0]
, [6, 5, 5, 6, 5, 8, 3, 0, 8, 5, 12, 7, 4, 0, 4, 8, 2, 7, 0, 0, 1, 0, 0, 0, 0, 1, 0]
, [2, 5, 5, 5, 3, 2, 0, 3, 3, 1, 7, 7, 2, 0, 5, 1, 0, 1, 0, 7, 3, 0, 0, 0, 0, 1, 0]
, [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
, [3, 2, 2, 0, 0, 4, 1, 5, 0, 6, 3, 0, 5, 0, 4, 1, 0, 5, 0, 1, 0, 0, 0, 0, 0, 0, 0]
,[2, 2, 2, 0, 1, 4, 0, 9, 0, 3, 2, 3, 3, 0, 2, 3, 2, 5, 0, 6, 1, 0, 0, 2, 0, 0, 1]
,[2, 9, 4, 0, 5, 8, 3, 10, 0, 4, 7, 6, 1, 0, 4, 5, 1, 10, 0, 6, 0, 0, 0, 1, 0, 0, 8]
, [3, 3, 2, 1, 5, 5, 4, 4, 0, 4, 7, 3, 1, 0, 6, 8, 0, 15, 0, 5, 0, 0, 0, 1, 5, 0, 4]
,[3, 9, 2, 0, 0, 3, 3, 7, 0, 6, 3, 8, 2, 1, 0, 4, 0, 12, 0, 5, 2, 0, 0, 0, 3, 0, 1]
, [4, 6, 3, 0, 4, 7, 2, 12, 0, 5, 4, 5, 1, 0, 0, 3, 0, 11, 0, 3, 2, 0, 0, 0, 0, 0, 5]
, [5, 10, 6, 2, 1, 10, 2, 9, 0, 11, 5, 7, 11, 0, 0, 1, 3, 13, 0, 5, 0, 0, 0, 2, 4, 0, 2]

,[0, 7, 1, 0, 1, 4, 4, 6, 0, 6, 3, 2, 1, 0, 0, 1, 2, 4, 2, 7, 0, 0, 0, 1, 2, 0, 5]
]

encodeY=[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]
option = {
            tooltip: {
              trigger: 'axis'
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              itemSize:'30',
              bottom:'30%',
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {},

              }
            },
            legend: {
              type:'scroll',
              tooltip: {
                show: true
              },
              scrollDataIndex:0,
              "pageIconColor": "#00aaef",
              "pageIconSize": [
                11,
                11
              ],
              data:["trend", "12-01", "12-04", "12-05", "12-06", "12-07", "12-08", "12-11", "12-12", "12-13", "12-14", "12-15", "12-18", "12-19", "12-20", "12-21", "12-22", "12-25", "12-26", "12-27", "12-28", "12-29", "12-31", "01-02", "01-03", "01-04", "01-05", "01-08", "01-09", "01-10", "01-11"],
            },
            dataZoom: [{
              type: 'slider',
              start: 40,
              end: 70
            }, {
              type: 'inside',
              start: 40,
              end: 70
            }],
            xAxis: {
              data: ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "ii", "jj", "kk", "ll", "mm", "nn", "oo", "pp", "qq", "rr", "ss", "tt", "uu", "vv", "www", "xx", "yy", "zz", "ab"]
            },
            yAxis: {},
            visualMap: {
              type: 'continuous',
              dimension: 1,
              text: ['筛选次数上界', '筛选次数下界'],
              inverse: false,
              itemHeight: 200,
              calculable: true,
              min: 0,
              max: 30,
              top: 60,
              left: 10,
              inRange: {
                colorLightness: [0.4, 0.8]
              },
              outOfRange: {
                color: '#bbb'
              },
              controller: {
                inRange: {
                  color: '#13ce66'
                }
              }
            },

            series: [{

              type: 'custom',
              name: '日平均次数',

              itemStyle: {
                normal: {
                  borderWidth: 2
                }
              },
              encode: {
                x: 0,
                y: encodeY
              },
              data: [2.8666666666666667, 5.233333333333333, 3.7, 3.1666666666666665, 3.8666666666666667, 5.366666666666666, 3.033333333333333, 4.2, 2.066666666666667, 3.3666666666666667, 5.966666666666667, 5.466666666666667, 3.2, 0.16666666666666666, 3.066666666666667, 4.366666666666666, 2.033333333333333, 4.166666666666667, 0.4, 3.7333333333333334, 1.0666666666666667, 0.6666666666666666, 0.03333333333333333, 0.43333333333333335, 0.5, 0.1, 0.8666666666666667, 2.8666666666666667, 5.233333333333333, 3.7, 3.1666666666666665, 3.8666666666666667, 5.366666666666666, 3.033333333333333, 4.2, 2.066666666666667, 3.3666666666666667, 5.966666666666667, 5.466666666666667, 3.2, 0.16666666666666666, 3.066666666666667, 4.366666666666666, 2.033333333333333, 4.166666666666667, 0.4, 3.7333333333333334, 1.0666666666666667, 0.6666666666666666, 0.03333333333333333, 0.43333333333333335, 0.5, 0.1, 0.8666666666666667],
              z: 100
            }].concat(this.$echarts.util.map(dataList, function (data, index) {
              return {
                type: 'bar',
                animation: false,
                name: legendData[index + 1],
                itemStyle: {
                  normal: {
                    opacity: 0.5
                  }
                },
                data: data
              };
            }))
          };

Other comments [其他信息]

[wuyoudehe]

使用的是vue 框架 谢谢

[Jw-Eminent]

使用的是vue 框架 谢谢

请问解决了吗？

[100pah]

Remove the first comma in dataList, the pager of the legend would be OK.

However it still needed to be enhanced for this case.