echarts 图设置高度_Echarts 如何设置图表内容的高度 ?_xiangzi92的博客-程序员秘密

技术标签: echarts 图设置高度  

这是生成的图表: x 已经贴到div最下面了. 能不能让它整体上去一点;

类似这样 :

我的option:

var option = {

toolbox: {

feature: {

dataZoom: {

yAxisIndex: 'none'

},

restore: {},

saveAsImage: {}

}

},

backgroundColor: 'white',

title: {

text: '趋势',

textStyle: {

fontWeight: 'normal',

fontSize: 14,

color: '#029BE5'

}

},

tooltip: {

trigger: 'axis',

axisPointer: {

lineStyle: {

color: '#57617B'

}

}

},

legend: {

icon: 'rect',

itemWidth: 14,

itemHeight: 5,

itemGap: 13,

data: ['本期', '环比'],

textStyle: {

fontSize: 12,

color: '#000'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [{

type: 'category',

boundaryGap: false,

axisLine: {

lineStyle: {

color: '#57617B'

}

},

axisLabel: {

rotate: 45

},

data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']

}],

yAxis: [{

type: 'value',

axisTick: {

show: false

},

axisLine: {

lineStyle: {

color: '#57617B'

}

},

axisLabel: {

margin: 10,

textStyle: {

fontSize: 14

}

},

splitLine: {

lineStyle: {

color: '#57617B'

}

}

}],

series: [{

name: '本期',

type: 'line',

smooth: true,

symbol: 'circle',

symbolSize: 5,

showSymbol: false,

lineStyle: {

normal: {

width: 1

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgba(137, 189, 27, 0.3)'

}, {

offset: 0.8,

color: 'rgba(137, 189, 27, 0)'

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowBlur: 10

}

},

itemStyle: {

normal: {

color: 'rgb(137,189,27)',

borderColor: 'rgba(137,189,2,0.27)',

borderWidth: 12

}

},

data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]

}, {

name: '环比',

type: 'line',

smooth: true,

symbol: 'circle',

symbolSize: 5,

showSymbol: false,

lineStyle: {

normal: {

width: 1

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgba(0, 136, 212, 0.3)'

}, {

offset: 0.8,

color: 'rgba(0, 136, 212, 0)'

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowBlur: 10

}

},

itemStyle: {

normal: {

color: 'rgb(0,136,212)',

borderColor: 'rgba(0,136,212,0.2)',

borderWidth: 12

}

},

data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]

}]

};

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36218209/article/details/112950513

智能推荐

JS数组中的方法 flat(),flatMap()_js flatmap_冷太阳a的博客-程序员秘密

它与map连着深度值为1的flat几乎相同,但flatMap通常在合并成一种方法的效率稍微高一些。官方解释该方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。一个新的数组,其中每个元素都是回调函数的结果,并且结构深度depth值为1。//只会将flatMap中的函数返回的数组“压平”一层。指定要提取嵌套数组的结构深度(降维深度),默认值为1。数组中正在处理的当前元素的索引。当前正在数组中处理的元素。//返回新数组的元素。...

hdoj 1588 矩阵快速幂 二分等比数列求和模板_acblacktea的博客-程序员秘密

等比数列求和可以二分#include<cstdio>#include<cstring>#include<algorithm>#include<iostream>#define LL long longusing namespace std;LL mod,n,k,b;//快速幂struct ma{ LL m[4][4],row,col; ma() {

git分布式的理解----简单服务端搭建_afz8572的博客-程序员秘密

  Git是分布式的,并没有服务端跟客户端之分,所谓的服务端安装的其实也是git。Git支持四种协议,file,ssh,git,http。ssh是使用较多的,下面使用ssh搭建一个免密码登录的服务端。  1、提前安装git跟sshserver;  2、创建一个用户,用来运行git服务;  新建一个用户,叫gituser,然后切换到gituser的默认目录,创建一个叫.ssh...

七种方式求斐波那契(Fibonacci)数列通项_hackbuteer1的博客-程序员秘密

一:递归实现   使用公式f[n]=f[n-1]+f[n-2],依次递归计算,递归结束条件是f[1]=1,f[2]=1。二:数组实现   空间复杂度和时间复杂度都是0(n),效率一般,比递归来得快。三:vector实现   时间复杂度是0(n),时间复杂度是0(1),就是不知道vector的效率高不高,当然vector有自己的属性会占用资源。四:queue实现   当然

LeetCode 题练习记录_zgscsed的博客-程序员秘密

LeetCode 数组标签类题练习第一天leetcode283-- 移动零

什么是分布式应用_dituicyqz的博客-程序员秘密

分布式应用程序是指应用程序分布在不同计算机上,通过网络来共同完成一项任务。通常为服务器/客户端模式。互联网用户无法完全控制他们在今天的网站上分享的数据。以太坊(Ethereum)的独特之处在于它试图将区块链作为一种方法来纠正其设计者所认为的网络设计中有问题的部分。这就像一个“分散的应用程序商店”,任何人都可以发布他们不可阻挡的应用程序(dapps),而不像今天的应用程序(比如 Gmail 或 Uber),不需要一个中间人来管理或管理用户的信息。Dapps 直接连接用户和提供者。一个例子就是使用这

随便推点

POJ 2826 An Easy Problem?!_salvare219w_Salvare219的博客-程序员秘密

题目链接:POJ2826以后题目都不贴算了。。难弄又没啥意义,链接上面也有。这题就是一个几何细节题 有很多情况 #include#include#include#include#include#includeusing namespace std;struct Point{ double x,y; Point(double

那些优秀的python代码_acb3000的博客-程序员秘密

时间:2019-04-18 收藏:PangYuaner标题:Python如何生成树形图案地址:https://www.jb51.net/article/132049.htm标题:用python-turtle画分形树叶图地址:https://blog.csdn.net/the_king_of_coder/article/details/81874879标题:Py...

Spring的声明式事务管理(李刚 轻量级javaEE 企业应用实战-三大框架整合开发)..._aodaidi6752的博客-程序员秘密

最近在学习李刚著的《轻量级J2EE企业应用实战》,这本书写得条例清晰,通俗易懂,非常容易上手。在学习过程中,我自己参考该书做了些例子。下面是对Spring的声明式事务管理的总结和示例:通常建议采用声明式事务管理。声明式事务管理的优势非常明显:代码中无需关于关注事务逻辑,不需要修改业务逻辑代码,在业务逻辑中可以专心业务逻辑代码的编写,无需编写大量的事务逻辑代码。让Spring声明式事务...

Hibernate4从入门到精通七——————ORM之Many和One的关系_arronxu1989的博客-程序员秘密

一、ManyToOne单向1、在包org.zttc.itat.model下新建:Student.javapackage org.zttc.itat.model;public class Student { private int id; private String name; private String no; private Classroom class

HDU 1827 Summer Holiday(tarjan求强连通分量+缩点构成新图+统计入度+一点贪心思)经典缩点入门题..._Y先森0.0的博客-程序员秘密

Summer HolidayTime Limit: 10000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 4574    Accepted Submission(s): 2078Problem DescriptionTo see a World ...

推荐文章

热门文章

相关标签