vue-echarts 引用后图表没有显示

Question

import ECharts from 'echarts'
import VueEcharts from 'vue-echarts'
// scss样式
import './styles/index.scss'

Vue.component('v-chart', VueEcharts)

<v-chart :options="chartOption" />

chartOption: {
        grid: {
          top: 70,
          left: 60,
          right: 60,
          bottom: 50
        },
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [250, 50, 100, 300, 500, 420, 250, 300, 500, 420, 250, 100]
          }
        ]
      },

父元素有高度，它的高度也设置的100%，但是没显示图表，老师加我一下QQ：1069571163，我把代码发你帮我看看呗，代码在私人仓库里面，麻烦你了谢谢。

Answer 1

扬_灵 2023-03-15 08:45:29

同学你好，看上图的提示应该是没有高度导致的图表无法进行渲染，你可以先手动给元素增加个高度查看一下能否显示，如果可以显示就表示继承父元素的高度这里出现了问题。