如何用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文件，就可以看到如下图所示的标准折线图了，点击顶部的折线标题可以隐藏或者显示折线

echarts 添加一条平行于x轴的标示线是markline下面的属性：

data : [

[

{name: '标线1起点', value: 100, x: 50, y: 20},

{name: '标线1终点', x: 150, y: 120}

],

[

{name: '标线2起点', value: 200, x: 30, y: 80},

{name: '标线2终点', x: 270, y: 190}

],

..

]

1、首先打开任一浏览器，找到echarts的API文档中的“配置项”，展开“series”，type=line的就是折线图，此处可以看到折线图的各种设置项与允许的值。

2、打开echarts实例，点击折线图分类，找到并点击最基础的折线图。

3、打开的基础折线图的配置项和运行效果。修改左侧的series配置项，给折线图设置拐点大小为15。

4、点击【运行】按钮，右侧就可以看到拐点图形变大了 symbolSize:15。

5、最后给折线图的拐点图形修改为三角形，修改后，运行，就可以看到图形变成了三角形 symbol:"triangle"。

---