Echarts实战案例代码(7):柱图实现显示多组数据label标签的解决方案

简介: Echarts实战案例代码(7):柱图实现显示多组数据label标签的解决方案


一、创建数组:

var dataName = ["A", "B", "C", "D", "E"];
var datalabel = [100, 2, 3, 12, 13];
var data = [18203, 23489, 29034, 104970, 131744];

二、设置option

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: dataName,
        axisLabel: {
            interval: 0,
            color: '#666',
            align: 'right',
            fontSize: 13,
        }
    },
    series: [{
            name: '漏刻有时',
            type: 'bar',
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                },
            },
            label: {
                show: true,
                position: "right",
                formatter: function(params) {
                    console.log(params.dataIndex);
                    return '总金额:' + data[params.dataIndex] + '元\n\n总数量:' + datalabel[params.dataIndex]+ '个'
                }
            },
            data: data
        },
    ]
};

三、重点解读:

 label: {
                show: true,
                position: "right",
                formatter: function(params) {
                    //console.log(params.dataIndex);
                    return '总金额:' + data[params.dataIndex] + '元\n\n总数量:' + datalabel[params.dataIndex]+ '个'
                }
            }


Done!

相关文章
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
422 2
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
502 0
|
移动开发 JavaScript 算法
echarts图表坐标轴数据标签添加下划线(下)
echarts图表坐标轴数据标签添加下划线(下)
401 0
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
283 1
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
507 0
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
1102 0
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
1440 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
JSON 数据格式
ECharts加载json数据解决方案
ECharts加载json数据解决方案
339 0
|
数据可视化
echarts图表坐标轴数据标签添加下划线(上)
echarts图表坐标轴数据标签添加下划线(上)
428 0
219Echarts - 富文本(Pie Special Label)
219Echarts - 富文本(Pie Special Label)
151 0

热门文章

最新文章