qq_43525978
qq_43525978
2018-10-26 08:10
采纳率: 0%
浏览 1.4k

为什么我的echarts图表动态加载数据,两个总是有影响啊,只能出现一个,下面是我的jsp代码

Echarts从后台动态加载数据,一个页面有两个图,一个饼图,一个柱状图,但是只能出现一个,两个互相影响,总不能同时出来

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<jsp:include page="../tld.jsp" />
<div class="row clearfix">
    <div class="col-md-4" style="padding: 0 1em 1em 0">
        <div id="org_chart" style="height: 20em"></div>
    </div>
    <div class="col-md-8" style="padding: 0 0 1em 1em;">
        <div id="serv_type" style="height: 20em"></div>
    </div>
</div>
<div class="row clearfix"
    style="background-color: #fff; padding-top: 1em">
    <div class="col-md-12 column">
        <div class="form-group form-inline" style="margin-left: 1em">
            中介机构名称&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="form-control"
                id="" placeholder="请输入机构名称" /> &nbsp;&nbsp;
            <button class="btn btn-primary">查询</button>
        </div>
        <div class="form-group form-inline" style="margin-left: 1em">
            服务类型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="agencytype" class="btn btn-primary">请选择</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        </div>
        <div class="form-group form-inline" style="margin-left: 1em">
            机构服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-primary">请选择</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;事业单位</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;社会组织
        </div>
        <div class="form-group form-inline" style="margin-left: 1em">
            <div class="dropdown">
                归属地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-default dropdown-toggle" type="button"
                    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="true">
                    中国 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">美国</a></li>
                    <li><a href="#">英国</a></li>
                    <li><a href="#">德国</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">阿拉伯</a></li>
                </ul>

                <button class="btn btn-default dropdown-toggle" type="button"
                    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="true">
                    省 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">陕西</a></li>
                    <li><a href="#">山东</a></li>
                    <li><a href="#">山西</a></li>
                </ul>

                <button class="btn btn-default dropdown-toggle" type="button"
                    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="true">
                    市 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">西安</a></li>
                    <li><a href="#">延安</a></li>
                    <li><a href="#">宝鸡</a></li>
                </ul>

                <button class="btn btn-default dropdown-toggle" type="button"
                    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="true">
                    区 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">新城区</a></li>
                    <li><a href="#">雁塔区</a></li>
                    <li><a href="#">未央区</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- <div class="row clearfix" style="margin-top: 1em;padding: 1em;background-color: #fff">
    <div class="col-md-12">
        <div class="form-group form-inline" style="margin-left: 1em">
            排序:&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;<button class="btn btn-primary">最新</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好评
        </div>
    </div>
</div>
 -->



<div id="dataBody" class="row clearfix"
    style="margin-top: 1em; margin-bottom: 1em;"></div>

<%-- <script src="${ctx}/site/js/myEchart.js"></script> --%>
<script>
/* 饼图 */
var dom = document.getElementById("org_chart");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    backgroundColor: '#FFFFFF',

    title: {
        text: '服务机构数量(单位:个)',
        left: 'left',
        top: 20
    },

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [].sort(function (a, b) {
                return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(65,105,225, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(65,105,225, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#096ac2',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
            return Math.random() * 200;
            }
        }
    ]
};


function initPieEcharts(){
    $.ajax({
           type: "POST",
           url: "${ctx}/site/portal/josnFindNatureConunt",
           cache : false,    //禁用缓存
           dataType: "json",
           success: function(result) {
                var names=["国家机关","事业单位","国有企业","国有控股企业","外资企业","合资企业","私营企业","社会组织","个人"];//定义两个数组
                  var nums=[];
                  $.each(result.dataList,function(key,values){ 
                      var obj = new Object();
                      obj.name = values.nature;
                      obj.value = values.count;
                      nums.push(obj);
                   });
                myChart.setOption({ //加载数据图表
                          legend: {
                                data: names
                               },
                        series: {
                                name: ['数量'],
                                data: nums
                                  }    
           });

           }
    });
}




/* 柱状图  */
var dom_serv_type = document.getElementById("serv_type");
var myChartSecond = echarts.init(dom_serv_type);
var app = {};
option_serv_type = null;
option_serv_type = {
    backgroundColor: '#FFFFFF',

    title: {
        text: '服务类型数量(单位:个)',
        left: 'left',
        top: 20
    },

    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '个数',
            type: 'bar',
            barWidth: '60%',
            data: []
        }
    ]
};
;



function initBarEcharts(){
    $.ajax({
           type: "POST",
           url: "${ctx}/site/portal/josnFindAgencyTypeConunt",
           cache : false,    //禁用缓存
           dataType: "json",
           success: function(result) {
               var linNames=[];
               var linNums=[];
                  $.each(result.dataList,function(key,values){ 
                      linNames.push(values.typeName);
                      linNums.push(values.count);
                   });
                myChartSecond.setOption({ //加载数据图表
                          xAxis: {
                                    data: linNames
                                },
                        series: {
                                    name: ['数量'],
                                    data: linNums
                                  }    
           });

           }
    });
}



$(function(){

    findUnitAgencyList();
    findAgencyTypeList();
    initPieEcharts();

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };


    initBarEcharts();
    if (option_serv_type && typeof option_serv_type === "object") {
        myChart.setOption(option_serv_type, true);
    }; 
});




function findAgencyTypeList(){
    $.post("${ctx}/site/portal/jsonFindAgencyTypeList",{},function(data){

        var type = $("#agencytype");
        var agenyTypeList = data.dataList;
        $.each(agenyTypeList,function(){
            type.after("<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+this.name+"</span>");
        });
    },"json");
}



function findUnitAgencyList(){
    $.post("${ctx}/site/portal/jsonFindUnitAgencyList", {pageSize:10}, function(data){
        data = JSON.parse(data);
        var unitAgency = $("#dataBody");
        var unitAgencyList = data.dataList;

        $.each(unitAgencyList,function(){
            unitAgency.append("<div class='col-md-4' style='margin-left:1em;width:32%;padding:1em;background-color: #fff'>"
                +"<div class='row clearfix'>"
                    +"<div class='col-md-12'>"
                       +"<p style='margin-left: 1.6em'><a href='#'>"+this.name+"</a></p></div></div>"

                    +"<div class='row clearfix'>"
                    +"<div class='col-md-4' style='text-align: center'>"
                       +"<span><img width='70px' height='70px' src='"+this.imgUrl+"'></span>"
                        +"<p>"+this.serviceTypes+"</p></div>"

                    +"<div class='col-md-8'>"
                        +"<p>服务类型:"+this.serviceTypes+"</p>"
                        +"<p>机构服务:"+this.unitNatureExplain+"</p>"
                        +"<p>综合评价:<img src='${ctx}/site/img/WX.png'>"
                        +"<img src='${ctx}/site/img/WX.png'>"
                        +"<img src='${ctx}/site/img/WX.png'>"
                        +"<img src='${ctx}/site/img/WX.png'>"
                        +"<img src='${ctx}/site/img/WX.png'></p>"
                    +"</div></div></div>"
            );
        });
    });
}

</script>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

相关推荐