echart饼状图、柱状图无法显示

最新推荐文章于 2025-05-09 14:05:11 发布

原创最新推荐文章于 2025-05-09 14:05:11 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #vue.js

本文记录了一位新手在使用Echart制作饼状图和柱状图时遇到的图形无法显示的问题。通过检查发现，原因是图表容器的高度被设置为了0。解决方法简单明了，只需为图表容器设定一个具体的高度。

新手踩坑日记01
在引用echart的饼状图、柱状图遇到图形无法显示在页面中，审查元素发现该图所在的容器高度为0。
解决办法：给其容器写一个高度即可。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SomeOne159

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【Echart】echart图表不显示总结

m0_61049675的博客

01-29

726

2、是否使用了v-if（看是否能改为用v-show）和确保dom元素已经挂载到页面中；1、echarts.init时确认dom容器是否设置了宽高，

关于echarts 生成图片没有柱状，饼状图数据的问题

qq_39963516的博客

08-17

1027

用html2canvas和download=downImg生成echarts构建出来的图片无柱状饼状数据图，页面也显示和console.log都能打印出来但是就是不显示柱状的图只显示一个坐标轴。生成图片之前的页面生成图片之后虽然没有去看echarts源码想着他的内部柱状生成的动画有延迟时间是个异步的过程，在柱状图还未生成以前，生成图片的逻辑都已经进行完了，所以解决方案就是在动画执行完成之后生成图片。方案一设置timeout，时间一定要大于动画执行的时间代码实现 my.

参与评论您还未登录，请先登录后发表或查看评论

Echarts图表不显示

qq_39389646的博客

04-12

2万+

Echarts图表不显示 div标签的style属性设置有问题 <div id="chart-user" style="width:500px; height:500px" ></div>

听说你的echarts图无法展示出来？

weixin_52236586的博客

04-29

1495

原因：methods中的方法是无法保证顺序的，通常是因为你的数据没获取到，echarts就开始渲染了、这个时候是无法渲染出来的，并且不会报错。如果想要正常渲染echarts，请找promise大哥、案例如下。

用echarts做饼状图 显示不出来

junj5n的专栏

08-18

8918

在引入Js正确的时候，有可能是id为main的那个容器没有定义宽和高

spring boot动态加载Echart饼状图

08-25

Spring Boot动态加载Echart饼状图 Spring Boot是一款基于Java的框架，提供了快速构建可靠的企业级应用程序的方式，而Echart是一款流行的数据可视化库，提供了丰富的图表类型和自定义选项。今天，我们将详细介绍如何...

java-echart.js柱状图、饼状图、折线图

01-03

java-echart.js柱状图、饼状图、折线图 /** * 柱状图 * @param classRoom * @param req * @param resp * @param model * @return */ @RequestMapping(value = "/zhuzhuangtu") public String ...

java-echart.js柱状图、饼状图、折线图添加了折线图

04-15

ECharts是由百度开发的一款开源的JavaScript可视化库，它提供了丰富的图表类型，包括柱状图、饼状图和折线图等，适用于各种数据可视化场景。在Java ECharts中，你可以直接通过Java代码来生成这些图表的配置，然后将...

vue中使用echart绘制柱状图、折现图、饼状图

upStar1的博客

05-19

4654

echarts有几个主要的字段，title、legend、xAxis、yAxis、tooltip、series。 title 图表的标题 legend 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图。 xAxis 配置x轴数据、样式、名称 yAxis 配置y轴数据、样式、名称 tooltip 鼠标放到图上展示的数据样式，trigger: 'axis' (有axis/item...

vue3:十二、图形看板- echart图表-柱状图、饼图

最新发布

weixin_46001736的博客

05-09

1383

vue3:十二、图形看板- echart图表-柱状图、饼图

Echarts图表不显示问题

m0_62833821的博客

10-31

2206

2.有可能是因为没给图表加上样式，长宽没有设置，所以导致看不到图表，此时只要给图表加上长宽就行。在div中加上ref，然后调用的时候引用就好。

【已解决】Echarts饼图数据动态渲染无法显示

weixin_44135909的博客

05-17

1935

草稿

Echarts图标无法显示问题解决

qq_34422681的博客

09-23

3484

本人前端菜鸟，想要使用Echarts进行饼状图绘制，但是按照教程上的方法进行操作之后一直无法显示出饼状图（前端页面上一片空白，没有任何显示）。

Echarts中地图不显示问题总结

weixin_61933613的博客

01-21

4502

摘要：近期项目中需要使用一些图表，使用Echarts过程中遇到一些问题，记录下避免反复踩坑。

ECharts 图表渲染问题图表显示不出来

yingzi__shadow的博客

01-08

3886

2.echarts组件没导入，新版echarts导入有import echarts from 'echarts' 变成import * as echarts from 'echarts'但使用方法不变。3.在create中给数据赋值在mounted()中调用，由于异步请求的原因，可能在调用方法之前，数据还没有填充完全。所以可以在create()赋值完之后调用渲染图像方法。1.显示框（图标显示区域）没设置大小。

echarts 中图表实例和暂无数据切换，图表不显示问题

Y_Cfeng的博客

08-17

1423

echarts 中图表无数据于自定义暂无数据实现来回切换，图表不显示问题。最终暂无数据效果，这样就解决了来回切换，图表正常展示问题。

解决按需引入 ECharts 后图例不显示的问题

taoerchun的专栏

09-29

1万+

众所周知，我们在项目中如果能够按需引入模块，这将大大缩小项目体积，避免不必要的性能耗费。在 ECharts 官网教程中有一段按需引入 ECharts 的代码示例，细心的小伙伴会发现这段代码中并没有在 setOption 中配置 legend ，如果将这段代码直接粘贴使用，看到的效果便是没有图例。网上查询，也有不少人遇到这个问题在网上提问，一些人是因为 legend.name 与 ser...

echarts图表不显示或刷新后才显示的解决办法之一

热门推荐

Yukinoshita_kino的博客

05-20

2万+

echarts图形界面无法显示或者刷新页面后才显示的可能原因及解决办法

Echarts图表使用后台数据不显示问题解决

yrrjiayou的博客

05-13

9368

Echarts图表使用后台数据不显示问题解决

echart饼状图设置参数

03-15

### ECharts 饼状图 参数设置方法与示例 ECharts 提供了丰富的配置项来满足不同场景下的需求。以下是关于如何在 ECharts 中配置饼状图参数的具体说明以及代码示例。 #### 基本配置结构 ECharts 的饼状图主要通过 `series` 属性中的 `type: 'pie'` 进行定义[^1]。以下是一些常见的配置选项及其作用： - **color**: 定义图表的颜色序列，适用于整个图表的数据点。 - **radius**: 控制饼状图的内外半径比例，默认为 `'0%' ~ '75%'`。 - **roseType**: 将饼状图转换为南丁格尔玫瑰图，可选值为 `'radius'` 或 `'area'`。 - **label**: 自定义标签样式，控制数据名称和数值的显示方式。 - **data**: 图表的实际数据源，通常是一个数组对象集合。 #### 示例代码下面提供了一个完整的配置实例，展示了如何自定义颜色、调整大小并启用半径模式。 ```javascript // 初始化 ECharts 实例 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); // 配置项 var option = { title: { text: '饼状图示例', subtext: '来自虚构数据', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['云南', '北京', '山东', '河北'] }, series: [ { name: '地区分布', type: 'pie', radius: ['40%', '70%'], // 调整饼图大小 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: true, position: 'outside' }, emphasis: { label: { fontSize: 20, fontWeight: 'bold' } }, roseType: 'radius', // 启用半径模式 color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f'], // 自定义颜色 data: [ {value: 30, name: '云南'}, {value: 26, name: '北京'}, {value: 24, name: '山东'}, {value: 25, name: '河北'} ] } ] }; myChart.setOption(option); ``` 上述代码实现了以下几个功能： 1. 使用 `radius` 设置饼图的尺寸范围[^4]。 2. 应用了自定义配色方案以增强视觉效果。 3. 启用了 `roseType: 'radius'` 来改变默认的面积模式为半径模式。 4. 添加了工具提示 (`tooltip`) 和图例组件 (`legend`)，以便更直观地理解数据。 #### 关键属性解析 - **Grid 设置** 虽然网格 (grid) 主要用于直角坐标系上的图表（如柱状图或折线图），但在某些情况下也可以配合饼状图使用。例如，在布局复杂页面时，可以利用 grid 组件指定绘图区域的位置和大小。 - **mounted 生命周期钩子** 如果是在 Vue.js 环境下开发，则可以在 `mounted()` 函数中完成 ECharts 实例化操作[^2][^3]。如下所示： ```javascript export default { mounted() { let myChart = echarts.init(document.getElementById('chart')); myChart.setOption({ series: [{ type: 'pie', data: [{value: 10, name: 'A'}, {value: 20, name: 'B'}] }] }); } } ``` ---