echarts柱状图柱顶部添加文字及柱颜色

最新推荐文章于 2024-03-22 17:55:09 发布

猪儿猫儿狗儿

最新推荐文章于 2024-03-22 17:55:09 发布

阅读量8.9k

点赞数 2

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/wyl164778/article/details/118993303

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单暴力，亲测有效！！！

柱状图顶部添加文字核心操作是在series中添加itemStyle

series: [
    {
        type: 'bar',//定义柱状图
        data: income,
        // barWidth:10,//柱子宽度
        // barGap:1,//柱子间距
        itemStyle: {//柱状图上方显示数值
            normal: {
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: 'black',
                        fontSize: 16
                    }
                }
            }
        },
    }
]

改变柱状图柱子颜色核心操作是添加color

//定义柱子颜色
color:['#5470c6']

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.js"></script>
</head>
<body>
<script>
    $(function () {
        var year=2021;
        var area=['华北','东北','华东','华中','华南','西南','西北'];
        var income=[110.12,35.03,725.34,82.8,386.23,541.37,211.4];
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            //定义柱子颜色
            color:['#5470c6'],
            title: {
                text: year+'年全国省级（含）以上旅游度假区旅游收入地区差异状况',
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['bar', 'line']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: [{
                type:'category',
                data:area
            }],
            yAxis: [{
                type:"value",
                axisLabel: {
                    formatter: '{value} 亿元'
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: income,
                    itemStyle: {//柱状图上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }
            ]
        };
        myChart.setOption(option);
    })
</script>
</body>
<div id="main" style="height: 450px; width: 730px; border: solid 5px rgb(95,184,120);"></div>
</html>

效果展示：
在这里插入图片描述

猪儿猫儿狗儿

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
echarts柱状图柱顶部添加文字及柱颜色

简单暴力，亲测有效！！！柱状图顶部添加文字核心操作是在series中添加itemStyleseries: [ { type: 'bar',//定义柱状图 data: income, // barWidth:10,//柱子宽度 // barGap:1,//柱子间距 itemStyle: {//柱状图上方显示数值 normal: { label: {
复制链接

扫一扫