Java前端引入echart插件

最新推荐文章于 2024-07-05 10:06:41 发布

道法—自然

最新推荐文章于 2024-07-05 10:06:41 发布

阅读量1.1k

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/wyqwilliam/article/details/83868448

版权

前端HTML文件中引入插件：

 <div class="row">
     <div class="col-md-5 col-md-offset-1">
         <div class="float-e-margins">
              <div class="echarts" id="proGrade">
              </div>
         </div>
      </div>
      <div class="col-md-5 ">
             <div class="ibox float-e-margins">
                 <div class="echarts" id="backup">
                 </div>
            </div>
      </div>
 </div>

因为引入了echart插件，所以要引入echart

<script src="/js/plugins/echarts/echarts-all.js"></script>

还要引入成各种图的js文件

var prefix = "/nsmp/dept";
$(function () {
    $('#myTab li:eq(0) a').tab('show');
    pie("sysCount","各单位系统总数情况","/nsmp/analysis/info_sys/count_dept");
    bar("deptTime","系统等保评估时间","/nsmp/analysis/info_sys/count_create_date");
    pie("proGrade","系统等级分布情况","/nsmp/analysis/info_sys/pro_grade");
    pie("backup","系统是否备案情况","/nsmp/analysis/info_sys/backup");
    pie("revise","系统是否整改情况","/nsmp/analysis/info_sys/revise");
    pie("dept_result","系统是否测评情况","/nsmp/analysis/info_sys/dept_result");
    load();
});

function pie(id,title,url){
    var allData=[];
    var legendData=[];
    $.ajax({
        type : "post",
        url : url,
        contentType: "application/json; charset=utf-8",
        async : false,
        dataType: 'json',
        success : function(datas) {
            $.each(datas, function(index,value) {
                var data = {value:value.cnt, name:value.name}
                allData.push(data);
                legendData.push(value.name);
            })
        }
    });
    var pieChart = echarts.init(document.getElementById(id));
    var pieoption = {
        title : {
            text: title,
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            fo