你真的了解柱状图和条形图吗？快来看看吧（看不了吃亏，看不了上当）—数据可视化

最新推荐文章于 2024-03-12 15:23:43 发布

大数据三班罗健

最新推荐文章于 2024-03-12 15:23:43 发布

阅读量2.6k

点赞数 25

分类专栏：数据可视化可视化实战文章标签：信息可视化

本文链接：https://blog.csdn.net/2301_80975885/article/details/136636654

版权

数据可视化同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

可视化实战

1 篇文章 0 订阅

订阅专栏

本文介绍了柱状图和条形图的区别，以及如何在Vis中使用echarts.js实现它们，包括配置项、代码示例和X轴Y轴的调整。

摘要由CSDN通过智能技术生成

1.了解柱状图与条形图

条形图和柱状图表达的数据的形式基本相同，不过区别还是有的

1，条形图由于是横向的，所以更适合用于一些类别名称比较长的数据，这样就可以显示完整，而柱状图会因为太长变成45度显示，或是省略部分内容，影响美观。

2，条形图可以做成横向的旋风图，进行对比，很漂亮，也比较直观。柱状图不行。

3，柱状图可以与折线图配合次坐标轴，做成复合型图表，条形图在这点上想实现比较费力。

4，最后就是影响都不大是，根据放置图表的区域形状，选择美观大方的就可以了！

2.Vis安装和应用可看前面博客数据可视化应用与安装-CSDN博客

3.柱状图怎么在vis里实现的，和代码含义

步骤1：引入echarts.js文件

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

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

步骤4：准备配置项

1）设置标题

2）设置动态触发器

3）设置图列组件

4)编辑触发效果

5)定义x轴和y轴

6)定义英语项

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

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

9）再定义一组语文步骤与其上一致

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

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

4.柱状图实现代码：

<!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: '期末考试'
            },
            tooltip: {  //触发
                trigger:'axis',
            },
            legend: {
                data: ['英语','语文'],
            },
            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:"英语",
                type:'bar', //图表类型
                data:[99,54,110,115,100],
                markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
            
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
      {
				name:"语文",
                type:'bar', //图表类型
                data:[80,120,90,108,105],
                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>

5.柱状图怎么在vis里实现

因为，已知条形图和柱状图表达的数据的形式基本相同，但是他们的X轴和Y轴显示方式相反所以我们实现条状图就是要把X轴和Y轴的定义相换即可，即：

1）条状图和柱状图定义XY轴的区别

条状图

对比：

柱状图

6.所以条状图实现代码为：

<!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: '期末考试'
            },
            tooltip: {  //触发
                trigger:'axis',
            },
            legend: {
                data: ['英语','语文'],
            },
            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,
			yAxis:{ //定义Y轴
                type:'category', //定义类目轴
                data:['小明','小红','小王','小绿','小粉']//定义类目项
			},
            xAxis:{  //定义X轴
             type:'value', //定义数值轴
             boundaryGap:[0,0.01] //定义坐标轴两边留白 
            },
			series:[{
				name:"英语",
                type:'bar', //图表类型
                data:[99,54,110,115,100],
                markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
            
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
      {
				name:"语文",
                type:'bar', //图表类型
                data:[80,120,90,108,105],
                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>