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

最新推荐文章于 2024-06-20 10:44:50 发布

猪儿猫儿狗儿

最新推荐文章于 2024-06-20 10:44:50 发布

阅读量1.5w

点赞数 2

分类专栏： echarts 文章标签：数据可视化 echarts

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

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单暴力，亲测有效！！！
一、设置背景颜色
在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>