了解柱状图和条形图

yu:

已于 2024-03-12 15:26:36 修改

阅读量2k

点赞数 19

文章标签：信息可视化数据分析数据挖掘

于 2024-03-12 15:23:43 首次发布

本文链接：https://blog.csdn.net/W_051/article/details/136650722

版权

四、Vis安装和应用可看前面文章可视化应用与安装-CSDN博客

步骤5：将配置项设置给echarts实例对象

了解柱状图和条形图

一、什么是柱状图

1.柱状图是一种常见的统计图表，用于展示不同类别或组之间的数量或频率的比较。它由一系列垂直的矩形条组成，每个矩形条的高度表示相应类别或组的数值大小。柱状图通常用于呈现离散数据，例如不同城市的人口数量、不同产品的销售量等。

2.柱状图的特点是直观、易于理解和比较。它可以帮助我们快速分析数据的分布情况，找出数据中的规律和趋势。柱状图通常包括横轴和纵轴，横轴表示不同的类别或组，纵轴表示数量或频率。每个矩形条的宽度可以相同或不同，但高度代表的数值大小是不同的。

3.柱状图可以通过不同的颜色或阴影来区分不同的类别或组，也可以添加数据标签或图例来提供更详细的信息。在解读柱状图时，我们可以比较不同类别或组之间的高度差异，找出最大值、最小值和趋势变化等。

二、什么是条形图

1.条形图是一种常用的数据可视化方式，用展示不同类别或组之间的比较。它通过长方形的长度来表示数据的大小或数量。每个长方形代表一个类别或组，其高度表示该类别或组的数值大小。

2.条形图通常由两个轴组成：水平轴和垂直轴。水平轴通常表示类别或组，垂直轴表示数值。每个长方形的宽度可以相同或不同，但高度与数据的大小成比例。

3.条形图可以用于比较不同类别或组之间的数据差异，也可以用于显示时间序列数据的变化趋势。它可以直观地展示数据的分布情况，帮助人们更好地理解和分析数据。

三、柱状图和条形图的联系

1.联系：

两者均是两个字段，一个代表分类，另一个代表数值。

当数据的记录数不大于12条，分类字段的字符长度小于5时，两者可以互换。

2.区别：

柱状图：如果分类字段时时间序列，可以优先使用柱状图，能更好的体现数据随着时间变化的情况。

条形图：如果分类字段字符长度较长，且数据的记录数大于12，建立用条形图。

四、Vis安装和应用可看前面文章可视化应用与安装-CSDN博客

五、柱状图实现及代码含义

步骤1：引入echarts.js文件

步骤2：准备一个呈现图表的盒子

步骤3：初始化echarts实例对象

步骤4：准备配置项

1）设置标题

2）设置动态触发器

3）设置图列组件

4)编辑触发效果

5)定义x轴和y轴

6)定义7月项

7）设置标记最大值，最小值，还有平均值

8）设置柱状图的文字和大小的显示

9）再定义一组8月项与其上一致

步骤5：将配置项设置给echarts实例对象

使用刚指定的配置项和数据显示图表

六、条形图实现

条形图和柱状图表达的数据的形式基本相同，只需把X轴和Y轴的定义相换即可：

对比：

条状图

柱状图

七、代码实现

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js/echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
            title: {  //定义标题
                text: '月销量对比',
                subtext:'饮品月销量'
            },
            tooltip: {  //触发
                trigger:'axis',
            },
            legend: {
                data: ['7月','8月'],
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar']},
                    restore:{show:true},
                    saveAsImage:{show:true},
 
                },
            },
            calaulable:true,
			xAxis:{ //定义x轴
                type:'category', //定义类目轴
                data:['娃哈哈','雪碧','可乐','牛奶','绿茶']//定义类目项
			},
            yAxis:{  //定义y轴
             type:'value', //定义数值轴
             boundaryGap:[0,0.01] //定义坐标轴两边留白 
            },
			series:[{
				name:"7月",
                type:'bar', //图表类型
                data:[430,356,401,366,280],
                markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
            
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
      {
				name:"8月",
                type:'bar', //图表类型
                data:[520,371,481,324,310],
                markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
            
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},
      
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>