<p id="myChart" :style="{width: '100%', height: '345px'}"></p> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChartContainer = document.getElementById('myChart'); //用于使chart自适应宽度,通过窗体宽计算容器高宽 var resizeMyChartContainer = function(){ myChartContainer.style.width=(document.body.clientWidth-75)+'px' } //设置容器高宽 resizeMyChartContainer() // 基于准备好的dom,初始化echarts实例 var myChart = this.$echarts.init(myChartContainer) // 绘制图表 myChart.setOption({ title: { text: '启动次数' }, tooltip: {}, xAxis: { type: 'category', data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21'] }, yAxis: { type:'value' }, series: [{ type: 'line', data: [0,0, 0, 7, 0, 0,12], smooth:true, symbol: 'circle', symbolSize: 6, itemStyle:{ normal:{ color:'#fc8a0f', lineStyle:{ color:'#ff9c35' } } } }], }); window.onresize=function(){ resizeMyChartContainer(); myChart.resize(); } } }}</script>
补充知识:echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)
问题提出:
使用echars做完图表之后,需要根据浏览器窗口的缩放做自适应效果。
原因分析及解决方案:
echars的图标实例事实上并没有主动的去绑定resize()事件,就是说显示区域的大小改变内部并不知道,当你需要去做一些自适应的效果的时候,需要主动绑定这个时间才能达到自使用的效果,常见的如window.onresize = myChart.resize()
示例:
var map5 = echarts.init(document.getElementById('map5')); var option5 = { backgroundColor: '#def1f9', color: ['#c23531', '#1875ff'], title: { left: 10, top: 10, text: 'Bill charts for the past year' }, // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'], legend: { top: 30, right: 30 }, tooltip: {}, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'} ] } map5.setOption(option5); window.onresize = function () { setTimeout(function () { map1.resize() map2.resize() map3.resize() map4.resize() map5.resize() },10) }
重点:
window.onresize = function () { map1.resize() ; // 如果有多个图标变动,可写多个 }
推荐教程:《JS教程》
以上是在 Vue 中实现 Echarts 随窗体变化的详细内容。更多信息请关注PHP中文网其他相关文章!

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6
视觉化网页开发工具

WebStorm Mac版
好用的JavaScript开发工具