echarts X軸 或者 Y軸 添加標識線

1、X軸添加標示線效果圖

代碼

option = {
    xAxis: {
        data : ['aaa','bbb']
    },
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            ['aaa', 8.04],
            ['bbb', 9.04],
        ],
        type: 'line',
        markLine: {
                symbol: ['none', 'none'],//去掉箭頭
                itemStyle: {
                    normal: { 
						lineStyle: {
							type: 'solid',
							color:{//設置漸變
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [{
                                      offset: 0, color: 'red '// 0% 處的顏色
                                  }, {
                                      offset: 1, color: 'blue' // 100% 處的顏色
                                  }],
                                  global: false // 缺省爲 false
                              }
						},
						label: { 
							show: true, 
							position:'middle' 
						} 
					}
                },
                data: [{
                            xAxis : 'aaa',//這裏設置false是隱藏不了的,可以設置爲-1
                      },]
        }
    }]
}

 2、Y軸添加標示線效果圖

option = {
    xAxis: {
        data : ['aaa','bbb']
    },
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            ['aaa', 8.04],
            ['bbb', 9.04],
        ],
        type: 'line',
        markLine: {
                symbol: ['none', 'none'],//去掉箭頭
                itemStyle: {
                    normal: { 
						lineStyle: {
							type: 'solid',
							color:{//設置漸變
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [{
                                      offset: 0, color: 'red '// 0% 處的顏色
                                  }, {
                                      offset: 1, color: 'blue' // 100% 處的顏色
                                  }],
                                  global: false // 缺省爲 false
                              }
						},
						label: { 
							show: true, 
							position:'middle' 
						} 
					}
                },
                data: [{
                            yAxis : 7,//這裏設置false是隱藏不了的,可以設置爲-1
                      },]
        }
    }]
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章