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

如何使用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日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效