echarts设置网格样式、背景颜色、柱状图柱子宽度

简单暴力,亲测有效!!!
一、设置背景颜色
在option中设置backgroundColor:’#ffffff’

backgroundColor:'#d9d9d9'

二、设置网格样式
在option中添加grid

grid:{
	top:100,
    left:100,//调整y轴与左侧的距离,显示更多文字
    bottom:100,
    right:100
}

三、柱状图柱子格式
在option下series中添加barWidth、barGap

barWidth:30,//柱子宽度
barGap:1,//柱子间距

四、全部代码

<!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>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div style="margin-left:50px;margin-bottom:20px">
    <form>
        <label>请选择年份:</label>
        <select id="select">
            <option value="2019年">2019年</option>
            <option value="2020年">2020年</option>
            <option value="2021年">2021年</option>
        </select>
        <br>
        <label>请选择图表:</label>
        <select id="name">
            <option value="全国旅游度假区住宿产品配置情况(单位:家)">全国旅游度假区住宿产品配置情况(单位:家)</option>
            <option value="全国旅游度假区住宿产品房间数量(单位:间)">全国旅游度假区住宿产品房间数量(单位:间)</option>
            <option value="全国省级(含)以上旅游度假区休闲旅游产品状况(家)">全国省级(含)以上旅游度假区休闲旅游产品状况(家)</option>
        </select>
        <input type="button" value="确定" id="btn" onclick="show()">
    </form>
</div>
<div id="main" class="chart"></div>
<script>
    $(function () {
        var year=$('#select option:selected').val();
        var name=$('#name option:selected').val();
        var series=['5星/4星酒店','高档非星级酒店','非标精品民宿','其他非标民宿','中低档、其他非星级酒店'];
        var count=[92904,260420,107176,308936,584005];
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            //定义柱子颜色
            color:['#f79646'],
            backgroundColor:'#d9d9d9',
            title: {
                text: year+name,
                x:'center',
                y:'bottom'
            },
            tooltip: {
                trigger: 'axis',
                //鼠标移入有阴影
                axisPointer:{
                    type:'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['bar', 'line']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            //调整y轴与左侧的距离,显示更多文字
            grid:{
              left:100,
            },
            xAxis: [{
                type:'value',
                axisLabel: {
                    formatter: '{value}间'
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:['#000000'],
                        width:1,
                        type:'solid'
                    }
                }
            }],
            yAxis: [{
                type:"category",
                data:series,
            }],
            series: [
                {
                    type: 'bar',
                    data: count,
                    barWidth:30,
                    itemStyle: {//柱状图上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'right', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }
            ]
        };
        myChart.setOption(option);
    })

    function show() {
        var year=$('#select option:selected').val();
        var name=$('#name option:selected').val();
        var series=['5星/4星酒店','高档非星级酒店','非标精品民宿','其他非标民宿','中低档、其他非星级酒店'];
        var count=[92904,260420,107176,308936,584005];
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            //定义柱子颜色
            color:['#f79646'],
            backgroundColor:'#d9d9d9',
            title: {
                text: year+name,
                x:'center',
                y:'bottom'
            },
            tooltip: {
                trigger: 'axis',
                //鼠标移入有阴影
                axisPointer:{
                    type:'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['bar', 'line']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            //调整y轴与左侧的距离,显示更多文字
            grid:{
                left:100,
            },
            xAxis: [{
                type:'value',
                axisLabel: {
                    formatter: '{value}间'
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:['#000000'],
                        width:1,
                        type:'solid'
                    }
                }
            }],
            yAxis: [{
                type:"category",
                data:series,
                //坐标轴两边留白
                // boundaryGap:['15%','15%']
            }],
            series: [
                {
                    type: 'bar',
                    data: count,
                    barWidth:30,
                    itemStyle: {//柱状图上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'right', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
</body>
</html>

五、效果展示
请添加图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值