实训，掌握堆积柱状图，标注条形图，瀑布图，饼图，环形图

于 2024-03-18 20:46:47 发布
阅读量713 收藏 9
点赞数 16
文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z912631832/article/details/136818779
版权
文章详细描述了如何在HTML中使用Echarts.js库分别创建堆积柱状图、标准条形图、瀑布图和饼图以及环形图，包括各自文件中的代码示例和配置选项。
摘要由CSDN通过智能技术生成

1.绘制堆积柱状图。首先，在 stackBar.html 文件中引入 echarts.js 库文件。其次，准备一个具备大小（weight 与height）的 div 容器，并使用 init()方法初始化容器。最后设置堆积柱状图的配置项、“性别”与“年龄”数据完成标准条形图绘制。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <title></title> 
    </head>
    <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { 
                    type: 'shadow' 
                }
            },
            legend: {
                data: ['男', '女']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: ['20-29岁', '30-39岁', '40-49岁']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '男',
                    type: 'bar',
                    stack: '年龄段', 
                    data: [7, 5, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段', 
                    data: [6, 3, 3]
                },
            ]
        };

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

2.绘制标准条形图。首先，在 standBar.html 文件中引入 echartsjs 库文件。其次，准备一个具备大小（weight 与 height）的div 容器，并使用 initO方法初始化容器。最后设置标准条形图的配置项、“性别”与“入会方式”数据完成堆积柱状图绘制。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '它是主标题',
                subtext: '它是副标题',
            },
            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 },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value', 
                    boundaryGap: [0, 0.1],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['节日活动', '自愿', '网络推广', '团购'],
                },
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
          label: { 
            show: true, 
            rotate: 60, 
            position: 'top' 
          },
          barWidth: '30%', 
                    data: [3, 2, 5, 4],
                },
                {
                    name: '女',
                    type: 'bar',
          label: { 
            show: true, 
            rotate: 60, 
            position: 'top' 
          },
          barWidth: '30%', 
                    data: [3, 2, 5, 2],
                },
            ],
        };
        myChart.setOption(option);
    </script>
</body>
</html>


3.绘制瀑布图。首先，在 falls.html 文件中引入 echartsjs 库文件。其次，准备一个具备大小（weight 与 height）的div 容器，并使用 initO方法初始化容器。最后设置瀑布图的配置项、"城市"与“购买总金额”数据完成瀑布图绘制。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <title></title> 
    </head>
    <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option ={
            title:{
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题'
            },
            xAxis: {
                type: 'category',
                data: ['总数','广东', '深圳', '佛山', '东莞']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0, 3200, 1400, 500, 0]
    },
    {
      name: 'Life Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [6200, 3000, 1800, 900,500]
    }]
         };

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

4. 绘制饼图。首先，在 pie.html 文件中引入 echarts.js 库文件。其次，准备一个具备大小（weight 与height）的div 容器，并使用init()方法初始化容器。最后设置饼图的配置项和“入会方式”数据完成饼图绘制。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
 
        <title></title>
    </head>
    <body> 
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option ={
        		 title: {
                    text:'这里是绘制的图表的标题',
                    subtext:'这里是副标题'                   
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 legend: {
                     data: ['招聘', '挣钱','自愿','兴趣'],
                     bottom:0
                 },
                 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,
            	series: [
            		{          
 					name:'入会渠道',
                    type:'pie',
                    radius:'66%',
                    center:['58%','55%'],
                    colockWise:true,
                    data:[
                        { value: 20, name: '招聘' },
                        { value: 65, name: '挣钱' },
                        { value: 10, name: '自愿' },
                        { value: 15, name: '兴趣' },
                    ]
                }
            ]
                 	
        };
 	
 
 
 
        // 使用刚指定的配置项和数据显示图表。
 
        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>


5.绘制环形图。首先，在 circular:html 文件中引入 echarts.js 库文件。其次，准备一个具备大小（weight 与height）的div 容器，并使用 initO方法初始化容器。最后设置环形图的配置项和“入会方式”数据完成环形图绘制。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
 
        <title></title>
    </head>
    <body> 
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option ={
        		 title: {
                    text:'这里是绘制的图表的标题',
                    subtext:'这里是副标题'                   
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 legend: {
                     data: ['招聘', '挣钱','自愿','兴趣'],
                     bottom:0
                 },
                 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,
            	series: [
            		{          
 					name:'入会渠道',
                    type:'pie',
                    radius:['30%','70%'],
                    center:['58%','55%'],
                    colockWise:true,
                    data:[
                        { value: 20, name: '招聘' },
                        { value: 65, name: '挣钱' },
                        { value: 10, name: '自愿' },
                        { value: 15, name: '兴趣' },
                    ]
                }
            ]
                 	
        };
 	
 
 
 
        // 使用刚指定的配置项和数据显示图表。
 
        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>

啊啊啊脑子要没了
关注
  • 16
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可视化绘图技巧100篇基础篇（二）-柱状图
getusushu的博客
08-13 356
基础柱状图，使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。柱状图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中【有多少？】这个问题。需要注意的是，当柱状图显示的分类很多时会导致分类名层叠等显示问题。所谓自定义柱形图，本质上仍是柱形图，只是在某些场景下，如发布会， 我们需要在图形展示上下些功夫，如下图：1、将子类别拖到行，销售额拖两次到列2、点击右侧的销售额，选择双轴。
ECharts之阶梯瀑布柱状图
关注最新技术问题并持续维护更新
11-25 6576
效果图 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router' import store f...
Python Pygal常见数据图（折线图、柱状图、饼图、点图、仪表图和雷达图）详解
人生苦短， 还不用Python？
07-01 5008
Pygal 同样支持各种不同的数据图，比如饼图、折线图等。Pygal 的设计很好，不管是创建哪种数据图，Pygal 的创建方式基本是一样的，都是先创建对应的数据图对象，然后添加数据，最后对数据图进行配置。因此，使用 Pygal 生成数据图是比较简单的。 折线图 折线图与柱状图很像，它们只是表现数据的方式不同，柱状图使用条柱代表数据，而折线图则使用折线点来代表数据。因此，生成折线图的方式与生成柱...
掌握堆积柱状图、标准条形图、瀑布图、饼图以及环形图的绘制
2302_81169928的博客
03-18 446
先在VS Code中依次创建3个.html文件，分别为stackBar.html、standBar.html和falls.html。2，准备一个具备大小（weight和height）的div容器，并使用init()方法初始化容器。2，准备一个具备大小（weight和height）的div容器，并使用init()方法初始化容器。2，准备一个具备大小（weight和height）的div容器，并使用init()方法初始化容器。3,设置堆积图的配置项、“性别”与“年龄”数据。3,设置瀑布图的配置项及数据。
pyecharts-动态可视化（2） 柱状图 时间轴/折线/堆叠/水印/瀑布图
热门推荐
vv_eve的博客
07-22 1万+
在制作柱状图可能会遇到的问题，对于必要的代码已经做了注释，用的V1版本。 - 弹跳动画+水平线标注+点点标注 - 加入了时间轴的柱状图 - 水平线/圈选/切换柱状图、折线、堆叠 - 混合柱状和折线 - 部分堆叠+打水印 - 堆叠柱状图 - 旋转x轴、y轴标签 - 瀑布图
地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型
rp原型聚集地
08-13 1579
地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、瀑布图、气泡图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型、大屏设计必备组件 Axure原型演示及下载地址：https://www.pmdaniu.com/storages/126954/55abdda77085f529284f97eb51f7a944-114945/start.html#g=1&p=%E6%8A%98%E7%BA%BF%EF%BC%88%E9%9D%A2.
蜡烛图plotly_Plotly 绘图模块中文指南第1期
weixin_29732737的博客
12-29 785
【实例简介】Plotly 绘图模块中文指南第1期z开源量化系列课件www.zlwang.com刚开始接触Pot∨?l■■1■D■■1■口简单气泡图设置标记大小和颜色…气泡图中的悬浮文本1419可缩放尺寸的气泡图11■1_1B11111日m■11日_1B面■11150带颜色的气泡图52分类气泡图53参考56线条图■L■1日1DDD1DD11a1D_1,56简单的折线图.56设置划线模式.57设置画线...
Origin：科研绘图与学术图表绘制从入门到精通
程序边界
11-14 1万+
通过本文的介绍，您已经了解了如何使用Origin进行科研绘图和学术图表绘制从入门到精通的步骤和方法。持续学习和实践：Origin是一个不断更新和发展的软件，持续学习和实践是掌握它的关键。关注官方网站、社区和教程，了解新的功能和技巧，并尝试应用到实际项目中。参与社区和讨论：加入Origin的社区和讨论群体，与其他用户交流和分享经验。通过参与社区和讨论，您可以获得很多有用的建议和技巧，以及解决遇到的问题。
是Excel的图，不！是R的图
悟道西方
09-16 510
原文章来源链接：https://brucezhaor.github.io/blog/2016/06/13/excel2ggplot/ 原文章作者：BruceZhaoR(RStats, interested in Statistics Models, Machine/Deep Learning, Data visualization, High Performance Computing ...) ...
axure 图表 柱状图 饼图 线性图 元件库 组件库
10-06
同时，Axure还支持多种柱状图样式，如堆积柱状图、并列柱状图和百分比柱状图，以满足不同的设计需求。 饼图则是一种展示部分与整体关系的图形，适用于表示各部分占总体的比例。在Axure的饼图元件中，用户可以设定...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
Axure动态图表+折线图+饼图+柱状图
10-28
Axure动态图表+折线图+饼图+柱状图； 饼状图、柱状图、折线图含交互动画； 软件版本：Axure8.1（兼容Axure9、Axure10）
echarts柱状图饼图折线图.zip
07-31
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及散点图等，适用于各类Web数据展示场景。本压缩包“echarts柱状图饼图折线图.zip”包含了一些关于...
WPF饼图柱状图.zip
01-04
WPF提供了丰富的图形系统、数据绑定、媒体支持以及多种图表控件，其中包括饼图和柱状图。这两种图表是数据可视化中常用的工具，能够帮助用户直观地理解数据分布和比例关系。 饼图在WPF中通常用于展示数据的部分与...
计算机监测与维护实习研究报告.doc
07-18
计算机
110N10F7-VB一种N-Channel沟道TO220封装MOS管
最新发布
07-18
110N10F7-VB；Package：TO220；Configuration：Single-N-Channel；VDS：100V；VGS：20（±V）；Vth：3V；RDS(ON)=5mΩ@VGS=10V；ID：120A；Technology：Trench；
《单片机原理与接口技术》--试卷A及参考答案.doc
07-18
单片机
数字疗法产业发展白皮书202364页.pdf
07-18
数字疗法产业发展白皮书202364页
"JavaFX图形教程：饼图、折线图、区域图、散点图、条形图、气泡图详解
JavaFX图形教程涵盖了多种类型的图形，如饼图、折线图、区域图、散点图、条形图和气泡图。其中，饼图是一种用于表示圆圈中数据的图表，每个切片代表不同的百分比。以下是一个JavaFX图饼图的示例代码： ```java ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值