Echarts

最新推荐文章于 2024-05-26 12:10:26 发布

Qfbly_01

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量187

点赞数

分类专栏：前端文章标签： Echarts柱形图

本文链接：https://blog.csdn.net/Qfbly_01/article/details/100728710

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts

Echarts柱形图

Echarts柱形图

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts-demo-柱形图（X轴的）</title>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 400px"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表 #4ad2ff青色
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            tooltip : {
                show : true
            },
            legend : {
                data : [ '销量' ]
            },
            xAxis : [ {
                type : 'category',
                data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
            } ],
            yAxis : [ {
                type : 'value'
            } ],
            series : [ {
                "name" : "销量",
                "type" : "bar",
                barWidth:30,/**柱子的宽度**/
				itemStyle:{
                            normal:{
                                color:'#FF8C00'
                                   }
                           },/***柱子的颜色*/
                "data" : [ 5, 20, 40, 10, 10, 20 ]/**数据**/
            } ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option);
    </script>
</body>

X轴的数据

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts-demo-柱形图</title>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 400px"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表 #4ad2ff青色
       var myChart = echarts.init(document.getElementById('main'));
			var option = {
				    title : {
				        text: '柱状图',
				        
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    calculable : true,
				   /*  grid:{left:'2%',right:'2%',bottom:'10%',containLabel:true}, 设备Y轴的字体显示全部的*/
				    xAxis : [
				        {
				        	name:'(设备数量/台)',
				            type : 'value',
				            boundaryGap : [0, 0.01]
				        }
				    ],
				    yAxis : [
				        {
				            type : 'category',
				            splitLine:{show:false},
				            data : ['第一','第二','第三','第四'],/*类型名称  */
				            axisLabel:{
		                        interval: 0 ,
		                        rotate:40
		                    }/* Y轴的字体倾斜40度角 */
				        }
				    ],
				    series : [
				       
				        {
				            name:'',
				            type:'bar',
				            itemStyle:{
	                            normal:{
	                                color:'#4ad2ff'
	                                   }
	                           },
	                          /*  barWidth:30, */
				            data:[1,2,3,4]/*类型的数量  */
				        }
				    ]
				};
			//加载数据
			myChart.setOption(option);
    </script>
</body>

在这里插入图片描述
颜色对应表：
http://www.360doc.com/content/13/1120/12/14695328_330723062.shtml

在这里插入图片描述

Qfbly_01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts

EchartsEcharts柱形图Echarts柱形图<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts-demo-柱形图</title><script src="http://echarts.baidu.com/build/dist/echarts-all...
复制链接

扫一扫