echarts.js的柱状图的大小，颜色以及显示的设置

最新推荐文章于 2024-05-30 23:16:00 发布

山中水蓝

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量7.1k

点赞数 2

分类专栏： echarts.js JSP 文章标签： echarts

本文链接：https://blog.csdn.net/Garnett_zk/article/details/94452987

版权

JSP 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

echarts.js

2 篇文章 0 订阅

订阅专栏

1.设置柱状图的大小

//设置柱的宽度，要是数据太少，柱子太宽不美观~
barWidth:40,

2.设置柱状图的颜色

var colorList = [
                       '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                       '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                       '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];

具体页面的HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-icons.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-responsive.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-ui-light.css" media="all">
    <script type="text/javascript" src="content/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootstrap.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-icons-ie7.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-charms.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-panorama.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-pivot.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro.min.js"></script>
	<script type="text/javascript" src="content/layui/echarts.js"></script>
</head>
<style>
    html {
        height: 100%;
        width: 100%;
        min-width: 1680px;
    }

    body {
        height: 100%;
        width: 100%;
    }

    
	
	.newdiv1{
		background-color:#ffffff;
		height:45%;
		width:100%;
		display: inline-block;
		margin-top:3%;
		margin-left:2%;
		border:1px solid #1CAFB5;
	}
	
	.newdiv2{
		height:90%;
		width:30%;
		display: inline-block;
		border:1px solid #1CAFB5;
		border-radius:14px;
		border-top:8px solid #0172C7;	
		margin-right:3%;
		margin-top:1%;
	}
	.newsdiv1{
		background-color:#ffffff;
		height:45%;
		width:100%;
		display: inline-block;
		margin-top:3%;
		margin-left:2%;
		border:1px solid #1CAFB5;
	}
	
	.newsdiv2{
		height:90%;
		width:97%;
		display: inline-block;
		border:1px solid #1CAFB5;
		border-radius:14px;
		border-top:8px solid #0172C7;	
		margin-right:3%;
		margin-top:1%;
	}
</style>
<script>
	$(function(){
		var myChart = echarts.init(document.getElementById('chart1'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '年度用电设备排行'
            },
            tooltip: {},
            legend: {
				
                data:['千瓦时']
            },
            xAxis: {
				 type : 'category',

                 name:'额度',

　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的

                show: true,
                data: ["投影机","灯光1","灯光2","电动窗帘","显示屏","电脑","摄像头"],

                axisLabel: {

　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜

//                     rotate: 30,

　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了

                    interval :0

                    }
            },
            yAxis: {
                type : 'value',
                name:'千瓦时',
　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                 min: 0,
                 max: 500,
                 interval: 100,
　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的
                 axisLabel: {
                     formatter: '{value}'
                 }        
			},
            series: [{
                //设置中间标题
                name: '千瓦时',

                type: 'bar',

                itemStyle: {

                    normal: {

　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                        color: function(params) {

                            // build a color map as your need.
							//设置柱状图的显示颜色
							var colorList = [

                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                            ];
							
                            return colorList[params.dataIndex]

                        },

　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了

                        label: {
                            show: true,
                            position: 'top',
							//表示柱状图中显示数据的值
                            formatter: '{c}'
							//表示柱状图中显示数据的值以及对应的名称的数量
                            <!-- formatter: '{b}\n{c}' -->

                        }

                    }

                },

　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~

　　　　　　　　barWidth:40,
				//设置柱状图的值	
                data: [500,440,300,280,250,200,100]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
		
		//以下是默认的柱状图
		var myChart2 = echarts.init(document.getElementById('chart2'));

        // 指定图表的配置项和数据
        var option2 = {
            title: {
                text: '年度用电设备排行'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["投影机","灯光1","灯光2","电动窗帘","显示屏","电脑","摄像头"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,4]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
		
		var myChart3 = echarts.init(document.getElementById('chart3'));

        // 指定图表的配置项和数据
        var option3 = {
            title: {
                text: '年度用电设备排行'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["投影机","灯光1","灯光2","电动窗帘","显示屏","电脑","摄像头"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,4]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);
	})
	 
</script>

<body>
    <div class="newdiv1">
            <div class="newdiv2" >
				<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:20%;margin-top:10px;">
						<option>2019</option>
						<option>2018</option>
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-3xMWdjmp-1562056029085)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart1" style="display: inline-block;height:80%;width:100%"></div>
                
            </div>
			<div class="newdiv2" >
				<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:20%;margin-top:10px;">
						<option>2019</option>
						<option>2018</option>
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-e9yK2Uw7-1562056029086)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart2" style="display: inline-block;height:80%;width:100%"></div>
                
            </div>
			<div class="newdiv2" >
				<div style="display: inline-block;background-color:#fff;height:10%;width:100%">
					<span style="margin-left:20px;margin-right:20px;margin-top:10px;font-size:20px;">时间</span>
					<select style="width:20%;margin-top:10px;">
						<option>2019</option>
						<option>2018</option>
					</select>
					<a href="index.html" style="float:right;margin-right:10%;margin-top:10px;">[外链图片转存失败(img-5cUjdAOd-1562056029088)(https://mp.csdn.net/mdeditor/content/img/add.png)]</a>
				</div>
				<div id="chart3" style="display: inline-block;height:80%;width:100%"></div>
                
            </div>
    </div>
	
	<div class="newdiv1">
         <div class="newsdiv2"></div>
    </div>
   
</body>

</html>

3.效果图
在这里插入图片描述

山中水蓝

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
echarts.js的柱状图的大小，颜色以及显示的设置

1.设置柱状图的大小//设置柱的宽度，要是数据太少，柱子太宽不美观~barWidth:40,2.设置柱状图的颜色var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FA...
复制链接

扫一扫