使用vue-seamless-scroll做无缝滚动,echarts无法显示
时间: 2023-10-12 12:15:12 浏览: 72
可能出现这个问题的原因是vue-seamless-scroll插件和echarts图表的样式冲突,导致图表无法正确显示。
您可以尝试以下方法解决这个问题:
1. 在echarts实例化时,设置z-index属性为较高的值,例如:
```javascript
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
myChart.getZr().painter.setBackgroundColor('rgba(0,0,0,0)');
myChart.getZr().painter.refreshImmediately();
myChart.getZr().configLayer(0, {
motionBlur: false,
lastFrameAlpha: 0.8
});
myChart.getZr().painter.getViewportRoot().style.zIndex = 1; // 设置z-index为1
```
2. 在vue-seamless-scroll组件的容器元素上设置position:relative属性,例如:
```html
<vue-seamless-scroll class="scroll-container" :list="list" :speed="50">
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</vue-seamless-scroll>
```
```css
.scroll-container {
position:relative; /* 设置position:relative */
height: 100px;
overflow: hidden;
}
```
通过以上两种方法,可以解决vue-seamless-scroll和echarts图表的样式冲突问题。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)