解决Echarts官网打开慢的问题

已于 2023-11-04 15:24:45 修改
阅读量4.1k 收藏 24
点赞数 9
分类专栏： 安装-配置教程 文章标签： echarts 前端 javascript
于 2023-07-12 11:15:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64760783/article/details/131677512
版权

解决在Windows系统中打开ECharts官网缓慢的问题。

问题描述：
正常情况下，在Windows环境中打开ECharts官网可能会遇到非常缓慢的情况，一直处于加载中，甚至打不开，那么做一些处理即可大大缓解这个问题。

解决办法：

host文件地址：C:\Windows\System32\drivers\etc

打开hosts文件，在文件最后追加上如下设置，然后保存即可。

151.101.2.132 echarts.apache.org

在测试就会发现：秒开

挖个坑：2023.7.12 该配置仍可用。但不保证永久可用，后续再更！！！

2023.10.23补更
上一次的方法已经不能用了，所以还是会出现打开很慢甚至打不开的情况，安利两个国内平替网站，速度很快，如果这两个网站一直维护的话，算是个半永久解决办法了，而且图表案例比官网的还要丰富，只不过代码也更复杂些。
Echarts图表集（有很多大佬二次开发的图表）：就当我是个链接
Echarts配置项文档（国内同步镜像）: 俺是个链接，是兄弟，就来点我！！！

如果后续出问题再更！！！

2023.11.3再更
嗯…，上面所有方式均失效！！！暂时比较忙，后续找到方法再更。[哭死，夭折的这么快…]

2023.11.4又更
有个图表的网址可以快速访问 和官网的图表库很像 一个平替网站

发渐稀
关注
  • 9
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
echarts-scatter:echarts散点图多点重合无法全部显示解决方案
05-02
scatter A Vue.js project 启动项目 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 注: demo.html为普通开发下的示例代码，直接打开即可看到效果，由于引用的是node_modules中的echarts.js文件，所以打开前依然需要npm intall下载所需依赖方可看到效果，否则会提示没有引入js文件的错误
解决echarts数据二次渲染不成功的问题
10-15
主要介绍了解决echarts数据二次渲染不成功的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts官网文档打开慢的解决方法
10-19 1万+
由于我们在做大数据屏的时候需要很多echarts图表，这个过程中也会遇到需要查询echarts官网文档、手册、配置项的时候，但是由于网站在国外，访问很慢或者打不开。针对上面的问题我们可以通过访问echarts网站国内镜像来加速访问。
ECharts图表首次加载不显示问题
最新发布
galaxyJING的博客
03-07 590
原本页面应该是一进去就加载显示echarts表，然而第一次进去不加载，需要关闭之后再打开才能正常加载。需要给在绘制图表的方法调用的时候加上nextTick就行了。
vue页面echarts卡顿问题
atu1111的博客
12-16 1万+
vue页面echarts卡顿问题 1.在vue中使用echarts使用setOption更新加载图形很慢   在vue中使用echarts和绘制柱状图，图例很多，但是只有100多条，但是绘制很慢。 this.myChart.setOption(this.option)   因为是在data中定义了myChart属性，在script中定义一个变量用来接收myChart，就可以解决这个问题,原因变量定义在data里，canvas触发了vue监听而更新，而每一次的更新，导致加载变慢 var myChart my
ECharts 网站访问慢解决办法（Window系统）
日积月累
07-22 5180
2、依次双击打开“windows”→“System32”→“drivers”→“etc”。在最下面添加151.101.2.132echarts.apache.org。3、在“etc”文件夹中，用记事本打开“hosts”文件。1、从桌面进入“计算机”，双击打开“C盘”。............
Echarts 问题解决 —— 图表数据过多导致浏览器卡顿
weixin_45041493的博客
09-13 1996
使用 Vue + Echarts 实现数据可视化点击数据量大的组件时，Echarts 渲染比较快但切换其他组件统计图时，会非常卡。
echarts 官网访问慢
清心寡欲的博客
04-03 2233
echarts官网访问特别慢，有的时候干脆访问不了，尝试在host文件加入ip地址也不可以，后来发现了以下地址，访问真的速度很快，还有很多demo样例。
Echarts 打不开或者打开很慢的解决方案
qq_37550440的博客
03-14 5135
echarts官网文档打开慢的解决方法，或者打开很慢的解决方案
解决ECharts官网打开缓慢的问题
Quber
11-22 5211
本章我们将解决在Windows系统中打开ECharts官网缓慢的问题。 1、问题描述 正常情况下，我们在Windows环境中打开ECharts官网可能会遇到非常缓慢的情况，一直处于加载中，甚至打不开，此时我们需要做一些处理即可。 2、解决办法 我们打开hosts文件，在文件最后追加上如下设置即可： 151.101.2.132 echarts.apache.org PS：hosts文件所在文...
Echarts加载慢该怎么解决
weixin_47317878的博客
11-15 4857
问题: 今天项目里面有个bug，就是项目的页面下面显示数据表格，上面显示数据分析图，但是切换页面的过程中，加载特别慢。:刚进页面，如果有数据请求到，那么肯定是同时加载数据表格和echarts，而表格相对稳定，加载echarts肯定要慢一些(所需性能相对大) 解决: 这时只需要在上面加上一个数据判断 v-if＝"data.length＞0" 大致可以理解成，当进入页面时候，dom开始加载，数据或前或后请求，exharts还在等待请求的数据然后再渲染，dom也需要等待echarts加载完成才算渲染
Echarts 数据量过大时加载渲染过程慢，一个 large 属性搞定
虎康的博客
05-12 4969
Echarts 数据量过大时加载渲染过程慢。
微信小程序Echarts覆盖正常组件问题解决
01-03
最近公司的项目中需要在小程序内使用echarts组件来展示数据，同时因为使用了自定义导航栏以及蒙版层，导致Echarts图形覆盖于所有组件的上方，不符合设计要求。  尝试解决的思路：  z-index：Echarts使用的是微信...
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 ...
echarts各省市级地图
06-21
官网地图包已经不可下载，这里包含全国地图，精确到市一级，样式请使用火狐打开，谷歌需要解决跨域问题打开才会有效果
echarts官网进不去,处理DNS了还是进不去
qq_66107576的博客
05-15 919
最近我的谷歌浏览器进不去echarts官网,按照网上的方法处理了DNS缓存,也还是进不去,这时候只需要把电脑连接的网络从WiFi换成手机热点即可,具体啥原因还不太明白!
vue 使用echarts图表 setOption多次很卡问题解决
一个爱好编程的怪兽
07-08 3281
在开发ISM组态软件时，使用echarts图表，拖拽图表很卡。在vue中使用echarts使用setOption更新加载图形很慢由于this.echartsView = echarts.init(view, null);初始化图表时，echartsView 变量是定义在data里，这就导致了图表setOption和resize时，canvas触发了vue监听而更新，而每一次的更新，导致加载变慢网上都是说把变量定义在script里，是可以解决，但是这样针对一个组件的情况，但是如果一个页面有多个组件，这样定义在
echart卡顿之奇葩经历
m0_46348803的博客
10-13 430
原因：项目没有添加事件管理者’passive’，而在谷歌浏览器里面 Chrome51 版本以后，Chrome 增加了新的事件捕获机制Passive Event Listeners ，当前仅支持mousewheel/touch相关事件，目前Chrome主要利用该特性来优化页面的滑动性能。项目上线两个月了，这段时候客户反馈 说查询木一个月业绩图标的时候直接卡死了，起初我以为是echarts 页面加载数据过多直接的原因，但是看了一下不应该，然后就一直在优化echart。好了不卡了 页面能够正常滑动了。
解决echarts官网打不开访问失败问题
热门推荐
ll_883963的博客
06-07 1万+
www
el-drawer抽屉打开 echarts图形加载不出问题
06-07
在使用 `el-drawer` 组件打开 `echarts` 图形时，可能会出现图形加载不出的问题。这通常是因为在抽屉打开时，`echarts` 图形的容器元素并没有正确计算其大小，导致图形无法正确显示。 解决方法： 1. 在 `el-drawer` 组件的 `opened` 事件中手动触发 `echarts` 图形的 `resize` 方法，重新计算容器大小。 ``` <template> <el-drawer :visible.sync="drawerVisible" @opened="handleOpened"> <div ref="chartContainer"></div> </el-drawer> </template> <script> import echarts from 'echarts'; export default { data() { return { drawerVisible: false, chartInstance: null }; }, methods: { handleOpened() { if (this.chartInstance) { this.chartInstance.resize(); } }, initChart() { const chartContainer = this.$refs.chartContainer; this.chartInstance = echarts.init(chartContainer); // ... } }, mounted() { this.initChart(); } }; </script> ``` 2. 使用 `echarts` 的 `autoResize` 配置项，自动监听容器大小的变化并重新渲染图形。需要注意的是，该配置项需要在初始化 `echarts` 实例时设置。 ``` <template> <el-drawer :visible.sync="drawerVisible"> <div ref="chartContainer"></div> </el-drawer> </template> <script> import echarts from 'echarts'; export default { data() { return { drawerVisible: false }; }, methods: { initChart() { const chartContainer = this.$refs.chartContainer; const options = { // ... // 设置 autoResize 配置项 autoResize: true }; const chartInstance = echarts.init(chartContainer, null, options); // ... } }, mounted() { this.initChart(); } }; </script> ``` 以上两种方法都可以解决 `el-drawer` 打开 `echarts` 图形加载不出的问题，选择哪种方式取决于具体需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值