crush突然朝我爆金币竟是为了....

最新推荐文章于 2024-05-21 17:20:39 发布

和小猫的下雨天

最新推荐文章于 2024-05-21 17:20:39 发布

阅读量655

点赞数 20

文章标签：信息可视化

本文链接：https://blog.csdn.net/2403_83182454/article/details/136651995

版权

条形图和柱状图是常用的数据可视化工具，

用于比较不同类别或组之间的数据大小或变化趋势。

它们在统计学、商业分析和科学研究等领域广泛应用。

条形图和柱状图是常用的数据可视化工具，用于比较不同类别或组之间的数据大小或变化趋势。它们在统计学、商业分析和科学研究等领域广泛应用。

柱状图

柱状图最常见，它利用柱子高度，反映数据的差异。

横轴代表比较的类别，纵轴代表类别对应的刻度值。

要显示数据的分布特征，或要表示同一件事物在不同期间的变化情况，就要选择柱形图。

条形图

条形图其实是柱形图的旋转图表，又称横向柱形图。

它用条形长短来观察各种信息的大小，比较各种数值或比例。

柱状图的实现及代码：

步骤一：引入echarts.js文件

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

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

步骤四：准备配置项

1.设置标题

2.设置动态触发器

3.设置图例组件

4.编辑触发效果

5.定义x轴和y轴

6.定义11月项

7.设置标记最大值，最小值和平均值

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

9.再定义一个月步骤与上面一致

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

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

柱状图实现代码：

<!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: ['11月','12月'],
            },
            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:"11月",
                type:'bar', //图表类型
                data:[321,121,566,410,519],
                markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
            
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
      {
				name:"12月",
                type:'bar', //图表类型
                data:[186,371,547,488,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>

效果图：

条形图的实现及代码：

条形图和柱状图表达数据的形式差不多，但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: ['11月','12月'],
            },
            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:"11月",
                type:'bar', //图表类型
                data:[321,121,566,410,519],
                markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
            
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
      {
				name:"12月",
                type:'bar', //图表类型
                data:[186,371,547,488,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>

效果图：

和小猫的下雨天

关注

20
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
crush突然朝我爆金币竟是为了....

条形图和柱状图表达数据的形式差不多，但x轴和y轴显示方式相反，所以条形图只需将其对调。要显示数据的分布特征，或要表示同一件事物在不同期间的变化情况，就要选择柱形图。它用条形长短来观察各种信息的大小，比较各种数值或比例。柱状图最常见，它利用柱子高度，反映数据的差异。横轴代表比较的类别，纵轴代表类别对应的刻度值。条形图其实是柱形图的旋转图表，又称横向柱形图。步骤五：将配置项设置给echarts实例对象。8.设置柱状图的文字和大小的显示。使用刚指定的配置项和数据显示图表。步骤二：准备一个呈现图表的盒子。
复制链接

扫一扫