ECharts 使用series.areaStyle.color实现3种阴影效果（不透明阴影，透明阴影，线性渐变阴影）

最新推荐文章于 2024-05-16 11:25:57 发布

旭东怪

最新推荐文章于 2024-05-16 11:25:57 发布

阅读量5.4k

点赞数 3

分类专栏：图表库

本文链接：https://blog.csdn.net/qq_38974638/article/details/108875495

版权

图表库专栏收录该内容

65 篇文章 36 订阅

订阅专栏

1 使用详解

series.areaStyle.color

说明：填充的颜色。

默认值：’#000'。

参数类型：Color。

可选值：请参考以下博客。

ECharts color属性设置（RGB，透明度，线性渐变，径向渐变，纹理填充）

2 不透明阴影

实现代码（不透明阴影）：

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
				smooth:true,
				areaStyle:{
					color:"red"
				},
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

最终效果图（不透明阴影）：

3 透明阴影

实现代码（透明阴影）：

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
				smooth:true,
				areaStyle:{
					color:'rgba(255,0,0,0.1)'
				},
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

最终效果图（透明阴影）：

4 线性渐变阴影

实现代码（线性渐变阴影）：

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
				smooth:true,
				areaStyle:{
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: 'red' // 0% 处的颜色
						}, {
							offset: 1, color: 'white' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

最终效果图（线性渐变阴影）：

旭东怪

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
ECharts 使用series.areaStyle.color实现3种阴影效果（不透明阴影，透明阴影，线性渐变阴影）

1 使用详解（1）series.areaStyle.color说明：填充的颜色。默认值：’#000'。参数类型：Color。（1）'#000'，十六进制。（2）'rgb(128, 128, 128)'，RGB。（3）'rgba(128, 128, 128, 0.5)'，RGB，同时支持透明度。（4）'red'。（2）series.areaStyle.color（线性渐变）// 线性渐变，前四个参数分别是...
复制链接

扫一扫