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?源碼分析reactive?readonly實(shí)例
這篇文章主要為大家介紹了Vue3?源碼分析reactive?readonly實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue3使用ref的性能警告問(wèn)題
這篇文章主要介紹了vue3使用ref的性能警告問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue中保存數(shù)據(jù)到磁盤文件的方法
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來(lái)聲明響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在 Vue 3 中,使用 setup 語(yǔ)法糖可以更簡(jiǎn)潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來(lái)管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下
2024-09-09
如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑！具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會(huì)重復(fù)獲取之前的值需要手動(dòng)強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下
2024-04-04
Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-08-08
vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化)
這篇文章主要介紹了Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue之Vue.use的使用場(chǎng)景及說(shuō)明
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12