显示Echarts图表中的数值

原创已于 2022-06-08 18:06:26 修改 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #显示数值

于 2019-07-24 19:32:17 首次发布

Web 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Echarts图表中展示数值，通过示例代码和Demo解析，帮助读者理解并实现Echarts散点图（scatter）和打孔卡（punchCard）图表中的数值显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


var hours = ['','塑料瓶', '其他', '玻璃瓶'];
var days = ['无','少量','中量', '微量','大量'];

var data = [[0,1,0.64],[0,2,0.08],[0,3,0.16],[3,1,0.03],[3,3,0.04]];
data = data.map(function (item) {
    return [item[1], item[0], item[2]];
});

option = {
    title: {
        text: 'Labulabula',
        link: 'https://github.com/pissang/echarts-next/graphs/punch-card'
    },
    legend: {
        data: ['置信度'],
        left: 'right'
    },
    tooltip: {
        position: 'top',
        formatter: function (params) {
            return params.value[2] + ' commits in ' + hours[params.value[0]] + ' of ' + days[params.value[1]];
        }
    },
    grid: {
        left: 20,
        bottom: 10,
        right: 25,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: hours,
        boundaryGap: false,
        splitLine: {
            show: true,
            lineStyle: {
                color: '#999',
                type: 'dashed'
            }
        },
        axisLine: {
            show: true //显示坐标轴线
        }
    },
    yAxis: {
        type: 'category',
        data: days,
        axisLine: {
            show: true //显示坐标轴线
        }
    },
    series: [{
        name: '置信度',
        type: 'scatter',
        symbolSize: function (val) {
            return val[2] * 150;
        },
        data: data,
        animationDelay: function (idx) {
            return idx * 5;
        },
        label: { //显示数值的地方
            normal: {
                position:'top',
                color:'#000000',
                show: true,
                formatter:function(params) {
                    return params.value[2];
                }
            }
        }
    }]
};

Echarts中的Demo：https://echarts.baidu.com/examples/editor.html?c=scatter-punchCard