版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuoganliwanjin/article/details/85060756
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Amchart-漏斗图</title>
<style>
#chartdiv {
width: 100%;
max-height: 600px;
height: 100vh;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script>
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.SlicedChart);
chart.data = [{
"name": "The first",
"value": 600
}, {
"name": "The second",
"value": 300
}, {
"name": "The third",
"value": 200
}, {
"name": "The fourth",
"value": 180
}, {
"name": "The fifth",
"value": 50
}, {
"name": "The sixth",
"value": 20
}, {
"name": "The seventh",
"value": 10
}];
var series = chart.series.push(new am4charts.FunnelSeries());
series.colors.step = 2;
series.dataFields.value = "value";
series.dataFields.category = "name";
series.alignLabels = true;
series.orientation = "horizontal";
series.bottomRatio = 1;
series.labelsContainer.height = 150;
chart.legend = new am4charts.Legend();
chart.legend.position = "absolute";
chart.legend.parent = chart.chartContainer;
chart.legend.contentAlign = "right";
</script>
</body>
</html>