ECharts瀑布图

摸摸小油头.

已于 2023-05-11 11:00:44 修改

阅读量358

点赞数

分类专栏：大数据可视化文章标签： echarts javascript ecmascript

于 2023-04-01 17:29:14 首次发布

本文链接：https://blog.csdn.net/weixin_64272885/article/details/129900222

版权

大数据可视化专栏收录该内容

10 篇文章 1 订阅

订阅专栏

效果图：

具体代码：

<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瀑布图

瀑布图
复制链接

扫一扫

专栏目录