瀑布图代码示例

最新推荐文章于 2023-10-02 16:09:27 发布

「已注销」

最新推荐文章于 2023-10-02 16:09:27 发布

阅读量737

点赞数

文章标签： echarts js

本文链接：https://blog.csdn.net/ovehan/article/details/115009996

版权

本文介绍了如何通过ECharts的柱状图堆叠属性和样式设置，实现瀑布图效果，详细代码参考链接已给出。

摘要由CSDN通过智能技术生成

echarts没有直接提供瀑布图这一种图表，但是可以通过柱状图的堆叠属性stack配合样式itemStyle来实现

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts4.7.0.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
echarts没有直接提供瀑布图这一种图表，但是可以通过柱状图的堆叠属性stack配合样式itemStyle来实现
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  var option;
  option = {
    // echart标题配置项
    title: {
      text: '阶梯瀑布图',
      subtext: 'From ExcelHome',
      sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
    },
    // 提示浮窗配置项
    tooltip: