首页 新闻 搜索 专区 学院

EcharsX轴数据问题

0
悬赏园豆:20 [已关闭问题] 关闭于 2016-11-14 16:53
  1. 最近在做echars,实际项目中会用到前后台交互,最近遇到的一个问题就是在给X轴进行动态赋值的时候(直接将一个数组赋值给X轴),X轴只取到数组的第一个值,导致X轴数据生成错误,以下是我的代码:
  2. 首先是后台返回的数据,截图:
  3. 与后台交互时,我采用的是Ajax。
    success : function(data) {
            //series容器
            var item = function(){
             return {
              name :'',
              type : '',
              data : []
             }
            };
            var legends = [];
            var xArr = [];
            var series = [];
            for(var i = 0;i<data.length;i++){
             var tp = new item();
             tp.name = data[i].POSTER_NAME;
             tp.data = function(){
              var list = [];
              list.push(data[i].costs);
              return list;
             }();
             tp.type = 'bar';
             legends.push(data[i].POSTER_NAME);
             xArr.push(data[i].months);
             series.push(tp);
            }
            var option = {
            title: {
                         text : '啊哈哈哈',
                        },
            tooltip: {
                         show:true,
                         trigger: 'axis'
                        },
            legend: {
                            data:legends
                        },
            xAxis: [{
                          name:'时间',
                          type:'category',
                          data: xArr
                         }],
            yAxis: [{
                    name:'成本(元)'
                      }],
            series :series
                    }; 
            
            /* option.legend.data = legends; 
            option.xAxis.data = xArr;
            option.yAxis.name = '成本(元)';
            option.series=series; */
            myChart.setOption(option);
           }
          
  4. 再给出声明的数组

    如截图所示,X轴动态赋值的是xArr数组,series赋值的是series数组,legends赋值的是legends数组,问题出来了,X轴赋值的数据死活不对,求教各位我这样的写法哪里出问题?导致X轴数据不对,真心求助,谢谢各位!
问题补充:

最后补上前台页面的效果,X轴应该要出来2016-10和2016-10两条数据,但是实际情况是只出来一个,而echars的series数据生成正确,求问问题出在哪里?

请叫我阳大官人的主页 请叫我阳大官人 | 初学一级 | 园豆:32
提问于:2016-11-08 09:56
< >
分享
所有回答(1)
0

  xAxis: [{
                      name:'时间',
                      type:'category',
                      data: xArr
                     }],

xAxis是一个数组, ”option.xAxis.data = xArr;”,所以这样的赋值是不对的,所以就只出现了数组中的第一条数据

路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 10:24

所以要怎么改?

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 10:28

我试了一下直接写定量,还是会出问题。只能出来第一个值,就是这么写:
xAxis: [{
                      name:'时间',
                      type:'category',
                      data: ['2222','88888']
                     }],
结果X轴还是只能取到一个值!!!

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 10:38

@请叫我阳大官人: 出现图片上的情况一般有两种,第一是因为xAxis[0].data中只有一个值,第二是因为series 数组中只有一个值。你在setOption之前打印一下这两个值看一下吧。

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 10:49

@路人第十三: 你看一下上面的第四点,我打印出来了的!

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 11:08

@路人第十三: 难道是我在创建容器的时候出问题吗?因为我后台是直接返回的json数组的,然后再用的for循环去解析并赋值到xArr数据,legends数组和series数组。

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 11:15

@请叫我阳大官人: 我试了一下只有xAxis[0].data的值只有一个这种可能,把option.xAxis.data = xArr;换成option.xAxis[0].data = ['2222','8888'];试一下。

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 12:10

@路人第十三: 这样也不行

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 14:42

@请叫我阳大官人: 

option = {


xAxis : [
{
name:'222222',
type : 'category',
data : ['1月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 15:08

@请叫我阳大官人: 你运行一下上面的代码,会发现option只有3个属性,说明显示数据的问题只和这三个属性有关系,而且你的问题和yAxis,series都没关系,所以就是xAxis的问题了。

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 15:11

@路人第十三: 找到原因了,其实是因为我的series数据的问题,http://echarts.baidu.com/demo.html#bar-stack,这个链接你试着把所有series;里面的data都只取一个值,就会出现这种情况,即X轴永远只能取到一个值!

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 16:00

@路人第十三: 但是现在我还是没有思路。比如我后台直接传回来这样的数据:






支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 16:05

其实我要实现的就是2016-10分别在X轴有两条数据,一条是反对,另外一条是飞信这个广告!并且在X轴出现两个2016-10!

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 16:09

@请叫我阳大官人:那这就算解决了吧,没想到是这里的问题

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 16:26

@请叫我阳大官人: 揪心啊

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 16:27

@路人第十三: 没解决,得改后台,不能就这么直接返回一个json数组,这样不好处理!

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 16:34

@请叫我阳大官人:哪一个是json数组,直接遍历不就OK了吗

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 16:42

@路人第十三: 就是上面给的截图,object array!

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 16:50

@请叫我阳大官人: 有对象了,就可以根据前面的名称获取后面的数据了

支持(0) 反对(0) 路人第十一 | 园豆:323 (菜鸟二级) | 2016-11-08 17:44

@路人第十三: 还是这一段的代码的问题,即相同的poster_name的情况下,我的list应该是要放进去多个值的,而不是再去new
var tp = new item();
         tp.name = data[i].POSTER_NAME;
         tp.data = function(){
          var list = [];
          list.push(data[i].costs);
          return list;
         }();

支持(0) 反对(0) 请叫我阳大官人 | 园豆:32 (初学一级) | 2016-11-08 19:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册