echarts 折线图实现渐变效果

最新推荐文章于 2024-06-17 23:59:48 发布

前端-文龙刚

最新推荐文章于 2024-06-17 23:59:48 发布

阅读量6.5k

点赞数 3

分类专栏： eCharts Javascript 文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/qq_17211063/article/details/123252497

版权

Javascript 同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

eCharts

14 篇文章 1 订阅

订阅专栏

这篇博客展示了如何利用ECharts库创建一个动态的线性图表，展示11月初的浏览次数变化。代码中详细配置了图表的网格、坐标轴、提示框以及渐变颜色的线条和填充区域，使得数据可视化效果更佳。通过这段代码，读者可以学习到如何在网页中集成ECharts并定制个性化图表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;}
		html,body{height:100%;}
		#chart1{height:100%;}
	</style>
</head>
<body>
	<div id="chart1">
		
	</div>
</body>
</html>
<script type="text/javascript">
	var myChartLine = echarts.init(document.getElementById('chart1'));
optionLine = {
    tooltip: {
        trigger: 'axis'
    },

    grid: {
        left: '3%',
        right: '4%',
        bottom: '9%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}//将统计图保存为
        }
        ,right:100
        ,top:0
    },
    xAxis: {
        type: 'category',
        boundaryGap:false,
        data:['11.07','11.08','11.09','11.10','11.11','11.12','11.13','11.14','11.15','11.16']
    },
    yAxis: {
        type: 'value'
        /*min:0,
         max:60,
         splitNumber:6*/
    },
    series: [
        {
            name:'浏览次数',
            type:'line',
            stack: '总量1',
            areaStyle: {//覆盖区域的渐变色
            	normal: {
            		color: {
			        type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
			        colorStops: [
				        {
				            offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
				        },
				        {
				            offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
				        }
			        ],
			        global: false // 缺省为 false
		       		},
            	}
            },
            data:['10','22','10','50','13','31','15','10','22','10'],
            itemStyle : {//线条的渐变
            	normal:{
		            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
		    			{
		                    offset:1, color: '#3b9ee9' // 0% 处的颜色
		                }, 
		                {
		                    offset:0.3, color: '#3b9ee9' // 100% 处的颜色
		                }, 
		                {
		                    offset:0.1, color: '#3b9ee9' // 100% 处的颜色
		                }
		             ]
		         ),  //背景渐变色 
		        }
            }
        }
    ]
};
//为echarts对象加载数据
myChartLine.setOption(optionLine);
</script>

前端-文龙刚

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echarts 折线图实现渐变效果

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document.
复制链接

扫一扫