echarts图表重设尺寸
在绘制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图表重设尺寸的更多相关文章
- bootstrap的tab中,echarts 图表宽度设为100%之后,会出现图表宽带变为100px的情况。只有第一个正常
1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- vue使用Echarts图表
vue使用Echarts图表 童话_xxv 关注 0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...
- CSS 重设文章
CSS 重设 http://blog.bingo929.com/css-reset-collection.html
- 【转】}目前比较全的CSS重设(reset)方法总结
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
随机推荐
- spring boot 使用swagger
在pom.xml中添加maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId> ...
- SQL decode 函数的用法
decode 函数基本语法: decode(字段|表达式,条件1,结果1,条件2,结果2,...,条件n,结果n,缺省值): --缺省值可以省略 表示如果 字段|表达式 等于 条件1 时,DECODE ...
- Java自学-集合框架 Comparator和Comparable
Java Comparator和Comparable 步骤 1 : Comparator 假设Hero有三个属性 name,hp,damage 一个集合中放存放10个Hero,通过Collection ...
- 八十三、SAP中的ALV创建之二,ALV相关的类型池定义
一.与ALV相关的类型都是在TYPE-POOLS:SLIS中.我们来到SE11 二.常用的定义有fieldca和layout等,用于显示字段,和控制信息数据等. 三.我们以VBAK表为例,用ALV输出 ...
- POJ 1770 树形DP
咋一看确实想到的是树形DP,但是我一开始也马上想到环的情况,这样应该是不可以进行树形DP的,然后我自以为是地想用有向图代替无向图,而且总是从能量高的指向能量低的,这样自以为消除了环,但是其实是不对滴, ...
- Python MySQL 删除表
章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...
- QThread创建多线程程序
最近在阅读Qt 5.9 C++开发指南,为了加深对书本上内容的理解,参照书上的讲解尝试写了一些demo,用于以后工作中查阅,如果涉及侵权请告知,实例程序samp13_1 mythread.h #ifn ...
- Android-寒假学习-阶段总结(20集)-口算测试APP
说在前面: 1.视频教程:https://www.bilibili.com/video/av60445113/?spm_id_from=333.788.videocard.0 2.老师的源码:http ...
- HDU - 1114 Piggy-Bank(完全背包讲解)
题意:背包重量为F-E,有N种硬币,价值为Pi,重量为Wi,硬币个数enough(无穷多个),问若要将背包完全塞满,最少需要多少钱,若塞不满输出“This is impossible.”. 分析:完全 ...
- MVC将Base64 保存为图片
前台传来Base64字符串.本来可以直接保存数据库返回给图片 但是这样对数据库负担太重 传输也费时间.一搬都是存个地址在数据库 public ActionResult Injpg(string bas ...