ECharts之柱状图详解

1、引入echarts.js文件

点解下载echarts.js

<!-- 引入echarts 图形化展示 -->
<script type="text/javascript" src="${ctxStatic}/common/yuzhong/js/echarts/echarts.js"></script>

2、HTML代码

<div class="t2_box_con" style="padding:0px 10px 0px;">
    <!-- 此处加载图像 -->
    <div id="xzbjl" style="width: 100%; height: 242px;"></div>
</div>

3、配置数据和加载图像

<script type="text/javascript">
    var XData = "['周一', '周二', '周三', '周四', '周五']";
    var YData1 = "[10, 25, 21, 25, 36]";
    var YData2 = "[40, 28, 45, 36, 12]";
    var YData3 = "[15, 56, 34, 21, 8]";
    var xzbjl = echarts.init(document.getElementById("xzbjl"));
    option = {
        /* 柱状图颜色 */
        color:['#06a45f', '#078ed6', '#e3982f'],
        /* 四周边距(单位默认px,可以使用百分比) */
        grid:{
            left:40,
            top:30,
            right:50,
            bottom:30
        },
        /* 鼠标悬浮显示数据 */
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
             }
        },
        /* 图例说明 */
        legend: {
            // 图例排项 vertical-"竖向"; horizontal-"横向"
            orient: 'horizontal',
            // 图例组件离容器左侧的距离
            right : 40,
            top: 0,
            // 图例文字的样式
            textStyle:{
                color:'#6ab2ec',
            },
            // 与series中每个name对应 
            data:['数据一','数据二', '数据三']
        },
        toolbox: {
            show : true
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                //设置轴线的属性
                 axisLine:{
                     lineStyle:{
                         color:'#6ab2ec',
                     }
                 },
                //调整x轴的lable
//                axisLabel:{   
//                    textStyle:{
//                        fontSize:10 // 让字体变小
//                    },
//                    rotate: 30,    // 字体倾斜30度
//                },
                data : xData,
            }
        ],
        yAxis : [
            {
                type : 'value',
                 // 控制网格线是否显示
                 splitLine: {
                    show: true, 
                    //  改变轴线颜色
                    lineStyle: {
                        // 使用深浅的间隔色
                        color: ['#132a6e']
                     }                            
                 },
                  //设置轴线的属性
                 axisLine:{
                     lineStyle:{
                         color:'#6ab2ec',
                     }
                 } 
            }
        ],
        series : [
            {
                name:'数据一',
                type:'bar',
                /* 柱子的显示宽度 */
                barWidth: '20%',
                data: yData1,
                /* 显示平均线 */
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                /* 显示柱子数据 */
                label: {
                    normal: {
                        show: true,
                        // 数据在柱子头部显示
                        position: 'top',
                        textStyle: {
                          color: '#5475c7',
                          fontSize:16,
                        }
                    }
                },
            },
            {
                name:'数据二',
                type:'bar',
                barWidth: '20%',
                data: yData2,
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                },
            },
            {
                name:'数据三',
                type:'bar',
                barWidth: '20%',
                data: yData3,
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    xzbjl.setOption(option);

4、效果图

6、在线调试(ECharts官网)

ECharts官网-在线调试-柱状图

echarts柱状图属性可以通过设置实现渐变色。根据引用中提供的链接,我们可以了解到如何设置柱状图的渐变色效果。该链接中详细介绍了通过设置visualMap属性来实现柱状图的渐变色。visualMap属性可以设置渐变的颜色范围和数值范围,从而实现柱状图的渐变色效果。 除了柱状图echarts还支持其他类型的图表,如折线图和圆形图。根据引用中提供的链接,我们可以了解到如何应用折线图和圆形图。在该链接中,作者介绍了如何通过设置折线图的属性和数据来实现折线图的展示效果。同样,通过设置圆形图的属性和数据,我们也可以实现圆形图的展示效果。 总结起来,echarts柱状图属性详解包括设置渐变色效果的visualMap属性,而echarts还支持其他类型的图表,如折线图和圆形图,通过设置对应的属性和数据,可以实现这些图表的展示效果。可参考引用和引用中提供的链接获取更详细的信息。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [echarts 柱状图渐变色背景](https://download.csdn.net/download/qq_36437172/12418565)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [echarts柱状图属性详解](https://blog.csdn.net/qq_37056728/article/details/89185380)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值