Amchart 报表入手

2019独角兽企业重金招聘Python工程师标准>>>

一 、 首先当然是下载资源包啦：https://www.amcharts.com/　　JavaScript CHARTS

二、  导入到项目中之后，再来看官网demo，需要做成什么样，直接点进去---〉edit就可以看到源码了。官网的数据都是hardcode的，也可以从文件中加载数据。如果要从后台加载数据可以引入：<script src="${prc}/amcharts/plugins/dataloader/dataloader.js"></script> 

dataLoader :会去拿数据，匹配好页面和后台的参数名称就可以了。 

type : pie //饼形图

url ： 

titleField: 要展示的字段 名称

valueField：字段对应的value 

至于详细的参数设置肯定是要参考文档拉https://docs.amcharts.com/3/javascriptcharts/AmChart

<script>
    AmCharts.makeChart(
        "chartdiv",
        {
            "type" : "pie",
            "dataLoader" : {
            "url" : "xxxx.do",
            "showCurtain" : false
            },
            "titleField" : "name",
            "valueField" : "value",
            "balloonText" : "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
            "innerRadius" : "30%",
            "legend" : {
                "align" : "center",
                "markerType" : "circle"
            }
        });
</script>

 

 

 

 

 

转载于:https://my.oschina.net/u/2308353/blog/674619