笔记之“ECharts渐变颜色的实现”

最新推荐文章于 2024-04-01 15:41:36 发布

yuJao

最新推荐文章于 2024-04-01 15:41:36 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/Jyao_In/article/details/80622910

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ECharts实现渐变色</title>
	<script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
	<div id="myChart" style="width: 600px;height: 600px;margin: 0 auto;border: 1px solid black"></div>
</body>
<script type="text/javascript">
	var box = document.getElementById("myChart");
	var myChart = echarts.init(box);
	var option = {
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        data: [820, 932, 901, 934, 1290, 1330, 1320],
	        type: 'line',
	        areaStyle: {
	        	normal: {
                         color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                             offset: 1,
                             color: 'rgba(144,191,191,0)'
                         },
                         {
                        	 offset: 0.5,
                             color: 'rgba(144,191,191, 0.5)'
                         },
                         {
                             offset: 0,
                             color: 'rgba(144,191,191, 1)'
                         }])
                     }
	        },
	        lineStyle:{
	        	normal:{
	        		color:'rgba(144,191,191)'
	        	}
	        }
	    }]
};
myChart.setOption(option);
</script>
</html>

ECharts内置变色器“LinearGradient”实现颜色渐变。上例效果展示：

1,0,0,0四个参数表示渐变开始的位置，分别为左、上、右、下。

只改变这四个参数实现不同方向渐变图例：

1,0,0,0见上图

0,1,0,0如下图：

0,0,1,0如下图：

0,0,0,1如下图：

yuJao

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
笔记之“ECharts渐变颜色的实现”

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts实现渐变色&lt;/title&gt; &lt;script type="text/javascript" src="echarts.min.js"
复制链接

扫一扫