Vue项目中ECharts图表不显示问题

- 日理万妓 2022-10-12 01:01 658阅读 0赞

[ECharts官网][ECharts]

[在Vue项目中使用ECharts][Vue_ECharts]

--------------------

最近在工作中需要使用ECharts绘制图表，所以根据参考文档尝试了一番，遇到了图表不显示的问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
后来参考了网上许多解决方案，最终发现，原来是因为自己没给图表组件设置height。现记录如下：

<ability-line style="width:100%;height:300px;"></ability-line>

ability-line不是ECharts封装组件，是自己编写的组件，需要使用imports导入并使用components映射成组件，其代码如下：

<template>
      <div id="ve-histogram"></div>
    </template>
    
    <script> export default { data() { return { options: { color: ['#ffdf25', '#36a9ce', '#d0e17d'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '0%', right: '0%', bottom: '10%', top: '10%', containLabel: true }, calculable: true, xAxis: [ { type: 'category', axisTick: { show: false }, data: ['1月', '2月', '3月'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '全国平均业绩', type: 'bar', barGap: 0, data: [320, 332, 301] }, { name: '地区平均业绩', type: 'bar', data: [220, 182, 191] }, { name: '业务员业绩', type: 'bar', data: [150, 232, 201] } ] } }; }, mounted() { const dom = document.getElementById('ve-histogram'); if (dom.getAttribute('_echarts_instance_') !== null) { this.chart = this.$echarts.getInstanceByDom(dom); this.chart.setOption({ }, true); } else { this.chart = this.$echarts.init(dom); } this.$nextTick(() => { this.chart.setOption(this.options, true); }); window.addEventListener('resize', () => { this.chart.resize(); }); } }; </script>
    <style scoped> </style>

问题解决：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]

[ECharts]: https://echarts.apache.org/zh/index.html
[Vue_ECharts]: https://www.imooc.com/article/267202?block_id=tuijian_wz
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20221005/893f8e5646674528a952fbb2988e6b38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20221005/cdaaacf75d9a42aaa57515e9cc555c4c.png