Echarts圖例位置 - legend屬性

[如何設置Echarts圖例位置]

Echarts可以幫助我們快速構建柱狀圖、餅圖、條形圖,這對於多圖形化展示數據來說尤其方便,可幫助我們快速開發。
不過我們在使用Echarts過程中經常會遇到如下問題:圖例經常不知道如何調節到我們想要的位置。

遇到此情況該如何調節呢?

只需要legend屬性中修改如下幾個示數即可:

 legend: {
        orient: 'vertical',
        x:'right',      //可設定圖例在左、右、居中
        y:'center',     //可設定圖例在上、下、居中
        padding:[0,50,0,0],   //可設定圖例[距上方距離,距右方距離,距下方距離,距左方距離]
        data: ['直接訪問','微信','百度','其他文章','網頁']
    },
①x : 可以設定圖例在----左(left)、右(right)、居中(center)、填寫數字(如:100px)
②y : 可以設定圖例在----上(top)、下(bottom)、居中(center)、填寫數字(如:100px)
③另外,可使用padding:
padding:[0,50,0,0] [(距離上方距離),(距離右方距離)、(距離下方距離)、(距離左方距離)]

如此設置完就可以得到自己想要的位置啦。

參考:Echarts官網配置項介紹:https://www.echartsjs.com/option.html#legend
————————————————
版權聲明:本文爲CSDN博主「iUserWang」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/woteafuck/article/details/91986313

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章