echarts.js 折线图显示百分比

引入 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), //获取区间1~99随机7位整数数组
            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

主要就是各个属性里面的 formatter 代码

tooltip显示百分比

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

此处代码主要是显示鼠标放上面去后阴影显示的数值，没啥用，可以删除

yAxis显示百分比

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

此处主要是 y轴 显示百分比

点上面的数字显示百分比

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

每个点上面数字显示百分比