啊水水水啊 2023-01-19 13:50 采纳率: 65.2%
浏览 41
已结题

如何使用ajax结合echarts,修改js文件,从浏览器里面查看,发现ajax已经获取数据了,但是可视化柱状图却没有显示出来?

使用ajax结合echarts,修改js文件,从浏览器里面查看,发现ajax已经获取数据了,但是可视化柱状图却没有显示出来。


(function() {
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));
  // var chartDom = document.getElementById('.');
  // var myChart = echarts.init(chartDom);
  var option;

  option = {
    polar: {
      radius: [30, '80%']
    },
    angleAxis: {
      max: 2500,
      startAngle: 75
    },
    radiusAxis: {
      type: 'category',
      data: ['a', 'b', 'c', 'd','e','f']
    },
    tooltip: {},
    series: {
      type: 'bar',
      data: [2, 1.2, 2.4, 3.6],
      coordinateSystem: 'polar',
      label: {
        show: true,
        position: 'middle',
        formatter: '{b}: {c}'
      }
    }
  };


  var names=[];
  var numbers=[];
  //请求后台数据
  $.ajax({
    type: "get",
    url: "/visual/movieNum/list",
    contentType: "application/json",
    success: function(res){
      console.log("=====res: =======")
      console.log(res);
      for (var i = 0; i < res.length ; i++) {
        names.push(res[i].bookType);
        numbers.push(res[i].number);
      }
      myChart.setOption({
        radiusAxis: {
          type: 'category',
          data: names
        } ,
        series: {
          type: 'bar',
          data: numbers }
      });
    }
  });
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();


想要的柱状图:

img


现在的柱状图:

img

img

  • 写回答

3条回答 默认 最新

  • 啊水水水啊 2023-01-19 14:55
    关注

    发现问题了,原来是这个柱状图使用的echarts.min.js版本不对,在我这个js要加载的html文件里面导入正确版本就可以了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 1月19日
  • 已采纳回答 1月19日
  • 修改了问题 1月19日
  • 创建了问题 1月19日

悬赏问题

  • ¥15 wpf中在模版中寻找元素
  • ¥15 MFC平台生成指定圆
  • ¥15 jmeter出现403
  • ¥500 求华为P30PRO手机硬盘数据恢复
  • ¥15 关于#vscode#的问题:ESP32开发板对接MQTT实现小灯泡的开关
  • ¥15 TMC2209串口模式下读取不到寄存器的值串口助手蓝色字体是发过去的消息,绿色字体是收到的消息,第二行发送读取寄存器的指令但是没有读取到寄存器的值串口助手如下图:接线如下图,如何解决?
  • ¥15 怎样删除 右键菜单里的 剪切(T)和复制(C)
  • ¥15 高通安卓11提取完整线刷包软件,或者优博讯dt50顺丰刷机包
  • ¥20 C,有个译码器,换了信道就跑不出原来数据
  • ¥15 MIMIC数据库安装问题