echarts渐变

最新推荐文章于 2023-12-07 15:57:49 发布

alo_ne

最新推荐文章于 2023-12-07 15:57:49 发布

阅读量754

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/alo_ne/article/details/107590716

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<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>

ECharts内置变色器“LinearGradient”实现颜色渐变。上例效果展示：
在这里插入图片描述
1,0,0,0四个参数表示渐变开始的位置，分别为左、上、右、下。

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

alo_ne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarts渐变

<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.
复制链接

扫一扫

专栏目录