echarts小记——div没有设置样式图表展示不出来

最新推荐文章于 2024-08-15 14:53:09 发布

Sunlalalla

最新推荐文章于 2024-08-15 14:53:09 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： echarts

本文链接：https://blog.csdn.net/Sun_of_Rainy/article/details/86707250

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

最近做的项目与echarts相关，发现你要给某div里面填充echarts图表，如果没有加样式高度和宽度，echarts图表就不会渲染出来

下面是我要放echarts图表的div

一开始的代码

<div class="main_table t_btn3" id="chart_9">
                  
                </div>

修改过后

<div class="main_table t_btn3" id="chart_9" style="width: 100%; height: 280px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;">

</div>

然后图表展示出来了

echarts的页面填充的问题这里就不赘述了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sunlalalla

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ECharts样式崩了？我这里有解决方案！！！

weixin_45679977的博客

12-24

1199

一种正常的EChart写法官网的实例（嘿嘿） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="e...

echarts图表不显示

zhaoq6的博客

02-07

3478

项目场景： vue中使用echarts折线图，需要点击获取数据然后显示对应的折线图问题描述：显示折线图时发现太小，只能显示一部分，图表大小并没有自适应，初始化时已经给了resize this.linechart = echarts.init(this.$refs.linechart); this.linechart.setOption(this.lineOption); window.addEventListener("resize", () => { this.linechart.resi

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

echarts插件——关于echarts在默认隐藏的div中不显示的问题

最新发布

LQlove1的博客

08-15

517

直接在请求结束后再去调用this.webViews()方法，渲染的时候用this.$nexttick会导致图表不渲染。在this.webViews()方法中添加下面的方法，就可以解决。

vue echarts在tab选项卡中样式丢失

辞忧*的博客

03-09

593

echarts图表会在页面加载时绘图，但是在tab选项卡中如果进行切换，第一个选项卡的echarts样式就会失效，宽度会默认变成100px。查明原因后发现是因为tab切换时会添加display: none; 属性，使当前echarts拿不到当前元素造成这种原因解决方法只需要 autoresize 这个属性就可以判断实例是否需要自动进行重绘 <v-chart :options="setDatas" autoresize style="height: 195px" /> .

react函数组件中使用echarts以及echarts设置了不显示，没有高度的原因

江理彭于晏的博客

11-30

3860

首先按需引入模块 // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // // 引入提示框和标题组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend' import 'echarts/lib/chart/pie'; 设置echarts const .

通过百度开源echarts图标插件用一个div动态生成多个echarts图表

08-18

1717

1、首先新建一个html文件，书写基本html语法，然后新建一个div 并且命名id为ebox 2、引入JQuery图表插件开源js库文件下载地址Download jQuery | jQuery 3、引入echarts图表插件开源js库文件下载地址ECharts 4、书写jquery和e...

echarts小记——图表渲染完之后执行某方法

Sun_of_Rainy的博客

01-15

9430

rendered方法，可以参考echarts官网的文档https://echarts.baidu.com/api.html#events.rendered 我的渲染页面方法的代码 function fillChart(obj){ var _cs = $(".layui-layer-close"); for(var y = 0; y<_cs.length; y++){...

echartsInstance. setOption 被忽略的配置项 notMerge —— Echarts小记

lm278858445的专栏

04-11

5207

通过设置 echartsInstance. setOption 的 notMerge 属性，保证涉及 series 变动的数据更新后的正常展示方式

ECharts——使用小记1：xAxis(nameLocation)，LinearGradient，lineStyle(shadow)，stack，legend

qq_33235680的博客

01-21

1821

ECharts——使用小记1：xAxis(nameLocation)，LinearGradient，lineStyle(shadow)，legend

天梯赛刷题小记 —— L1

m0_54674275的博客

03-21

596

最近在重刷天梯赛，浅浅记录一下，就不管简易程度了。感觉已经很久没有做题了qaq。L1-002 打印沙漏。

20200622小记——C#左侧菜单栏的实现（1）基本实现

叶舞枝头凤翔云空

06-22

1896

WPF： XAML <TreeView x:Name="treeView_Set" Grid.Column="0" FontSize="25" Margin="5,5,5,5"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}"> <Tex

echarts二次渲染时宽高为0图表不显示

womeiqianlene的博客

04-30

2223

echarts二次渲染时宽高为0图表不显示原因：echarts在dom树还没有构建完成时开始渲染，此时宽高还没赋值。导致图表宽高为0并不显示解决方法：方法一：使用this.nextTick()方法中调用开始绘制图表的方法（this.nextTick()方法中调用开始绘制图表的方法（this.nextTick()方法中调用开始绘制图表的方法（this.nextTick()就是在dom树构建完成时...

echarts图标不显示的问题

斜杠青年博客

05-08

1985

你可以在echarts绑定的dom标签上添加 style=“height:100%; width:100%;” 即可显示！有时echarts的init初始化绑定的dom只有用Id才可以绑定，class绑定后不显示图标，那么设置宽高100%即可展示

echarts饼图实例（带注释，超详细）解决formatter无法处理数据的问题解决图标自适应大小的问题

shalDream的博客

09-13

4076

大家在使用echarts饼图时，经常遇到formatter无法处理精确数据的情况，怎么办呢？建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历 //首先建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历 var chartPie = echarts.init(document.getElementById("charPie")); var option = { backgroundColor: "#ffffff"

关于Echarts 显示隐藏后宽度高度变小问题

qq_41452433的博客

07-01

5896

Echarts 是现在程序员做图表用到比较多的一种技术，前段时间，我就用了一下Echarts,我原本是将饼图先隐藏，然后点击按钮让它再显示出来，但是再显示时，饼状图出现了问题，它变得特别小，根本不能用，然后，就此，我找了下原因原因：Echarts 图表是根据你定义的div 的样式来确定图表的大小，当图表隐藏时，Echarts会找不到div的宽和高，再次显示时它会给自己一个非常小的默认宽高值，所以在...

echarts控制台打印有数据，但是图显示不出来

weixin_43833610的博客

04-06

6059

原因：axios的异步问题，解决方法：必须先获取到数据再进行画图解决部分代码： this.getRes().then(res=>{ // console.log(res) if(res.code==200){ this.factorRes = res.data.data.factorRes; this.factorRes.f

Echarts图设置好了但是在页面无法显示问题

weixin_49160916的博客

04-23

7816

Echarts图设置好了但是在页面无法显示问题明明已经按照echarts官网的方式设置好了echarts图，甚至的按照示例一模一样的数据也无法在页面中显图形，但是用于装echarts图的容器却可以很正常的显示出来。在控制台中也能够正确打印出完成初始化的echarts图数据，那么原因可能是因为echarts图在初始化渲染的时候浏览器还没有加载好，所以无法显示。使用vue和jQuery都有的框架页面，浏览器和echarts加载都很快，但vue的组件创建和挂载速度相比浏览器和echarts的速度慢，以此导

php公众号第三方登录,微信公众号开发小记——3.接入三方登录

05-20

// 用户不存在，插入新用户信息 $nickname = mysqli_real_escape_string($con, $userinfo['nickname']); $headimgurl = mysqli_real_escape_string($con, $userinfo['headimgurl']); $sql = "INSERT INTO users ...