echarts图表无法显示是怎么回事呢?

前端界面像白纸一样,图表的位置空出着,但没有显示各种柱状图饼状图。

img

为啥没出来有很多原因,看看你的代码才行

1、先排查下控制台报错问题
2、有没有数据

html 页面上有用容器存放数据吗?
js里面有没有获取存放图表的容器,并且给图表设置值
可以从官网复制一个静态的echart出来,然后再通过接口取数据,变成动态的

个人感觉哈:不是不显示,而是因为你外面的div宽高的问题,导致了图表被遮挡住了。

f12看一下

请你说出需求 是html的 还是vue里面使用的 给你一个案例:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="lib/echarts.min.js"></script> -->
  <script crossorigin="anonymous" integrity="sha384-Xs6Qel+piuBuYirxyRE+u00T6Jlu859u5P0bJJCjLQllzLb6KsV03oS1+/roirQG" src="https://lib.baomitu.com/echarts/2.2.7/echarts-all.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>
      var mCharts = echarts.init(document.querySelector('div'))
      var pieData = [
        {
          name: '淘宝',
          value: 11231
        },
        {
          name: '京东',
          value: 22673
        },
        {
          name: '唯品会',
          value: 6123
        },
        {
          name: '聚美优品',
          value: 6700
        }
      ]
      var option = {
        series: [
          {
            type: 'pie',
            data: pieData,
            label: {
              show: true,
              formatter: function(arg) {
                return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
              }
            },
            //第一个代表内圆半径,第二个代表外圆半径
            radius: ['50%', '70%']
          }
        ]
      }
      mCharts.setOption(option)
  </script>
</body>
</html>

有没有代码?数据没给对?