ECharts瀑布图

已于 2023-05-11 11:00:44 修改
阅读量344 收藏 2
点赞数
分类专栏： 大数据可视化 文章标签： echarts javascript ecmascript
于 2023-04-01 17:29:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64272885/article/details/129900222
版权

效果图：

fba4f5e610cd4f708d8ea900223a4700.png

 具体代码：

<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>
 </head>
 <body>
  <div id="main" style="width: 800px;height: 400px;"></div>
  <script type="text/javascript">
   var myChart=echarts.init(document.getElementById("main"));
   var option = {
	   color:'#f5ceff',

    tooltip: {
     trigger: 'axis',
     axisPointer: {
       type: 'shadow'
     },
    },
    grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
    },
    xAxis: {
     type: 'category',
     splitLine: { show: false },
     data: ['1', '2', '3', '4', '5', '6']
    },
    yAxis: {
     type: 'value'
    },
    series: [
     {
       name: 'Placeholder',
       type: 'bar',
       stack: 'Total',  //瀑布图的形式
       itemStyle: {
      borderColor: 'transparent',
      color: 'transparent'  //透明
       },
       emphasis: {
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      }
       },
       data: [0, 17, 14, 12, 3, 0]
     },
     {
       name: 'Life Cost',
       type: 'bar',
       stack: 'Total',
       label: {
      show: true,
      position: 'inside'
       },
       data: [29, 12, 3, 2, 9, 3]
     }
      ]
    };
    myChart.setOption(option);
  </script>
 </body>
</html>

想要使用该图表,只需要  复制以上代码 

 引入 ECharts 文件可以用上面代码中的方法

<script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>


也可以下载 echarts.js  在页面文件中引入即可. 

echarts.js 下载链接:    http://echarts.baidu.com/download.html
 

摸摸小油头.
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用echarts绘制瀑布图
dongdouzin的博客
06-16 4594
瀑布图其实是柱状图的一种特例。瀑布图的核心是按照维度/指标分解，如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解。相对于饼图，瀑布图的优势在于：拆解项较多时，瀑布图通过数字的标记仍可清晰辨识，而饼图在分解项大于5时会不易辨别。 利用深圳月最低生活费组成数据绘制瀑布图，如图所示 绘制瀑布图与一般柱状图的代码差别不大，最为关键的代码是itemStyle代码块。itemStyle代码块设置了柱子堆叠部分或堆叠部分边框的颜色，将每根柱子堆叠部分的颜色设置为透明色。 如果需要将颜色设置成不透明，
基础从0实现echarts瀑布图
最新发布
weixin_45781685的博客
05-10 606
本文函数中返回的内容为series值，如有疑问欢迎打扰。
hellocharts绘制瀑布图（雨图）
01-26
用hellocharts绘制频谱谱图，图可以动态刷新
echarts 瀑布图（简单的k线图）
yusun1234的博客
05-07 1142
准备数据 // xianZhongFallList：[13.47, 0.11, 0.02, 0.42, 0.63, 0.59, -0.47, 0.39] // xianZhongFallXxais：['行业增速', '家用交强件数影响', '家用交强件均影响', '家用商业件数影响', '家用商业件均影响', '商用件数影响', '商用件均影响', '结构影响', '主体增速'] 主要在于先处理数据， pageInit1() { var echarts = this.$echar.
ECharts之阶梯瀑布柱状图
关注最新技术问题并持续维护更新
11-25 6554
效果图 背景图片 下载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...
时域、频域、轴心轨迹、瀑布图等功能
07-03
说明：??轴系测试程序，多通道输入输出，实现时域、频域、轴心轨迹、瀑布图等功能。 (Shafting test program, multi-channel input and output, to achieve time domain, frequency domain, orbit, waterfall and other functions.)
web数据可视化(Echarts版)2-10瀑布图(代码仅供参考)
m0_63471474的博客
05-17 322
【代码】web数据可视化(Echarts版)2-10瀑布图(代码仅供参考)
JavaScript特效图片瀑布流
01-03
使用HTML、JavaScript实现使用图片瀑布流。基本思想：第一行位置固定，下一行每一张图片添加到上一行最矮的图片之后
图片瀑布流 jquery
02-24
图片瀑布流 jquery 图片瀑布流 jquery图片瀑布流 jquery图片瀑布流 jquery
Bmob图片瀑布流
04-26
该代码实现了从Bmob服务器获取图片，并且以瀑布流的形式呈现。具体可参考博客：http://blog.csdn.net/xuanwo11/article/details/52557447
图片瀑布流
07-02
android 图片瀑布流 现在可以显示 没有解决错位的问题 我在优化
py画瀑布图
05-31
利用python画瀑布图，瀑布图是由麦肯锡顾问公司所独创的图表类型，因为形似瀑布流水而称之为瀑布图(Waterfall Plot)。此种图表采用绝对值与相对值结合的方式，适用于表达数个特定数值之间的数量变化关系。应用场景：1.解释两个数据值之间的差异是由哪几个因素贡献，每个因素的贡献比例，展示两个数据值之间的演变过程。 举个例子，某网站一月份订单成交额为103万元，二月份121万元（较一月增加18万元），三月份131万元（较二月增加10万元），四月份127万元（较三月减少4万元），五月份152万元（较四月增加125万元），六月份176万元（较五月增加24万元），用瀑布图清晰看到近半年的数据加减关系。 2.两个及以上的数据点之间数量的演变过程时，并最终形成累计值。 举个例子，某企业想了解全年具体的收入、成本分布情况，图表如下，绿色为收入（分产品收入800K，服务收入300K），红色为成本（折扣成本90K，工资性支出300K，航运支出100K），蓝色为全年的总收益（600K）。
瀑布图代码示例
ovehan的博客
03-19 673
echarts没有直接提供瀑布图这一种图表，但是可以通过柱状图的堆叠属性stack配合样式itemStyle来实现 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="./echarts4.7.0.
echarts瀑布图_ECharts · Example
weixin_35514865的博客
01-17 804
optionoption = {title: {text: '深圳月最低生活费组成(单位:元)',subtext: 'From ExcelHome',sublink: 'http://e.weibo.com/1341556070/AjQH99che'},tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效ty...
echarts 阶梯瀑布图数据计算方式
咕咚在否的博客
02-21 2070
echarts 阶梯瀑布图三组柱子数据计算方式
44Echarts - 柱状图（阶梯瀑布图）
阿甘兄
04-30 8762
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
Echarts 阶梯瀑布图 从负数增长到正数 和 从正数减少到负数 效果实现
杨杨吖的博客
08-14 1552
当要求从-30增长60到30时候，这个瀑布图如何实现？主要思路就是：一列展示用两个bar柱状图来展示！
VUE3 ECharts 实现阶梯瀑布图（附源码和效果）
g841805的博客
03-20 412
【代码】VUE3 ECharts 实现阶梯瀑布图（附源码和效果）
Echarts 阶梯瀑布图实现从正数跨到负数，以及负数跨到正数
KentKun的博客
06-12 745
Echarts 阶梯瀑布图实现从正数跨到负数
echarts瀑布图
07-28
Echarts瀑布图是一种特殊的柱状图，用于展示数据的分解和变化情况。瀑布图通过按照维度/指标分解数据，如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解等，来展示数据的变化过程。相对于饼图，瀑布图的优势在于可以清晰辨识拆解项，即使拆解项较多时也不会造成混淆。\[1\] 要绘制Echarts瀑布图，可以使用pyecharts库。首先，需要安装pyecharts库，可以使用pip install pyecharts命令进行安装。然后，可以使用虚拟数据来绘制瀑布图。例如，假设你是一个老板，想要展示2023年公司的总人数、招聘人数和离职人数的变化情况。可以使用Bar类来创建瀑布图，并设置相应的数据和样式。\[2\]\[3\] 以下是一个使用pyecharts库绘制瀑布图的示例代码： ```python from pyecharts.charts import Bar from pyecharts import options as opts # 数据 month = \['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'\] fixed = \[48, 42, 42, 48, 58, 61, 61, 58, 58, 63, 67, 66\] add = \['-', '-', 6, 10, 5, '-', 4, '-', 5, 6, '-', '-'\] reduce = \[2, 6, '-', '-', '-', 2, '-', 7, '-', '-', 2, 1\] # 创建瀑布图对象 bar = Bar() # 添加数据 bar.add_xaxis(month) bar.add_yaxis('各月稳定人数', y_axis=fixed, category_gap=2, stack="人数", itemstyle_opts=opts.ItemStyleOpts(color="rgb(240,240,240)")) bar.add_yaxis('各月增加人数', y_axis=add, stack='人数', category_gap=2) bar.add_yaxis('各月减少人数', y_axis=reduce, stack='人数', category_gap=2) # 设置全局配置 bar.set_global_opts( xaxis_opts=opts.AxisOpts( axislabel_opts=opts.LabelOpts(font_size=8, color='green', font_weight='bolder') ), yaxis_opts=opts.AxisOpts( axislabel_opts=opts.LabelOpts(font_size=10, color='blue', font_weight='bolder') ) ) # 渲染图表 bar.render('people_total_waterfall.html') ``` 以上代码中，我们使用Bar类创建了一个瀑布图对象，并通过add_xaxis和add_yaxis方法添加了数据。然后，使用set_global_opts方法设置了x轴和y轴的样式。最后，使用render方法将图表渲染为HTML文件。 请注意，以上示例中的数据和样式仅供参考，你可以根据自己的需求进行修改和调整。 #### 引用[.reference_title] - *1* [用echarts绘制瀑布图](https://blog.csdn.net/dongdouzin/article/details/117949890)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [循序渐进，学会用pyecharts绘制瀑布图](https://blog.csdn.net/weixin_43790276/article/details/130252095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值