饼图的数据传递

工作需要，在jsp中要求将数据用饼图展示  分别使用接口型和交互型进行了数据的传递

借鉴插件：echarts

网址链接：http://echarts.baidu.com/examples.html#chart-type-pie

jar包引入：

    <script src="<%=basePath%>/js/echarts.js"></script>
容器示例：

     <div id="countlist" style="width: 800px;height:400px;"></div>

代码示例：关键数据（legenddate：所显示的按钮--seriesdate：所展示的比例及名称）关键在于要将这两个属性拼接成json类型字符串

var myChart = echarts.init(document.getElementById('countlist'));
                // 指定图表的配置项和数据

    tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },                var option = {
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legenddate
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:seriesdate,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
   拼接方式：

接口型：var count=data.data;    
                var legenddate=[];    
                var seriesdate=[];
                
                for(var i=0;i<count.length;i++){
                    var dateholdcount=count[i].dateholdcount;
                    var username=count[i].username;
                    var summy=count[i].dateholdcount;
                    legenddate.push(username);
                    seriesdate.push({value:summy, name: username}

);       

交互型：

<%
List list = (List)request.getAttribute("salcount");
double extra = (double)request.getAttribute("extra");
int id;
String username;
double salary;
double sum=0;
String legenddate="";
String seriesdate="";
if(list!=null){
    Iterator it = list.iterator();
    while(it.hasNext())
    {
    TmsUser salcount = (TmsUser)it.next();
    id = salcount.getId();
    username=salcount.getUsername();
    salary=salcount.getSalary();
    legenddate+="'"+username+"',";
    seriesdate+="{value:"+salary+", name:'"+username+"'},";
    sum+=salary;
    }    
}
legenddate+="'额外支出'";
seriesdate+="{value:"+extra+",name:'额外支出'}";
%>

遇到问题：

1、如果需要将两个数据放在同一个div下

需要先销毁dom对象，然后在初始化dom

                echarts.dispose(document.getElementById('countlist'));
                var myChart=echarts.init(document.getElementById('countlist'));

2、数据类型必须符合json格式