引入 echarts.js 我用的版本是 5.5.0

<script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
<div id="main" style="height: 500px;"></div>

js 代碼

let dom = document.getElementById('main');
let myChart = echarts.init(dom, null,{
    renderer: 'svg',
    useDirtyRect: false
});

let app = {};
let option;

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function (params) {
            let value = params[0].value;
            value = value + "%";
            return value;
        }
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}%'
        }
    },
    series: [
        {
            data: getRandomNumbers(1, 99, 7), //獲取區(qū)間1~99隨機(jī)7位整數(shù)數(shù)組
            type: 'line',
            label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                    let value = params.value;
                    value = value + "%";
                    return value;
                }
            },
        }
    ]

};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

如下圖所示:

image.png

主要就是各個(gè)屬性里面的 formatter 代碼

tooltip顯示百分比

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    },
    formatter: function (params) {
        let value = params[0].value;
        value = value + "%";
        return value;
    }
},

此處代碼主要是顯示鼠標(biāo)放上面去后陰影顯示的數(shù)值缀皱，沒啥用，可以刪除

yAxis顯示百分比

yAxis: {
    type: 'value',
    axisLabel: {
        formatter: '{value}%'
    }
},

此處主要是 y軸 顯示百分比

點(diǎn)上面的數(shù)字顯示百分比

series: [
    {
        data: getRandomNumbers(1, 99, 7),
        type: 'line',
        label: {
            show: true,
            position: 'top',
            formatter: function (params) {
                let value = params.value;
                value = value + "%";
                return value;
            }
        },
    }
]

每個(gè)點(diǎn)上面數(shù)字顯示百分比