Echarts 圖表位置調整

VTech_kevin發表於2021-08-22
Echarts

Echarts 圖表的位置調整

折線圖和柱狀圖，通過grid屬性調整。

grid:{
        show:false,
        top:'20%',
        right:'5%',
        bottom:'10%',
        left:'10%'
    },

其中數值可以是畫素值，也可以是百分比。

下圖為上下左右皆為5%的情形。

 

 

餅圖，通過series中的center屬性調整。

餅圖使用grid屬性無法調整，需要使用series中的center屬性，

 

 預設center屬性為[‘50%’，‘50%]，上圖中30%，60%效果如下：

 

 其他問題：

餅圖中可用@[n]和@name 兩種方式獲取資料序列中的值，如下面程式碼

label: {
                show: false,
                position: 'center',
                fontSize:'80',
                // 使用@[1]獲取值
                // formatter:'{b}:{@[1]}'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '50',
                    fontWeight: 'bold',
                     // 使用@峰電獲取值  
                    formatter:'{b}:{@峰電}'
                }
            },
            labelLine: {
                show: false
            },

但由於使用Razor構建前端頁面，@與餅圖中的@衝突，[]亦和Razor語法衝突。

解決辦法，使用@@，不使用[]，如下程式碼，可以正常工作。

label: {
                        show: false,
                        position: 'center',
                        fontSize: '80',
                        //不能工作
                        @*formatter:'{b}:{@@[1]}'*@
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '22',
                            fontWeight: 'bold',
                            // 可以正常工作
                            formatter:'{b}:{@@峰電}'
                        }
                    },

 圖表背景透明，新增

backgroundColor: 'transparent',

即可。

相關文章