new echarts.graphic.LinearGradient内置渐变器

最新推荐文章于 2024-07-31 00:25:36 发布

置顶 Y4258

最新推荐文章于 2024-07-31 00:25:36 发布

阅读量5.4k

点赞数 2

分类专栏： echarts

本文链接：https://blog.csdn.net/Y4258/article/details/113971640

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了两种在Echarts中实现渐变色的方法。方法一是利用`echarts.graphic.LinearGradient`创建内置渐变器，通过设置不同颜色的offset来实现颜色过渡效果，展示了一个完整的Echarts图表实例。方法二是通过`areaStyle`属性直接设置渐变色，适用于填充区域的颜色渐变。这两个方法可以帮助开发者在Echarts图表中创建出美观的渐变效果。

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

渐变色方法
方法一：new echarts.graphic.LinearGradient 使用内置渐变器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 引入 echarts.js -->
   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app" style="width:600px;height:400px;margin:300px auto;"></div>
    <script type="text/javascript">
    // c 数据值  b数据名  a 系列名 
            var myApp = echarts.init(document.getElementById('app'));
            var option={
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title:{
                    text:'渐变堆叠'
                },
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'cross',
                        label:{
                            backgroundColor:'#6a7985'
                        }
                    }
                },
                legend:{//图例上方
                    data:['Line 1','Line 2','Line 3','Line 4','Line 5']
                },
                toolbox:{//工具栏  
                  feature:{//工具配置项
                      saveAsImage:{}//保存为图片
                  }
                },
                grid:{//直角坐标
                    left:'3%',
                    right:'4%',
                    bottom:'3%',
                    containLabel:true//直角grid区是否包含坐标轴的刻度标签
                },
                xAxis:[
                    {type:'category',boundaryGap:false,data:['周一','周二','周三','周四','周五','周六','周日']}
                ],
                yAxis:[
                    {type:'value'}//数值轴     category 类目轴，适用于离散的类目数据  time时间轴，适用于连续的时序数据   log对数周
                ],
                series:[
                    {
                        name:'Line 1',
                        type:'line',
                        // 就是那条数据先添加的发生重叠的时候在下面显示
                        stack:'总量',//数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加  
                        smooth:true,//是否平滑曲线显示
                        lineStyle:{width:0},//线条样式,线宽0
                        showSymbol:false,//是否显示symobol，如果是false，则只有在tooltip hover的时候显示
                        areaStyle:{//填充样式区域
                            opacity:0.8,//透明度
                            // 使用echarts内置的渐变色生成器   offset的范围是0 ~ 1, 用于表示位置
                            color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(128,255,165)'},{offset:1,color:'rgba(1,191,236)'}])      
                        },
                        emphasis:{//折线图的高亮状态
                            //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
                            focus:'series'//聚焦当前高亮的数据所在的系列的所有图形。  
                        },
                        data:[140,232,101,264,80,340,250]
                        
                    },
                    {
                        name:'Line 2',
                        type:'line',
                        stack:'总量',
                        smooth:true,
                        lineStyle:{width:0.8},
                        showSymbol:false,
                        areaStyle:{
                            opacity:0.8,
                            color:new echarts.graphic.LinearGradient(0,0,0,1,[{}])
                        }
                    }
                ]
            };
            myApp.setOption(option);
            // Circlelinechart()
    </script>
</body>
</html>