在绘制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. docker安装出现"Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?"

    今天按照这个教程使用WSL安装docker时遇到了个问题: 使用命令:$ docker search mysql 出现:Cannot connect to the Docker daemon at u ...

  2. ZOJ - 3123 Subsequence (滑动窗口)

    题意:给定N个数,求和大于等于S的最短连续子序列的长度. 分析:滑动窗口即可.两种写法. 1. #include<cstdio> #include<cstring> #incl ...

  3. InstrumentationTextCase 测试

    <instrumentation        android:name="android.test.InstrumentationTestRunner"        an ...

  4. Pandas_one-hot encoding与dummy encoding

    Pandas_特征编码 one-hot encoding 基本思想是将离散型特征的每一种取值都看成一种状态,保证每一个取值只会使得一种状态处于激活状态. 编码函数pd.get_dummies() du ...

  5. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:Spring中Bean的作用域

    作用域的种类 Spring 容器在初始化一个 Bean 的实例时,同时会指定该实例的作用域.Spring3 为 Bean 定义了五种作用域,具体如下. 1)singleton 单例模式,使用 sing ...

  6. JavaBean和json数据之间的转换(一)简单的JavaBean转换

    1.为什么要使用json? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,因为其高性能.可读性强的原因,成为了现阶段web开发中前后端交互数据的主要数据 ...

  7. python刷LeetCode:14. 最长公共前缀

    难度等级:简单 题目描述: 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower",& ...

  8. Linux学习打卡20200214

  9. 在h5页面上添加音乐播放

    接到需求说要做一个h5轮播图,同时配上背景音乐. Html部分: <!--音乐开始--> <div id="music"> <div id=" ...

  10. VS2013的工程移植到VS2008

    VS2013的工程完成后,用VS2008创建一个名称一样的工程(大小写也一样). 具体过程参考http://blog.csdn.net/sz76211822/article/details/42775 ...