*** eacharts多曲线情况下自定义y轴绘制分割线 ***

之前有算过动态去求最大值、最小值、平均值
仙人指路 =》 echarts动态设置y轴刻度的最大值、最小值、平均值

如何现在，我们要绘制自定义分割线~
何为自定义分割线？

绘制图如下图所示：

绘制第一步：

先绘制出简单的模块：

option = {
  title: {
    text: '自定义最大值-最小值-平均值',
    left: 'left'
  },
  legend: {
    // left: 'left',
    icon: 'rect' //矩形  //itemWidth: 25,  // 设置宽度 itemHeight: 15, // 设置高度itemGap: 40 ,// 设置间距,
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      id: 'AreaChart',
      type: 'line',
      symbolSize: 1,
      itemStyle: {
        normal: {
          color: 'rgb(0,153,255)'
        }
      },
      markArea: {
        silent: true,
        itemStyle: {
          normal: {
            color: 'rgb(0,153,255,0.2)'
          }
        },
        data: [
          [
            {
              yAxis: 0
            },
            {
              yAxis: 0
            }
          ]
        ]
      },
      markLine: {
        silent: true,
        data: [
          {
            yAxis: 0,
            lineStyle: {
              type: 'dashed',
              width: 1.2,
              color: 'rgb(0,103,255)'
            }
          },
          {
            yAxis: 0
          },
          {
            yAxis: 0
          }
        ]
      }
    },
    {
      name: 'get',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

得到图形如下

我认为 将绘制分割线在series里绘制出来是一种比较简单的办法，你后续可以动态绘制曲线，新增曲线，改变曲线值

绘制第二步

曲线绘制好了，分割线也绘制好了，现在要将自定义的分割线值传入option,改变值

如果将分割线曲线绘制在第一条的时候，可以直接使用option.series[0].方法 去改变

方法如下：

option.series[0].markLine.data[0].yAxis = 200; // 中间高亮额定值线
option.series[0].markLine.data[1].yAxis = 150; // 下箭头
option.series[0].markLine.data[2].yAxis = 250; // 上箭头
option.series[0].markArea.data[0][0].yAxis = 250; // 区域
option.series[0].markArea.data[0][1].yAxis =150; // 区域
myChart.setOption(option);

如果分割线是后续绘制上去的，无法确定曲线位置，可以给分割线曲线加个id

后续找曲线位置的方法如下

//分割线曲线的位置
var areaI = 0;
var series = myChart.getOption().series;
$.each(series, function(i, serie) {
		if (serie.id == "AreaChart") {
				area = true;
				areaI = i;
		}
});
//绘制曲线
	option.series[areaI].markLine.data[0].yAxis =自定义的值；
	****省略

做个笔记，放上来，以后我忘了还能看看~

 效果图如下:

写博客不是为了博眼球 是为了记笔记.

          Smoothlinechart(vul_trend){
        let myChart = echarts.init(document.getElementById("Linechart"));
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            color:['#2dbb8a'],
            grid: {
                left: 0,
                right: 0,
                bottom: 10,
                top:10,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false, //折线图前后的间隙
                axisTick: {// false 为去掉坐标轴刻线
                    show: true
                },
                axisLine:{
                  show:true,
                    lineStyle:{
                        color:'#dcdfe6'
                    },
                },
                axisLabel:{
                  color:'#4e5b5f'                           //控制横坐标的颜色
                },
                splitLine:{show: true}, //false 为去除网格线
               data: ['01','02','03','04','05','06','07','08','09','10','11','12']
                // data: vul_trend.xdata
            },
            yAxis: {
                type: 'value',
                axisTick: {// false 为去掉坐标轴刻线
                    show: true
                },
                axisLine:{
                  show:true,
                    lineStyle:{
                        color:'#dcdfe6'
                    },
                },
                axisLabel:{
                  color:'#4e5b5f'                           //控制横坐标的颜色
                },
                splitLine:{show: true}, //false 为去除网格线
            },
            series: [
                {
                    name: '漏洞发现总数',
                    type:'line',
                    smooth:true,
                    areaStyle: {},
                    stack: '总量',
 //                     data: vul_trend.ydata,
                 data:[3,5,8,10,1,6,8,9,4,5,8,6],
                 markLine: {
                        silent: true,
                        lineStyle: {
                          normal: {
                            color: '#333'                  // 这儿设置安全基线颜色
                          }
                        },
                        data: [{
                            yAxis: 5     //这儿定义基准线的数值为多少
                        }],
                        label: {
                          normal: {
                            formatter: '安全\n基线'           // 这儿设置安全基线
                          }
                        }

                    },
                }
            ]
        };
      myChart.setOption(option);
      },

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
     yAxis: {
        name: '坐标轴名称',
        nameTextStyle: {},// y轴名称的样式
        type: 'value',
        inverse: false,// 把x轴y轴整体旋转180度
        boundaryGap: ['20%', '50%'],// 坐标轴两边留白策略 [左右，上下]
        // 控制坐标轴展示系列文字还是具体数字value是数字
        splitLine: {
            lineStyle: {
                type: 'dashed' // y轴分割线类型
            }
        },
        axisLine: {// 标轴轴线相关设置。
            symbol: 'arrow', // 坐标轴两边的图表类型，不写默认没有
            lineStyle: {
                type: 'dashed' // 坐标轴的分割线类型还有其他关于轴线的样式自行开发吧
            }
        },
        axisTick: {
            interval: 200
        },
        min: 0,
        max: 2000,// 强行设置最大值，可以达到上方留白的效果
        splitNumber: 4,// 想要分隔的段数
        // interval: 400, // 强制设置坐标轴分割间隔就是隔多少分一份。
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        itemStyle: {// 或者可以在这里设置
            normal: {
                lineStyle: {
                // 重点
                    type:'dotted'
                }
            }
        }
    }]
};