vue中使用echarts使用自带的滚动条

在Vue中使用ECharts自带的滚动条需要注意一些问题，需要进行一些配置和调整。以下是具体的步骤：

1. 在ECharts的配置项中，添加xAxis的属性show和boundaryGap，以及dataZoom的属性start和end，如下所示：

option: {
    xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        show: true,  // 显示x轴
        boundaryGap: false  // 不留空隙显示
    }],
    yAxis: [{
        type: 'value'
    }],
    dataZoom: [{
        type: 'inside',
        start: 0,  // 起始位置
        end: 100   // 结束位置
    }]
}

2. 在Vue组件中，使用ECharts的实例化方法创建ECharts图表，并在mounted钩子函数中设置图表的宽度和高度，如下所示：

<template>
  <div ref="chart" style="width: 100%; height: 500px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption(this.option)
    chart.resize()  // 设置图表的宽度和高度
  }
}
</script>

3. 最后，在Vue组件的样式中添加overflow属性，以启用浏览器原生的滚动条，如下所示：

<style>
div {
  overflow: auto;
}
</style>

这样，就可以在Vue中使用ECharts自带的滚动条了。