D3 Partition Layout

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<div id="main" style="height:600px;"></div>

CSS

.chart {
  display: block;
  margin: auto;
  margin-top: 60px;
  font-size: 11px;
}

rect {
  stroke: #eee;
  fill: #aaa;
  fill-opacity: .8;
}

rect.parent {
  cursor: pointer;
  fill: steelblue;
}

text {
  pointer-events: none;
}

JavaScript

var options = {
  title: {
    textStyle: {
      align: 'center',
      color: '#fff',
      fontSize: 20,
    },
    top: '3%',
    left: '10%',
  },
  grid: {
    top: "25%",
    bottom: "10%" //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        show: true
      }
    }
  },
  legend: {
    data: ["Critical", "Major", "Minor"],
    top: "15%",
    textStyle: {
      color: "#000000"
    }
  },
  xAxis: {
    data: [
      "All",
      "Active",
      "Actionable",

    ],
    axisLine: {
      show: true,
    },
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true
    },

  },
  yAxis: [{
    type: "value",
    splitLine: {
      show: false
    },
    axisTick: {
      show: true
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      show: true
    },

  }],
  series: [{
      type: "line",
      name: "Critical",
      smooth: false,
      lineStyle: {
        color: "transparent"
      },
      stack: "b",
      data: [10, 5, 3],
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [{
                offset: 0,
                color: "rgba(226,24,28,0.7)"
              },
              {
                offset: 1,
                color: "rgba(226,24,28,0.2)"
              }
            ],
            false
          ),
          shadowColor: "rgba(226,24,28, 0.9)",
          shadowBlur: 20,
          label: {
            show: false,
            textStyle: {
              fontSize: 10
            }
          }
        }
      }
    },
    {
      type: "line",
      name: "Major",
      smooth: false,
      stack: "b",
      data: [10, 5, 3],
      lineStyle: {
        color: "transparent"
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
      ...