关于Echart插件制作图表的相关问题，求解决

#1

补充上图

#2

这是咋回事呀怎么解决

#3

点击查询的时候有往后台发送请求吗

#4

代码发出来看看

#5

引用 4 楼 zhangyanbin46 的回复:

代码发出来看看

用ajax请求的数据
<script type="text/javascript">
function ajax()
{
    var date = $("#date").val();
    var type = $("#type").val();
    var domain = $("#domain").val();
    var times = 1;
    $.ajax(
    {
        type: "post",
        url: "roamingBillingAction.action",
        data:  "date=" + date + "&times=" + times+ "&type=" + type+ "&domain=" + domain ,
        dataType: "json",
        beforeSend: function()
        {
            var query_hint = document.getElementById("query_hint");
            var ppss = document.getElementById("ppss");
            ppss.style.display = "none";
            query_hint.style.display = "block";
        },
        complete: function(data)
        {
            var query_hint = document.getElementById("query_hint");
            var ppss = document.getElementById("ppss");
            ppss.style.display = "block";
            query_hint.style.display = "none";
        },
        success: function(data)
        {
           js = data.result;
           jd = $.parseJSON(js);
           domain=data.domain;
           domainInfo(domain);
                   var province11=jd.province11;//得到业务属性
                   var province34=jd.province34;//得到业务属性
                   var province38=jd.province38;//得到业务属性
                   var province86=jd.province86;//得到业务属性

                   var province97=jd.province97;//得到业务属性
                   var province36=jd.province36;//得到业务属性
                   var province13=jd.province13;//得到业务属性
                   var province31=jd.province31;//得到业务属性
   var province87=jd.province87;//得到业务属性

   var province51=jd.province51;//得到业务属性
                   var province81=jd.province81;//得到业务属性
                   var province59=jd.province59;//得到业务属性
                   var province79=jd.province79;//得到业务属性

                   var province91=jd.province91;//得到业务属性
                   var province74=jd.province74;//得到业务属性
                   var province89=jd.province89;//得到业务属性
                   var province75=jd.province75;//得到业务属性

   var province76=jd.province76;//得到业务属性
                   var province10=jd.province10;//得到业务属性
                   var province85=jd.province85;//得到业务属性
                   var province88=jd.province88;//得到业务属性

   var province18=jd.province18;//得到业务属性
                   var province71=jd.province71;//得到业务属性
                   var province83=jd.province83;//得到业务属性


                   var province17=jd.province36;//得到业务属性
                   var province70=jd.province70;//得到业务属性

                   var province19=jd.province19;//得到业务属性
                   var province90=jd.province90;//得到业务属性
                   var province84=jd.province84;//得到业务属性
                   var province30=jd.province30;//得到业务属性
                   var province50=jd.province50;//得到业务属性
                   //将数据添加到各个业务展示图中
                   showProvince('北京','一域',11,province11);
                   showProvince('江苏','一域',34,province34);
                   showProvince('福建','一域',38,province38);
                   showProvince('云南','一域',86,province86);

                   showProvince('黑龙江','二域',97,province97);
                   showProvince('浙江','二域',36,province36);
                   showProvince('天津','二域',13,province13);
                   showProvince('上海','二域',31,province31);
                   showProvince('甘肃','二域',87,province87);

                   showProvince('广东','三域',51,province51);
                   showProvince('四川','三域',81,province81);
                   showProvince('广西','三域',59,province59);
                   showProvince('*','三域',79,province79);

   showProvince('辽宁','四域',91,province91);
                   showProvince('湖南','四域',74,province74);
                   showProvince('*','四域',89,province89);
                   showProvince('江西','四域',75,province75);

                   showProvince('河南','五域',76,province76);
                   showProvince('内蒙古','五域',10,province10);
                   showProvince('贵州','五域',85,province85);
                   showProvince('宁夏','五域',88,province88);

                   showProvince('河北','七域',18,province18);
                   showProvince('湖北','七域',71,province71);
                   showProvince('重庆','七域',83,province83);


                   showProvince('山东','六域',17,province17);
                   showProvince('青海','六域',70,province70);

                   showProvince('山西','八域',19,province19);
                   showProvince('吉林','八域',90,province90);
                   showProvince('陕西','八域',84,province84);
                   showProvince('安徽','八域',30,province30);
                   showProvince('海南','八域',50,province50);
        },
        error: function(e)
        {
        }
    });
}
function showProvince(provinceName,subtextInfo,provinceIndex,province)
{
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    var postage = province.xname;
var num=province.value;

var DArr = new Array();
    for(var i=0;i<num.length;i++)
    {//字符串转化数组
    DArr[i] = parseInt(num[i]);
    }
    require.config({
        paths: {
            echarts: '<%=path %>/js'
        }
    });
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],

            function DrawCharts(ec)
            {
                //--- 折柱 ---
                var myChart = new  ec.init(document.getElementById('container_province'+ provinceIndex));
               // var myChart = require('echarts').init(document.getElementById('container_province'+ provinceIndex));
                option=(
                {
title :
{
        text: provinceName,
subtext: subtextInfo
},
                    tooltip :
                    {
                        trigger: 'axis'
                    },
                    legend:
                     {
                        data:['次数']
                    },
                    toolbox:
                    {
                        show : true,
                        feature :
                        {
                            mark :
                            {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                          type : 'category',
               data : postage,
     axisLabel:
   {
                         interval:0//横轴信息全部显示
                      /* rotate:-10//-30度角倾斜显示  */
}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            'name':'数量（/次）',
                            splitArea : {show : true}
                        }
                    ],
                    series : [
                        {
                            name:'次数',
                            type:'bar',
                            data:DArr
                        }
                    ]
                });
                  myChart.setOption(option, true);


            }

    );

}

</script>

源码

#6

引用 2 楼 u013066753 的回复:

这是咋回事呀怎么解决

是的已经贴上代码了

#7

我判断那是因为 ajax第二次请求回来后数据刷新了但是图表并没有跟着刷新所以导致了图标加载失败了，
现在的代码图表只会初始化一次，第二次请求过来没有初始化，这块的代码
官方给的解决方案
// -----------------------------

// 非入口或再次使用，图表已被加载注册
require('echarts').init(dom).setOption({...});

// 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...});

由于我的图表都是循环加载的，这种办法卵用没有，不知道是我的方法有问题还是这个插件的用法我理解错了，

秒客网

关于Echart插件制作图表的相关问题，求解决

7 个解决方案

#1

#2

#3

#4

#5

#6

#7

#1

#2

#3

#4

#5

#6

#7

相关文章