在绘制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. 3D打印技术的火爆,真的会让传统模具行业没落吗?

    当一种新生事物出现时,人们除了赞美它带来的新畅想外,往往还会对"旧事物"贬低几分--各种淘汰观点总是不绝于耳.但可惜的是,新生事物取代旧事物的事儿并不会必然发生.比如,直到现在广播 ...

  2. Elasticsearch开启试用x-pack license

    一.Elasticsearch 6.7.2开启trial  x-pack license:x-pack的license试用期只有30天 1.ES6.7.2版本默认已经安装了x-pack插件,这里就没有 ...

  3. cf 762C. Two strings

    因为要删去1个串(读错题),所以就直接二分搞就好了. 需要预处理出2个分别从头到尾,或从尾到头需要多长a串的数组,然后二分删去多长就好了. #include<bits/stdc++.h> ...

  4. 2.14 Java web 复习总结

    1.空指针异常原因(NullPointerExceptio)之一: 在Dao层里边 声明 Connection conn = DBUtil.getConn(); //不能少 Statement sta ...

  5. > 1> 2> &> /dev/null Linux重定向输出

    编译模拟器的 LINK 阶段产生了大量错误信息,定位不到第一行,所以将错误重定向到了一个文件: scons build/X86_VI_hammer_GPU/gem5.opt --default=X86 ...

  6. Egret Engine 2D - 遮罩

      矩形遮罩 shp.mask = new egret.Rectangle(20,20,30,50);   注意如果rec发生变化,需要重要将rec赋值给shp.mask 删除遮罩的方法 sprite ...

  7. mysql字符串操作

    https://h.w.com/lin/h ) 效果: https://h.w.com huangwanlin ) 效果: huang huangwanlin ) 效果: wanlin huangxi ...

  8. IBGP(内部BGP)的对等体组(命令解析)

    IBGP(内部BGP)对等体组配置解析: ①:创建对等体组. ②:定义对等体组策略,指定邻居路由器及所在的AS. ③:定义,更新源. ④:(若边界)定义自己下一跳. ⑤:加入对等体组. IBGP(内部 ...

  9. 全局唯一性ID生成方法小结

    全局ID通常要满足分片的一些要求:1 不能有单点故障.2 以时间为序,或者ID里包含时间.这样一是可以少一个索引,二是冷热数据容易分离.3 可以控制ShardingId.比如某一个用户的文章要放在同一 ...

  10. 尝试用kotlin做一个app(二)

    导航条 我想实现的效果是这样的 类似于ViewPager的效果,子类导航页面可以滑动,当滑动某个子类导航页面,导航线会平滑地向父类导航移动 ·添加布局 <!--导航分类:编程语言/技术文档/源码 ...