amcharts实现环形饼状图图表效果-html代码-BFW代码库

amcharts实现环形饼状图图表效果

代码语言：html

所属分类：图表

代码描述：amcharts实现环形饼状图图表效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

.amcharts-pie-slice {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition-duration: 0.3s;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  cursor: pointer;
  box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
  transform: scale(1.1);
  filter: url(#shadow);
}
</style>

</head>
<body>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-pie.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script>
<div id="chartdiv"></div>

<script>
var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "colors": ["#f37a4e", "#ea1162", "#19B278", "#3CBEC5", "#F6A85A", "#F1768B"],
  "startDuration": 1,
  "theme": "light",
  "addClassNames": true,
  "legend": {
    "position": "right",
    "marginRight": 100,
    "autoMargins": false },

  "innerRadius": "80%",
  "defs": {
    "filter": [{
      "id": "shadow",
      "width": "200%",
      "height": "200%",
      "feOffset": {
        "result&qu.........完整代码请登录后点击上方下载按钮下载查看