zoukankan      html  css  js  c++  java
  • 使用echarts展示分区分布图

    一、引入JS文件

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.js"></script>

    二、准备一个容器放图表

    <div id="ec1" style=" 500px;height: 400px;"></div>

    三、基于准备好的dom,初始化echarts实例(因为需要的是dom节点,所以要有[0])

     var myEc1 = echarts.init($("#ec1")[0]);

    四、ajax请求区域分区数据

    $.post("${pageContext.request.contextPath }/subareaAction_findCountGroupByProvince.action",function(data){
    data = eval("(" + data + ")");
    myEc1.setOption({
    title : {
    text: '区域分区分布图',
    subtext: '每个省份的分区数',
    x:'center'
    },
    tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    toolbox: {
    show : true,
    feature : {
    mark : {show: true},
    dataView : {show: true, readOnly: false},
    magicType : {
    show: true, 
    type: ['pie', 'funnel'],
    option: {
    funnel: {
    x: '25%',
     '50%',
    funnelAlign: 'left',
    max: 1548
    }
    }
    },
    restore : {show: true},
    saveAsImage : {show: true}
    }
    },
    calculable : true,
    series : [
    {
    name:'访问来源',
    type:'pie',
    radius : '55%',
    center: ['50%', '60%'],
    data:data
    }
    ]
    }); 
    });

    影视前端demo,http://www.viuman.com 唔呦漫

  • 相关阅读:
    第10组 Alpha冲刺 (2/6)
    第10组 Alpha冲刺 (1/6)
    第10组(72) 需求分析报告
    团队介绍及选题报告
    实验 7 : OpenDaylight 实验 —— Python 中的 REST API 调用
    第03组 Alpha冲刺 总结
    第03组 Alpha冲刺 (6/6)
    第03组 Alpha冲刺 (5/6)
    第03组 Alpha冲刺 (4/6)
    第03组 Alpha冲刺 (3/6)
  • 原文地址:https://www.cnblogs.com/naixin007/p/9096235.html
Copyright © 2011-2022 走看看