Question

我正在使用echarts库制作条形图。我希望滚动条显示在画布外部。我有什么办法可以做到这一点？

Answer 1

不幸的是，Echarts不支持滚动条选项。

不过，您可以使用包装DOM来简单地实现此目的。

查看此演示

let echartsObj = echarts.init(document.querySelector('#canvas1'));

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

echartsObj.setOption(option)

echartsObj = echarts.init(document.querySelector('#canvas2'));

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
};


echartsObj.setOption(option)

 
      .echart-wrap {
        display: inline-block;
        width: 300px;
        height: 300px;
        overflow: scroll;
        border: 1px solid black;
      }

 <html>
 <header>
   <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
 </header>
 <body>
         <div class="echart-wrap">
           <div id="canvas1" style="width: 500px; height: 500px">
           </div>
         </div>

         <div class="echart-wrap">
             <div id="canvas2" style="width: 500px; height: 500px">
             </div>
         </div>
 </body>
  </html>

Echarts-画布外部的滚动条

1 个答案: