eCharts でパーセンテージ付きの横棒グラフを実装する方法

var データ = [220, 182, 191, 234, 290, 120, 65, 444];
var バーの幅 = 20;
var 最大数 = 0;
(var i = 0; i < データ長さ; i++) {
    if (データ[i] > maxNum) {
        最大数 = データ[i];
    }
}
 
オプション = {
    背景色: '黒'、
    グリッド: {
        上: '10%'、
        左: '20%'、
        右: '10%'、
        下部: '0%'、
    },
 
    タイトル：
        テキスト: 'パーセンテージ列'、
    },
    x軸:
        表示: 偽、
    },
    y軸: {
        データ: data.map((item, index) => `data ${index}`),
        分割行: {
            表示: 偽、
        },
        軸ラベル: {
            テキストスタイル: { フォントサイズ: '80%', 色: '#02afff' },
        },
        軸線: {
            表示: 偽、
        },
        軸目盛り: false、
    },
    シリーズ： [
        {
            タイプ: 'バー'、
            バー幅: バー幅、
            zレベル: 2,
            データ: data.map(function (item) {
                戻る {
                    値: アイテム、
                    最大数: 最大数、
                };
            }）、
            ラベル: {
                表示: true、
                位置: 'inside'、
                // 距離: 80,
                配置: '中央'、
                フォーマッタ: 関数 (パラメータ) {
                    // params.data.realValue を返します。
                    var パーセント = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
                    リターン率;
                },
                色: '#fff',
                フォントサイズ: 12,
            },
            アイテムスタイル: {
                境界半径: 10,
                色: 新しい echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { オフセット: 0、色: '#395CFE' },
                    { オフセット: 1、色: '#2EC7CF' },
                ]）、
            },
        },
        {
            タイプ: 'バー'、
            バー幅: バー幅、
            バーギャップ: '-100%',
            データ: data.map(function (item) {
                戻る {
                    実数値: 項目、
                    値: maxNum、
                };
            }）、
            ラベル: {
                表示: true、
                位置: '右'、
                距離: 80,
                配置: '右'、
                フォーマッタ: 関数 (パラメータ) {
                    params.data.realValue + 'item' を返します。
                },
                色: '#02afff',
                フォントサイズ: 18,
            },
            アイテムスタイル: {
                境界半径: 10,
                色: 'rgba(3,169,244, 0.5)',
            },
        },
    ]、
};