首页 新闻 会员 周边

echarts+ashx饼图不显示返回的json数据

0
悬赏园豆:20 [已解决问题] 解决于 2017-09-04 15:01
html+js 代码

<div class="chart_container" id="sales" style="width: 340px; height: 200px;">
                                <script type="text/javascript">
                                    // 基于准备好的dom,初始化echarts图表
                                    var myChart = echarts.init(document.getElementById('sales'));
                                     var option = {                                                             
                                        calculable: true,
                                        series: [
                                            {
                                                name: '总记录',
                                                type: 'pie',
                                                radius: '55%',
                                                center: ['50%', '60%'],
                                                data: []
                                            }
                                        ]
                                    };

                                     $.ajax({
                                         type: "post",
                                         async: false, //同步执行
                                         url: "/ashx/Echarts.ashx",
                                         dataType: "json", //返回数据形式为json
                                         success: function (result) {
                                             if (result) {                                               
                                                 option.series[0].data = result;
                                                 myChart.hideLoading();
                                                 myChart.setOption(option);
                                             }
                                         },
                                         error: function (errorMsg) {
                                             alert("图表加载出错,请刷新页面重试!");
                                         }
                                     });
                                </script>

                            </div>

ashx返回的数据

"[{value:2,name:'已考核'},{value:281,name:'未考核'}]"

echarts图表只显示一个圆,没有任何效果,希望各位帮忙看一下,不胜感激!
凯尔网络的主页 凯尔网络 | 初学一级 | 园豆:159
提问于:2016-11-29 15:57
< >
分享
最佳答案
0

参数不对 。

这个是我之前从官网找的demo

 // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(objData.main[0]);
        app.title = '堆叠柱状图';

        var option = {
            tooltip: {
                trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                axisPointer: {// 坐标轴指示器,坐标轴触发有效
                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            xAxis: [//直角坐标系 grid 中的 x 轴
                {
                    type: 'category',
                    data: ['2015-10-01', '2015-10-02', '2015-10-03', '2015-10-04', '2015-10-05', '2015-10-06', '2016-08-23']
                }
            ],
            yAxis: [{ type: 'value' }], //直角坐标系 grid 中的 y 轴,
            series: [
                {
                    name: '张三',
                    type: 'bar',
                    data: [0, 0, 0, 0, 0, 0, 1]
                },
                {
                    name: '李四',
                    type: 'bar',
                    data: [120, 132, 101, 134, 90, 230, 12]
                },
                {
                    name: '王五',
                    type: 'bar',
                    data: [220, 182, 191, 234, 290, 330, 310]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

我这个是柱子的形状 

echarts的官网api很详细的 你后台返回的json符合他的格式就ok

地址http://echarts.baidu.com/examples.html:选择符合自己的demo点击进去 有源代码。

api地址 :

http://echarts.baidu.com/api.html#echarts

收获园豆:20
s_p | 初学一级 |园豆:138 | 2016-11-30 10:03
其他回答(2)
0

legend好像没看到,数据确定能放到data里吗?最好把整个series都放到ajax里面去生成。

建议:先在官网找个demo,再按照自己的需求改,慢慢来,细心的,总会成功的。

让我发会呆 | 园豆:2929 (老鸟四级) | 2016-11-29 16:13
0

很明显参数不够啊,去看看官方例子吧

balahoho | 园豆:2050 (老鸟四级) | 2016-11-29 17:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册