您的位置：首页 > 其它

Amchart（十一）3D圆环图

2018-12-18 09:30 113 查看

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Amchart-3D圆环图</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.PieChart);
chart.data = [{
"country": "Lithuania",
"value": 401
}, {
"country": "Czech Republic",
"value": 300
}, {
"country": "Ireland",
"value": 200
}, {
"country": "Germany",
"value": 165
}, {
"country": "Australia",
"value": 139
}, {
"country": "Austria",
"value": 128
}];

chart.innerRadius = am4core.percent(50);

var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.category = "country";

series.slices.template.cornerRadius = 10;
series.slices.template.innerCornerRadius = 7;

// this creates initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

chart.legend = new am4charts.Legend();
</script>
</body>
</html>

Amchart全部示例 github地址别忘了点个小星星

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航