来瞅瞅：条形图、柱状图与折线图有什么不同

狙击hh

已于 2024-03-11 21:23:20 修改

阅读量1.3k

点赞数 8

文章标签： python 信息可视化开发语言

于 2024-03-11 21:01:37 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/2403_83177329/article/details/136634206

版权

本文详细介绍了ECharts中折线图和条形图的特点、常见效果以及实例，包括如何展示数据的变化趋势、最大值、最小值和平均值，并通过实例展示了如何在人流量统计中使用这两种图表类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

一、折线图

2、常见效果：

5、效果显示图：

二、条形图

1、普通柱状图

2、条形图：

3、柱状图与条形图的区别：

三、折线图与条形图区别

一、折线图

1、特点：

通常用来分析数据随着时间的变化趋势

2、常见效果：

最大值最小值平均值

markPoint 标注一个点

markLine 标注一个线

4、实例

必须包含四个值，需要包含标题最大值最小值平均值 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:'某一周人流量统计',
                textStyle:{
                    color:'red',
                }
            },
            toolip:{
                tigger:'axis',
            },
            toolbox:{
				show:true,
				feature: {
	                mark: { show: true },
	                dataView: { show: true, readOnly: false },
	                magicType: { show: true, type: ['line', 'bar'] },
	                restore: { show: true },
	                saveAsImage: { show: true },
	         	},
			},
		    calculable: true,
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
        
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
                }
            ]
            };
            
                     
          

        myChart.setOption(option);
    </script>
</body>

</html>

5、效果显示图：

二、条形图

1、普通柱状图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

效果图：

2、条形图：

<!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>
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title:{
                text:'某一周人流量统计',
                textStyle:{
                    color:'red',
                }
            },
            toolip:{
                tigger:'axis',
            },
            toolbox:{
				show:true,
				feature: {
	                mark: { show: true },
	                dataView: { show: true, readOnly: false },
	                magicType: { show: true, type: ['line', 'bar'] },
	                restore: { show: true },
	                saveAsImage: { show: true },
	         	},
			},
		    calculable: true,
            xAxis: {
                type: 'value',
            },
            yAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [
                {
                    markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
        
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'bar',
                }
            ]
            };
            
                     
          
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

效果图：

三、柱状图与条形图的区别：

柱状图：y轴数据按照要求格式化显示

xAxis: {type: 'category'}，yAxis: {type: 'value'},

条形图：x轴数据按照要求格式化显示

xAxis: {type: 'value' }，yAxis: {type: 'category'}

四、折线图与条形图区别

折线图： type: 'line'

条形图：type: 'bar'

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。