echart图中加一条直线

最新推荐文章于 2025-04-01 14:57:03 发布

浩星

最新推荐文章于 2025-04-01 14:57:03 发布

阅读量1w

点赞数 6

分类专栏： echarts 文章标签： echarts图中加线 echarts的markLine

本文链接：https://blog.csdn.net/qq_41619796/article/details/92563735

版权

echarts 专栏收录该内容

18 篇文章

订阅专栏

老规矩，先看效果：

这里主要用echarts的markLine 来实现，下面是代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script type="text/javascript" src='echarts.js'></script>
</head>
<body>
    <div id="chart" style="width:800px;height:500px;background:pink;"></div>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
   
   

	
	
	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
                      },]
        }
    }]
};


    myChart.setOption(option);
</script>
</html>