怎么让echarts折线图铺满整个div

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么让echarts折线图铺满整个div相关的知识,希望对你有一定的参考价值。

设置
grid:
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
,
为echarts在div中的位置,调整这几个值变小就可以填充满
参考技术A top,bottom,left,right可以设置echart在div内的位置

如何用Echarts制作标准折线图

参考技术A 我们经常使用Echarts制作各种图表,那么如何运用Echarts制作标准折线图呢?下面我给大家演示一下。

首先打开Sublime Text软件,新建一个HTML文档,并在文档中添加如下图所示的HTML结构

接下来运用scripts标签在HTML中引入echarts的库文件,如下图所示

然后我们在body标签中创建一个div区域用来存放折线图,如下图所示,注意给div设置高度

接下来我们通过echarts的init方法对刚才创建的div区域进行初始化,如下图所示

然后我们设置折线图的参数,包括X,Y坐标轴数据,折线图标题等信息,如下图所示

接下来在series参数中设置折线图所需要的数据,如下图所示,一条折线配置一个大括号

参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域,如下图所示

最后我们运行HTML文件,就可以看到如下图所示的标准折线图了,点击顶部的折线标题可以隐藏或者显示折线

以上是关于怎么让echarts折线图铺满整个div的主要内容,如果未能解决你的问题,请参考以下文章

如何用Echarts制作标准折线图

如何用Echarts制作标准折线图

echarts中多个折线图怎么添加滚动条

echarts,折线图,我想设置X轴每个刻度的固定宽度该怎么设定呢

echarts中折线比例为0怎么连接

Echarts折线图数据动态获得