echarts折线图图例-echarts 图例之间的间距怎么设置

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

01

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

02

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

03

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

04

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

05

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

06

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

07

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

08

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

效果图如下:

完成步骤:

1.创建dom容器,并设置宽高,以及ref,数据从接口提前获取好

2.创建echarts实例,并在mounted里调用

3.绘制图表

4.setOption一下

(initOption);

1、打开echarts官方实例页面,点击第一个折线图。

2、进入页面后,可以看到数据比较少,所以横坐标文字全部都显示出来了。

3、修改左侧的option内容,在xAxis的data数组中再添加两行内容,同时,在series中添加对应数量的值。

4、运行后,可以看到x横坐标已经按照图形大小,自动间隔显示了文字。如果没有特殊要求,这个就可以满足当内容少时,全部显示横坐标文字,当内容多时,自动间隔显示文字。

5、在option的xAxis区域添加axisLabel:{interval:0},这个语句的意思是,设置横坐标的文字全部显示,不间隔。

6、再次运行就可以看到横坐标的内容全部显示了,但是由于空间不够,内容都挤到一起去了。

7、将间隔值修改为5,axisLabel:{interval:5},再次运行,就可以看到x横坐标内容已经按照要求间隔显示了。