echarts坑（2）

最新推荐文章于 2023-12-13 16:07:48 发布
最新推荐文章于 2023-12-13 16:07:48 发布
阅读量207 收藏
点赞数
分类专栏： 笔记 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44221093/article/details/124626449
版权

更新数据不重新渲染

可能我的情况比较特殊，在网上找到很多方法，但都不能实现我要的效果

document.getElementById('echarts').setAttribute('_echarts_instance_', '')
//div的_echarts_instance_值改变了，就不会被匹配到,echarts会重新渲染出来
//但是我使用了，没效果

//通过nextTick重新渲染，也没效果
this.$nextTick(()) => {}

我的问题：

在这里插入图片描述
由图需求不要求使用分页，要自适应宽度去调整
自己的解决方案 可能会影响性能
就是自适应宽度后，重新去实例化echarts ，就会指定你的宽度去调整了

qq_44221093
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts中存在的_echarts_instance_属性--echarts刷新作用
a432qbc的博客
08-19 5172
$("#theme_btn").click(function () { var theme = $("#theme").val(); //echarts的渲染逻辑是这样的： //如果未实例化则进行实例化过程，在此期间会在div容器生成一个_echarts_instance_属性，该属性就是当前echarts的ID,然后进行后边的渲染操作，当我们刷新已经实例化的echarts图表时，echarts会先匹配该div容器上的_echarts_instance_属
echarts切换页面后加载不出来的问题
qq_42727641的博客
02-28 2632
项目上线后切换页面时发现echarts图表加载不出来了 查阅之后发现在setOption之前加一句 document.getElementById('容器id名称').setAttribute('_echarts_instance_', ''); 或者 document.getElementById('trend-chart').removeAttribute('_echarts_instance_'); 在重新创建之前，移除之前创建的实例或者清空。setOption的时候就会重新加载。
eachart横坐标字符串长度过长会自动不显示问题解决
smallwhite9527的博客
10-17 332
eachart横坐标字符串长度过长会自动不显示问题解决 增加该属性 axisLabel : {//坐标轴刻度标签的相关设置。 interval: 0,//将间距改为0， formatter : function(params){ var newParamsName = “”;// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 v...
错题笔记: echart-渲染过程
qq_43455862的博客
06-01 918
echart
echarts图表切换功能（不改变数据，只切换图形）
min的博客
05-26 8970
方法一：echarts自带（该方法能进行折线图和柱状图的切换，因为这两种图表渲染的数据格式是一致的） // 在options中加入以下配置即可 toolbox: { show: true, feature: { magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式） } } 方法二：自己进行数据处理，并重新渲染echarts（自己实操，想法
SSM+Neo4j+Echarts完整版
02-06
完整项目导入数据到Neo4j,通过jdbc查询Neo4j数据库,用SSM框架展示到前台,项目部署后可在前台批量导入数据,增量导入数据,添加节点,删除节点,修改节点,查询节点 有了它再也不用趟Neo4j的坑 解压密码是 neo4j
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上...
echarts百度地图热力图踩坑后项目实践案例源文件
07-04
在"html_css_Thermogram2"这个文件夹中，包含了HTML和CSS代码，它们是实现上述功能的基础。HTML文件可能包含ECharts的容器元素以及必要的页面结构，而CSS文件则用于定义样式，包括地图容器的样式、热力图的颜色渐变...
hooks_echarts:在React的钩子中使用echarts
05-06
hooks刚出来时我们就在使用，已经踩了很多坑而完善了这一整套开箱即用的框。 针对echarts进行了封装，菜单栏、面包屑等都做了自己的封装，对于icon都真正意义上进行了按需加载。 对于echarts常用的，都做了很详细的...
vue+iview+less+echarts实战项目总结
08-28
本篇文章是作者通过学习vue+iview+less+echarts制作一个小系统后，做的心得以及遇到的坑的总结，值得大家学习参考。
「ECharts」交互 API （echarts、echartsInstance）
imByte的博客
01-09 2031
「ECharts」交互 API （echarts、echartsInstance）
(已解决)echarts在vue中路由跳转后图表无法出现，附源码
linan996的博客
12-13 3964
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、无法出现图表的原因二、解决办法第一种第二种总结 一、无法出现图表的原因 1. 如果未实例化则进行实例化过程, 在此期间会在div容器生成一个_echarts_instance_属性, 该属性值其实就是当前echarts的ID, 然后进行后边的渲染操作. 2. 当页面跳转或者切换时，echarts会根据该属性进行判断是否重新进行渲染图表， echarts会先匹配改div容器上的_echarts_instance_属性值是否与实
Echarts图表清空
热门推荐
Ghjkku的博客
11-20 1万+
【代码】Echarts图表清空。
交互API（echarts对象和echartsInstance对象）
我的博客
09-21 939
目录 1.全局echarts对象 引入echarts.js文件之后就可以使用 init方法 初始化ECharts实例对象 使用主题 registerTheme方法 注册主题 只有注册过的主题，才能在init方法中使用该主题 registerMap方法 注册地图数据 $.get('json/map/china.json',function(data){ echarts.registerMap('china',data); }); geo组件使用地图数据 var...
echarts 出现的各种问题
丫丫不秃头噢---
07-14 813
目录 图表需要刷新才显示???? 双y轴显示???? 提示框样式更改???? 1.图表需要刷新才显示???? 问题表述：第一次进入页面，图表正常显示 。但回到首页之后再次进入此页面，图表不显示且无报错，返回数据也正常，画布也是正常的有绘制？？可是图表没了。需要刷新才会有？？？？ 找了一大圈问题，最后发现： echars在绘制图形的时候会给div添加属性_echarts_instance_，因此只需要将此属性移除并清空div内容即可重新绘制新的echarts图形。 这个解释算懵懂吧（echarts的
ECharts的高级使用
zag666的博客
04-04 2723
ECharts主题的使用 一、内置主题的使用 init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表需要使用的一套主题 默认内置了两套主题 , light dark var mCharts = echarts.init(document.querySelector("div"), 'dark') 二、自定义主题的使用 步骤： 1.在线编辑主题 https://www.echartsjs.com/theme-builder/ 2.下载主题的js文件 3.在html中导入js文件
Echarts重新渲染
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
03-04 7229
$("#theme_btn").click(function () { var theme = $("#theme").val(); //echarts的渲染逻辑是这样的: //如果未实例化则进行实例化过程, 在此期间会在div容器生成一个_echarts_instance_属性, 该属性值其实就是当前 //echarts的ID,...
echarts报错 Cannot read property ‘getAttribute‘ of undefined
飘来荡去这一生
09-07 4576
今天在review代码时，发现控制台莫名报错，Cannot read property 'getAttribute' of undefined 通过查看，问题定位在这一行，也就是echarts初始化的时候: const chart = echarts.init(this.$refs['chart']); 结合报错信息可以得知，错误原因是因为没获取到dom属性。 在vue中获取不到dom一般分为两种情况，一是在created中获取，这个时候只是创建了vue实例，dom并没有开始渲染。所以自然拿不到.
echarts 没画出来图形，dom报错宽高未识别
最新发布
weixin_43311271的博客
12-13 105
应当是你画布，父级使用了flex布局，找成了画布的宽高失效。当echarts 刷新时，画不出图形。解决方法：画布class上加上一句。
vue3+ts_echarts 画环形图表
06-03
要使用Vue3和TypeScript以及ECharts来绘制环形图表，首先需要安装ECharts和Vue3的相关依赖，可以使用以下命令进行安装： ``` npm install echarts vue@next @vue/runtime-core @vue/compiler-sfc vue-loader@next vue-template-compiler --save ``` 接着，我们在Vue3组件中引入ECharts并进行初始化，代码如下： ```html <template> <div ref="chart" class="chart"></div> </template> <script lang="ts"> import { defineComponent, ref, onMounted } from 'vue'; import * as echarts from 'echarts'; export default defineComponent({ name: 'EChartsPie', setup() { const chart = ref<HTMLDivElement>(); onMounted(() => { const chartInstance = echarts.init(chart.value); const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)', }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center', }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold', }, }, labelLine: { show: false, }, data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' }, ], }, ], }; chartInstance.setOption(option); }); return { chart, }; }, }); </script> <style scoped> .chart { width: 100%; height: 400px; } </style> ``` 在这个例子中，我们使用了`defineComponent`来定义一个Vue3组件，并使用`ref`来引用DOM元素，`onMounted`来在组件挂载后初始化ECharts并绘制图表。同时，我们还定义了一个`option`对象来配置ECharts图表的相关参数，最终使用`setOption`方法将图表绘制出来。 注意，在TypeScript中使用ECharts需要额外安装`@types/echarts`类型声明文件，可以使用以下命令进行安装： ``` npm install @types/echarts --save-dev ``` 以上就是使用Vue3和TypeScript以及ECharts来绘制环形图表的基本步骤，可以根据实际需要进行修改和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值