a2042912727
2021-07-02 01:29
采纳率: 100%
浏览 21
已采纳

echarts使用json数据后图形显示不出来而且数据格式没问题

这是我使用json时的代码

drawMonth(){
        var app = {};
        let MonthChart = this.$echarts.init(document.getElementById('MonthChart'))
        let cellSize = [120, 120];
        let pieRadius = 50;
        let self = this;
        var option;
        var start = +self.$echarts.number.parseDate('2021-06-01');
        var end = +self.$echarts.number.parseDate('2021-07-01');
        var dayTime = 3600 * 24 * 1000;
        var day = (end - start) / dayTime;
        var json = [];

        this.axios.get("/month6.json")
        .then( function(res){
          console.log(res.data);
          json=res.data;
          console.log(json);
          if(res)
            getdayinfo(day,res.data);
        })
        
        var data_arr = [];
        for(var i = 0; i < json.length; i++) {
          data_arr.push(json[i].data);
        }
        
        function getVirtulData() {
          var date = +self.$echarts.number.parseDate('2021-06-01');
          var end = +self.$echarts.number.parseDate('2021-07-01');
          var dayTime = 3600 * 24 * 1000;
          var data = [];
          for (var time = date; time < end; time += dayTime) {
            data.push([
              self.$echarts.format.formatTime('yyyy-MM-dd', time),
              Math.floor(Math.random() * 10000)
            ]);
          }
          return data;
        }

        function getPieSeries(scatterData, chart) {
          return scatterData.map(function (item, index) {
            var center = chart.convertToPixel('calendar', item);
            return {
              id: index + 'pie',
              type: 'pie',
              center: center,
              label: {
                normal: {
                  formatter: '{c}',
                  position: 'inside'
                }
              },
              radius: pieRadius,
              data: data_arr[index]
              //data: [
              //  {name: '男性', value: Math.round(Math.random() * 24)},
              //  {name: '女性', value: Math.round(Math.random() * 24)}
              //]
            }
          });
        }

        function getPieSeriesUpdate(scatterData, chart) {
          return scatterData.map(function (item, index) {
            var center = chart.convertToPixel('calendar', item);
            return {
              id: index + 'pie',
              center: center
            };
          });
        }

        var scatterData = getVirtulData();

        MonthChart.setOption({
          title : {
            text: '每日访问男女数量',
            left: 'center'
          },
          tooltip : {},
          legend: {
              data: ['男性', '女性'],
              bottom: 20
          },
          calendar: {
            top: 'middle',
            left: 'center',
            orient: 'vertical',
            cellSize: cellSize,
            yearLabel: {
                show: false,
                fontSize: 30
            },
            dayLabel: {
                margin: 20,
                firstDay: 1,
                nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            },
            monthLabel: {
                show: false
            },
            range: ['2021-06']
          },
          series: [{
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                return self.$echarts.format.formatTime('dd', params.value[0]);
              },
              offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
              fontSize: 14
            },
            data: scatterData
          }]
          
        })

        var pieInitialized;
        

        function getdayinfo(day,info){
          
          for(var i=1;i<=day;i++){
            var string = {};
            string="day"+i;
            option.series[i-1].data=info[string]
          }
        }

        setTimeout(function () {
          pieInitialized = true;

          option={
            series: getPieSeries(scatterData, MonthChart)
          };
          console.log(option);
          option && MonthChart.setOption(option);
        }, 10);

        app.onresize = function () {
          if (pieInitialized) {
            MonthChart.setOption({
              series: getPieSeriesUpdate(scatterData, MonthChart)
            });
          }
        }
      }

这是我用死数据时候的效果:

img
一使用json数据就....

img

img
通过控制台console.log出option的值的格式是一样的

img
这是json文件的内容

{
    "day1":[
    {"name": "男性", "value":32},
    {"name": "女性", "value":5}
    ],
    "day2":[
    {"name": "男性", "value":42},
    {"name": "女性", "value":98}
    ],
    "day3":[
    {"name": "男性", "value":56},
    {"name": "女性", "value":71}
    ],
    "day4":[
    {"name": "男性", "value":25},
    {"name": "女性", "value":54}
    ],
    "day5":[
    {"name": "男性", "value":69},
    {"name": "女性", "value":80}
    ],
    "day6":[
    {"name": "男性", "value":87},
    {"name": "女性", "value":17}
    ],
    "day7":[
    {"name": "男性", "value":80},
    {"name": "女性", "value":31}
    ],
    "day8":[
    {"name": "男性", "value":49},
    {"name": "女性", "value":48}
    ],
    "day9":[
    {"name": "男性", "value":41},
    {"name": "女性", "value":29}
    ],
    "day10":[
    {"name": "男性", "value":74},
    {"name": "女性", "value":18}
    ],
    "day11":[
    {"name": "男性", "value":46},
    {"name": "女性", "value":84}
    ],
    "day12":[
    {"name": "男性", "value":22},
    {"name": "女性", "value":46}
    ],
    "day13":[
    {"name": "男性", "value":95},
    {"name": "女性", "value":14}
    ],
    "day14":[
    {"name": "男性", "value":7},
    {"name": "女性", "value":5}
    ],
    "day15":[
    {"name": "男性", "value":58},
    {"name": "女性", "value":69}
    ],
    "day16":[
    {"name": "男性", "value":94},
    {"name": "女性", "value":85}
    ],
    "day17":[
    {"name": "男性", "value":0},
    {"name": "女性", "value":50}
    ],
    "day18":[
    {"name": "男性", "value":99},
    {"name": "女性", "value":11}
    ],
    "day19":[
    {"name": "男性", "value":47},
    {"name": "女性", "value":35}
    ],
    "day20":[
    {"name": "男性", "value":56},
    {"name": "女性", "value":17}
    ],
    "day21":[
    {"name": "男性", "value":13},
    {"name": "女性", "value":57}
    ],
    "day22":[
    {"name": "男性", "value":83},
    {"name": "女性", "value":78}
    ],
    "day23":[
    {"name": "男性", "value":29},
    {"name": "女性", "value":38}
    ],
    "day24":[
    {"name": "男性", "value":81},
    {"name": "女性", "value":34}
    ],
    "day25":[
    {"name": "男性", "value":69},
    {"name": "女性", "value":93}
    ],
    "day26":[
    {"name": "男性", "value":82},
    {"name": "女性", "value":85}
    ],
    "day27":[
    {"name": "男性", "value":56},
    {"name": "女性", "value":23}
    ],
    "day28":[
    {"name": "男性", "value":99},
    {"name": "女性", "value":95}
    ],
    "day29":[
    {"name": "男性", "value":52},
    {"name": "女性", "value":46}
    ],
    "day30":[
    {"name": "男性", "value":27},
    {"name": "女性", "value":86}
    ]
}

来个大佬救救孩子吧,要被逼疯了

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • yycgis 2021-07-02 08:01
    已采纳

    代码中json数据请求是异步的,你需要把所有操作放到回调函数里面。

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报

相关推荐 更多相似问题