Echarts 在柱形图上加横线，设置基准线，自定义tooltip

最新推荐文章于 2025-07-18 11:17:32 发布

原创

最新推荐文章于 2025-07-18 11:17:32 发布 · 8.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端

本文介绍了一个使用ECharts绘制的世界人口总量的图表案例。该图表通过柱状图的形式展示了不同国家和地区在2011年和2012年的人口数量，并且通过一系列配置实现了丰富的交互效果，包括轴提示、图例等。

1.效果图

2.配置参数

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            axis :'y',
            Z:10
        },
        formatter:function(params){
            var relVal = '<span style="color:#333">'+params[0].name+'</span><br/>'
            params.forEach(item => {
                if ( item.seriesIndex<3) {
                    relVal +='<br/><span style="color:#999">' + item.seriesName + ':</span><span style="color:#333">' + item.value+'</span>';
                } 
            })
            return relVal
        },
        backgroundColor:'#fff',
        padding:[5,10],
    },
    legend: {
        data: ['2