在绘制chart的方法中添加下面语句,则会在尺寸变化的时候,重新绘制图表

window.addEventListener("resize", function ()   {
myChart.resize();
});

完整如下:

drawLine () {
// 基于准备好的dom,初始化echarts实例
// let myChart = this.$echarts.init(document.getElementById(this.ids));
let myChart = this.$echarts.init(this.$refs[this.ids]);
let option = {
legend: {
data: ['净值', '余额']
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
let paramsEquity = params[0];
var date = new Date(paramsEquity.name);
let paramsBalance = params[1]
return '<span style="float:left;">' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '</span></br>' + '<span style="float:left;">净值: $' + paramsEquity.value[1] + '</span></br>' + '<span style="float:left;">余额: $' + paramsBalance.value[1] + '</span';
},
axisPointer: {
animation: false
}
},
xAxis: {
show: false,
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
show: false,
type: 'value',
boundaryGap: ['0%', '5%'],
max: this.maxMin[0],
min: this.maxMin[1],
axisLabel: {
formatter: '${value}'
},
splitLine: {
show: false
}
},
series: this.calSeries
}; // 绘制图表
myChart.setOption(option);
//
window.addEventListener("resize", function () {
myChart.resize();
});
}

echarts图表重设尺寸的更多相关文章

  1. bootstrap的tab中,echarts 图表宽度设为100%之后,会出现图表宽带变为100px的情况。只有第一个正常

    1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...

  2. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  3. 怎样把echarts图表做成响应式的

    如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...

  4. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  5. vue使用Echarts图表

    vue使用Echarts图表 童话_xxv 关注  0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...

  6. CSS 重设文章

    CSS 重设 http://blog.bingo929.com/css-reset-collection.html

  7. 【转】}目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  8. echarts图表第一个案例

    1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...

  9. echarts图表标签(axisLabel)折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

随机推荐

  1. cudaThreadSynchronize()

    // 调用CUDA kernel 是非阻塞的,调用kernel语句后面的语句不等待kernel执行完,立即执行.所以在 call_kernel(see kernel.cu) 中执行 m5op.dump ...

  2. UVALive 4287 SCC-Tarjan 加边变成强连通分量

    还是强连通分量的题目,但是这个题目不同的在于,问你最少要添加多少条有向边,使得整个图变成一个强连通分量 然后结论是,找到那些入度为0的点的数目 和 出度为0的点的数目,取其最大值即可,怎么证明嘛... ...

  3. OIer常见问题与错误总结

    作为一名OIer,无论是一名刚入门的蒟蒻,还是叱诧风云的神犇,相信都会难免去犯一些错误(废话不犯错误岂不是都满分了(ノへ ̄.).在这里总结了一些OIer常见易犯的错误,与大家共勉. 1.正常错误 可能 ...

  4. qt 中使用 c 语言文件

    qt 中直接使用 c 语言文件,c 文件可以直接包含,h 文件包含的时候,需要在 c++ 中添加额外信息,如下: #ifdef __cplusplus extern "C" { # ...

  5. 逆向-PE头解析

    目录 PE头解析 数据结构 IMAGE_DOS_HEADER IMAGE_NT_HEADERS 区块 PE头解析 PE 格式是Windows系统下组织可执行文件的格式.PE文件由文件头和对应的数据组成 ...

  6. js 工厂设计模式

    class Product{ constructor(name){ this.name = name; } init(){ alert(this.name); } } function Creator ...

  7. 51NOD1050 循环数组最大字段和

    N个整数组成的循环序列a11,a22,a33,…,ann,求该序列如aii+ai+1i+1+…+ajj的连续的子段和的最大值(循环序列是指n个数围成一个圈,因此需要考虑an−1n−1,ann,a11, ...

  8. [BJDCTF2020]The mystery of ip

    0x00 知识点 SSTI模板注入: 之前也写过: https://www.cnblogs.com/wangtanzhi/p/12238779.html SSTI模板注入: 模板注入涉及的是服务端We ...

  9. UVA - 10791 Minimum Sum LCM(最小公倍数的最小和)

    题意:输入整数n(1<=n<231),求至少两个正整数,使得它们的最小公倍数为n,且这些整数的和最小.输出最小的和. 分析: 1.将n分解为a1p1*a2p2……,每个aipi作为一个单独 ...

  10. 每天一点点之css - 动画-一个圆绕着另一个圆动(绕着轨迹运动)

    最近要开发一个类似星河的效果,需要小圆绕着一定的轨迹运动,这个时候我首先想到的是使用canvas来实现,在实现过程中发现这个实现起来不是很灵活,然后想到css3有动画也可以实现,下面是效果 注:图2是 ...