echarts自适应div大小,vue echarts自适应
本文主要介绍Vue实现Echarts图表宽高适配的实践。通过示例代码非常详细的介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
:
目录
1.安装和介绍2。定义防抖功能3。绘制图表代码初始化方法调整大小方法官网说明
1. 安装并引入
npm安装电子图表-保存
//main.js
//从“echarts”导入e charts；
从“echarts”导入*作为e charts；//如果安装了echarts 5或以上版本，需要这样介绍。
Vue.prototype.$echarts=echarts
2. 定义防抖函数
portal:Vue中防抖、节流和应用场景功能的实现
//utils/common.js
//防抖
function _debounce(fn，延迟=300) {
var timer=null
返回函数(){
var _ this=this
var args=参数；
if(timer)clear time out(timer)；
timer=setTimeout(function () {
fn.apply(_this，args)；
}，延迟)；
};
}
导出{
_去抖，
}
3. 绘制图表代码
模板
div class=图表
div id= lineChart :style= { width: 100% ，height: 400px }/div
/div
/模板
脚本
从“@/utils/common.js”导入{ _debounce }
导出默认值{
data() {
return { }；
},
方法：{
drawLine() {
//根据准备好的dom初始化echarts实例
让折线图=这个。$ e charts . init(document . getelementbyid( line chart )；
lineChart.setOption({
标题：{
正文：“降雨-流量关系图”，
x:中心，
},
xAxis: {
类型：“类别”，
数据：[周一，周二，周三，周四， Fri ，周六，周日]，
},
亚西斯：{
类型：“值”，
},
系列：[
{
数据：[820，932，901，934，1290，1330，1320]，
类型：“行”，
},
],
});
},
resize charts:_ de bounce(function(){
这个。$ e charts . init(document . getelementbyid( line chart ))。调整大小()
},500)
},
已安装(){
this . drawline()；
window . addevent listener( resize ，this . resize charts)；
},
销毁前(){
window . addevent listener( resize ，this . resize charts)；
},
};
/脚本
init 方法
创建一个ECharts实例并返回ECharts实例。不能在单个容器上初始化多个echartsInstances。
(DOM:HTMLDivElement HTMLCanvasElement，主题？Objectstring，opts？ {
devicePixelRatio？编号，
渲染器？字符串，
useDirtyRect？boolean，//v 5 . 0 . 0支持。
宽度？数字字符串，
身高？数字字符串，
现场？字符串
})=ECharts
Dom:实例容器，通常是具有高度和宽度的div元素。
注意：如果div是隐藏的，ECharts可能无法获得div的高度和宽度，从而导致初始化失败。此时，您可以显式指定div的style.width和style.height，或者在div显示后手动调用echartsInstance.resize来调整大小。
ECharts 3支持直接使用画布元素作为容器，这样在图表绘制完成后，画布就可以作为图片直接应用到其他地方。比如在WebGL中作为地图使用，相比echartsInstance.getDataURL生成的图片链接，可以支持图表的实时刷新
主题：应用程序的主题。它可以是主题的配置对象，也可以使用已经通过echarts.registerTheme注册的主题名称
Opts:附加参数。以下是可用的选项：
devicePixelRatio设备的像素比例，浏览器的默认值是window.devicePixelRatio
支持“画布”或“svg”的渲染器。请参见使用画布或SVG渲染。
UseDirtyRect打开脏矩形渲染，默认情况下为false。查看ECharts 5的新功能。
宽度可以以像素为单位显式指定实例宽度。如果传入的值为null/undefined/auto ，则表示自动取dom(实例容器)的宽度。
高度可以以像素为单位显式指定实例高度。如果传入的值为null/undefined/auto ，则表示自动取dom(实例容器)的高度。
locale使用的语言具有两种内置语言“ZH”和“EN”，还可以通过使用echarts.registerLocale方法注册新的语言包。有关当前支持的语言，请参见src/i18n。
如果不指定主题，在输入opts之前还需要输入null，比如：constchart=echarts.init (DOM，null，{ renderer: SVG })；
resize 方法官网解释
改变图表大小，当容器大小改变时需要手动调用。
(opts？ {
宽度？数字字符串，
身高？数字字符串，
沉默？布尔型，
动画？ {
持续时间？数字
缓和？字符串
}
})=ECharts
参数：
Opts可以是默认的。以下是可用的选项：
宽度：可以以像素为单位显式指定实例宽度。如果传入的值为null/undefined/auto ，则表示自动取dom(实例容器)的宽度。
高度：可以以像素为单位显式指定实例高度。如果传入的值为null/undefined/auto ，则表示自动取dom(实例容器)的高度。
无声：是否禁止投掷项目。默认值为false。
动画：调整大小时是否应用过渡动画，包括持续时间和缓动。默认持续时间为0，即不应用任何过渡动画。
提示：
有时图表会放在多个选项卡中。初始化图表时，那些最初隐藏的选项卡可能无法绘制，因为它们无法获得容器的实际高度和宽度。因此，当切换到这个选项卡时，您需要手动调用resize方法来获得正确的高度和宽度并刷新画布，或者在opts中显示图表的指定高度和宽度。
门户：Echarts的官方文件
这就是本文关于实现Vue Echarts图表的宽度和高度适应的实践。关于Vue Echarts图表宽高适配的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。