echarts中不同颜色图形分别设置不同颜色的分割线

实现效果如图：

首先我们要知道，一个坐标轴对应的分割线只有一条，设置颜色时肯定也只能设置单一的一种，那么想要实现这个需求， 就是要在原有的基础以上多创建一个坐标轴，这个案例时y轴分割线，所以，需要写的y轴个数应该是2才可以实现 。通过查阅文档我们可以知道，yAxis也是可以写成 数组形式 的，数组中可以包含若干个对象，那么每个对象就对应着一个坐标轴，分别设置每个坐标轴的分割线颜色作为备选项

在文档中series有一个 yAxisIndex 属性,它可以通过索引值指定y轴数组中对应的轴线并进行使用，当然是在yAxis是数组的前提下才可以使用（存在多个坐标轴），在为了设置分割线的情况下同样也要给坐标轴’value‘类型的type，其他涉及到y轴的样式也是可以一并进行设置

①准备：样式根据需求设置

②设置：属性值为1,则代表这个线的值会渲染到第二个y轴上，第二个y轴的样式也会投射到这个线的上面

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

---