vue echarts左右間距調(diào)整左右空白問(wèn)題及解決

更新時(shí)間：2025年04月28日 15:06:18 作者：zhaocarbon

這篇文章主要介紹了vue echarts左右間距調(diào)整左右空白問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue echarts左右間距調(diào)整左右空白

咱就說(shuō)這樣的左右間距丑不丑。。

經(jīng)過(guò)調(diào)整后

嗯，好看了很多。頁(yè)面也協(xié)調(diào)多了！

直接上代碼

添加以下配置數(shù)據(jù)：

grid: {
  x: 50,
  y: 25,
  x2: 30,
  y2: 35
},

this.chart.setOption({
                width: '100%',
                xAxis: {
                    show: false,
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'red'
                        }
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    splitNumber: splitNumber,
                    min: yMin,
                    max: yMax,
                    interval: interval
                },
                series: [
                    {
                        data: yData,
                        type: 'line'
                    }
                ],
                grid: {
                    x: 50,
                    y: 25,
                    x2: 30,
                    y2: 35
                },
            })

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)
本文通過(guò)示例代碼介紹了vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)的相關(guān)操作,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧
2024-07-07
Vue實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,需要的小伙伴可以參考下
2023-12-12
Vue基于NUXT的SSR詳解
這篇文章主要介紹了Vue基于NUXT的SSR詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問(wèn)題
今天小編就為大家分享一篇解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue同一路由強(qiáng)制刷新頁(yè)面的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁(yè)面的問(wèn)題，本文給大家分享實(shí)現(xiàn)過(guò)程，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
vue-cli3.0如何修改端口號(hào)
這篇文章主要介紹了vue-cli3.0如何修改端口號(hào)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
利用Vue.js指令實(shí)現(xiàn)全選功能
最近做了兩個(gè)vue的項(xiàng)目，都需要實(shí)現(xiàn)全選反選的功能，兩個(gè)項(xiàng)目用了兩種實(shí)現(xiàn)方法，第一個(gè)項(xiàng)目用vue的computed，第二個(gè)項(xiàng)目用指令來(lái)實(shí)現(xiàn)，用起來(lái)，發(fā)覺(jué)指令更加方便。下面就來(lái)介紹如何利用指令來(lái)實(shí)現(xiàn)全選。
2016-09-09
antfu大佬的v-lazy-show教我學(xué)會(huì)了怎么編譯模板指令
這篇文章主要介紹了antfu大佬的v-lazy-show,我學(xué)會(huì)了怎么編譯模板指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Vue3 根據(jù)路由動(dòng)態(tài)生成側(cè)邊菜單的方法
本文介紹了如何在Vue3項(xiàng)目中根據(jù)路由動(dòng)態(tài)生成側(cè)邊菜單,包括準(zhǔn)備工作、路由配置基礎(chǔ)、組件搭建和優(yōu)化與拓展,通過(guò)這些步驟,可以實(shí)現(xiàn)一個(gè)靈活且可擴(kuò)展的側(cè)邊菜單系統(tǒng),提升用戶體驗(yàn),感興趣的朋友一起看看吧
2025-01-01
Vue3打包部署報(bào)錯(cuò)的解決方案
這篇文章主要介紹了Vue3打包部署報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06