<script src="${pageContext.request.contextPath}/js/echarts/source/echarts.js"></script>    <script src="${pageContext.request.contextPath}/js/phoneSample.js"></script>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">         <ul id="myTab" class="nav nav-tabs">             <li class="active"><a href="#iPhone" data-toggle="tab">iPhone</a></li>             <li><a href="#SAMSUNG" data-toggle="tab">SAMSUNG</a></li>             </ul>                       <div id="myTabContent" class="tab-content">            <div class="tab-pane fade in active" id="iPhone">                <div class="row placeholders" style="float:clear;">                     <h2><strong>iPhone手机分析</strong></h2>                </div>                  <div class="row placeholders">                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4All_iPhone" style="height:500px;width:650px">                  </div>                  <div class="col-xs-6 col-sm-3 placeholder" id ="bar_iPhone" style="height:500px;width:650px;float:left;">                  </div>                </div>                <div class="row placeholders">                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4Not_iPhone" style="height:500px;width:650px">                  </div>                </div>            </div>            <div class="tab-pane fade" id="SAMSUNG">                  <div class="row placeholders" style="float:clear;">                     <h2><strong>SAMSUNG手机分析</strong></h2>                </div>                  <div class="row placeholders">                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4All_SAMSUNG" style="height:500px;width:650px">                  </div>                  <div class="col-xs-6 col-sm-3 placeholder" id ="bar_SAMSUNG" style="height:500px;width:650px;float:left;">                  </div>                </div>                <div class="row placeholders">                  <div class="col-xs-6 col-sm-3 placeholder" id ="pie4Not_SAMSUNG" style="height:500px;width:650px">                  </div>                </div>            </div>          </div>         </div>

//封装饼状图参数function setOptionPie(data){        var legend_data =http://www.mamicode.com/ [];    if(data && data.length > 0){                $.each(data, function(idx, d){                        legend_data.push(d.name);        });            }        var option = {        title : {            text: data.title || ‘‘,            x:‘center‘        },        tooltip : {            trigger: ‘item‘,            formatter: "{b} : {c} ({d}%)"        },        legend: {            orient : ‘vertical‘,            x : ‘left‘,            data:legend_data        },        calculable : true,        series : [            {                type:‘pie‘,                radius : ‘55%‘,                center: [‘50%‘, ‘60%‘],                data:data,                itemStyle : {                    normal : {                        label : {                            show: true,                            position : ‘outer‘,                            formatter : "{b}\n{d}%",//在饼状图上显示百分比                            /*textStyle : {                                color : ‘rgba(30,144,255,0.8)‘,                                align : ‘center‘,                                baseline : ‘middle‘,                                fontFamily : ‘微软雅黑‘,                                fontSize : 30,                                fontWeight : ‘bolder‘                            }*///自定义饼图上字体样式                        },                        labelLine : {                            show : true,                        }                    },                    emphasis : {                        label : {                            show : true,                            formatter : "{d}%"//鼠标移动到饼状图上显示百分比                        }                    }                                    }            }        ]    };        return option;}//封柱状状图参数function setOptionBar(data){        var legend_data =http://www.mamicode.com/ [];        //var series = [];    if(data && data.length > 0){                $.each(data, function(idx, d){                        legend_data.push(d.name);            //series.push({name:d.name,type:‘bar‘,itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},data:d.data});        });            }        /*var option = {            tooltip : {                trigger: ‘axis‘,                axisPointer : {            // 坐标轴指示器，坐标轴触发有效                    type : ‘shadow‘        // 默认为直线，可选为：‘line‘ | ‘shadow‘                }            },            legend: {                data:legend_data            },            calculable : true,            xAxis : [                {                    type : ‘value‘                }            ],            yAxis : [                {                    type : ‘category‘,                    data : data && data[0] ? data[0].yAxis : []                }            ],            series : series        };    return option;*/        var option = {            title : {                text: data.title || ‘‘,                x:‘center‘            },            tooltip : {                trigger: ‘axis‘,                axisPointer : {            // 坐标轴指示器，坐标轴触发有效                    type : ‘shadow‘        // 默认为直线，可选为：‘line‘ | ‘shadow‘                }            },            legend: {                orient : ‘vertical‘,                x : ‘left‘,                data:legend_data            },            calculable : true,            xAxis : [                {                    type : ‘value‘                }            ],            yAxis : [                {                    type : ‘category‘,                    data : data && data[0] ? data[0].yAxis : []                }            ],            series : [                {                    name:legend_data[0],                    type:‘bar‘,                    stack: ‘总量‘,                    itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},                    data:data[0].data                },                {                    name:legend_data[1],                    type:‘bar‘,                    stack: ‘总量‘,                    itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},                    data:data[1].data                },                {                    name:legend_data[2],                    type:‘bar‘,                    stack: ‘总量‘,                    itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},                    data:data[2].data                }            ]        };    return option;}//设置相关参数，展示图表function showChart(data, type, phoneFlag) {    require([ ‘echarts‘, ‘echarts/chart/‘+(type.substr(0,3) == ‘pie‘?‘pie‘:type) ], function(ec) {        var myChart = ec.init(document.getElementById(type+‘_‘+phoneFlag));                var option = null;                if(type == ‘pie4All‘){            data.title = "口碑现状";            option = setOptionPie(data);        }else if(type == ‘bar‘){            data.title = "用户评价的分布现状";            option = setOptionBar(data);        }else if(type == ‘pie4Not‘){            data.title = "负面信息属性分布状况";            option = setOptionPie(data);        }                myChart.setOption(option);                window.onresize = function () {            myChart.resize();        };            });}// 请求后台数据，填充图表function ajaxChart(phoneFlag, type) {    $.ajax({        type : "POST",        dataType : "json",// 返回json格式的数据        url : "../psServlet",        data : {            phoneFlag : phoneFlag,            method: type        },        success : function(data) {            if(data && data.length > 0){                showChart(data, type, phoneFlag);            }        }    });}$(function(){        // 加载图表所需的js库文件    require.config({        paths: {            echarts: path+‘/js/echarts/source‘        }    });            ajaxChart("iPhone", "pie4All");    ajaxChart("iPhone", "bar");    ajaxChart("iPhone", "pie4Not");        ajaxChart("SAMSUNG", "pie4All");    ajaxChart("SAMSUNG", "bar");    ajaxChart("SAMSUNG", "pie4Not");    });