记录问题:解决echarts设置宽度100%,结果变成了100px(通过display控制echarts显隐也存在这个问题)

问题描述:
一个项目中,通过按钮控制echarts的显隐,设置echarts的宽高为100%,刚开始没问题,但是通过按钮控制显隐的时候,发现echarts并未显示,但是通过chrome调试,可以发现echarts已经初始化完成,但是显示的canvas的大小为100*0,如下图显示

问题展示

如果将echarts的宽高使用具体的数值表示,比如:设置成800px,会发现可以显示,宽高都是正常的

问题展示
因此,可以判断,出现这样问题的原因是:使用百分比显示,再通过按钮控制显隐的话,是echarts没有自适应宽高引起的,所以需要再打开echarts的方法中添加echarts的resize()方法,让它重新计算。
代码如下:

openEcharts(){
	// this.xxx.chart是你的echarts
	this.$nextTick(() => this.xxx.chart.resize());
}

注意:

  1. 使用了百分比来显示echarts,并通过display 来控制 echarts 显隐,比如:使用了 v-show,可以这么用。
  2. 如果是 el-tabs 的话,不需要这样,只需要使用它的 lazy 属性,设为true,延时加载即可。
  • 7
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个使用 Flask 和 Echarts 实现世界地图图层显隐、搜索标绘、快速标注和快速追踪的简单示例: 1. 安装 Flask 和 Echarts ``` pip install Flask pip install pyecharts ``` 2. 创建 Flask 应用并定义路由 ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') ``` 3. 创建 HTML 模板和 JavaScript 代码 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts Map Demo</title> <style> #chart { width: 100%; height: 600px; } </style> </head> <body> <div id="chart"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script> <script> var myChart = echarts.init(document.getElementById('chart')); // 初始化地图 myChart.setOption({ bmap: { center: [104.114129, 37.550339], zoom: 5, roam: true }, series: [{ type: 'map', map: 'world' }] }); // 标绘点 function addMarker(name, lng, lat) { myChart.setOption({ series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [{ name: name, value: [lng, lat] }], symbolSize: 10, itemStyle: { color: 'red' } }] }); } // 显示/隐藏图层 function toggleLayer(layerName) { var series = myChart.getOption().series; for (var i = 0; i < series.length; i++) { if (series[i].name === layerName) { series[i].visible = !series[i].visible; myChart.setOption({ series: series }); break; } } } // 搜索标绘 function searchMarker(name) { var series = myChart.getOption().series; for (var i = 0; i < series.length; i++) { if (series[i].type === 'scatter' && series[i].data[0].name === name) { myChart.setOption({ bmap: { center: series[i].data[0].value } }); break; } } } </script> </body> </html> ``` 4. 在路由中渲染 HTML 模板 ```python @app.route('/') def index(): return render_template('index.html') ``` 5. 在 HTML 中调用 JavaScript 函数实现交互功能 ```html <button onclick="toggleLayer('world')">Toggle World Map</button> <button onclick="toggleLayer('china')">Toggle China Map</button> <input type="text" id="markerName"> <button onclick="searchMarker(document.getElementById('markerName').value)">Search Marker</button> <button onclick="addMarker('Beijing', 116.4074, 39.9042)">Add Marker</button> ``` 6. 运行 Flask 应用 ```python if __name__ == '__main__': app.run() ``` 通过上述步骤,我们就可以使用 Flask 和 Echarts 实现世界地图图层显隐、搜索标绘、快速标注和快速追踪的功能了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值