echarts颜色渐变

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

JNSimba

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

阅读量8.5k

点赞数 2

分类专栏： web 文章标签：桑基图 echart hsl 颜色渐变 sankey

本文链接：https://blog.csdn.net/u014307117/article/details/76166009

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

采用echarts绘制桑基图，echarts有默认的全局调色板，数据块会循环调用，但是不能根据数值的大小控制颜色的渐变，

网友写的color回调函数，试了多次无果

发现可以在data数据块中直接设置color，如下

var data= [{name: '首页',value: 10,itemStyle:{normal:{color:'red'}}},
        {name: '上一页',value: 20,itemStyle:{normal:{color:'blue'}},
        {name: '下一页', value:30},itemStyle:{normal:{color:'grey'}]

这样可以实现三个数据块不同颜色，试了一下，color可以支持rgb/hsl，可以写成下面的方式

rgb:

var data= [{name: '首页',value: 10,itemStyle:{normal:{color:'rgb(1,2,3)'}}},
        {name: '上一页',value: 20,itemStyle:{normal:{color:'rgb(100,200,120)'}},
        {name: '下一页', value:30},itemStyle:{normal:{color:'rgb(200,245,234)'}]

hsl:

var data= [{name: '首页',value: 10,itemStyle:{normal:{color:'hsl(1,100%,50%)'}}},
        {name: '上一页',value: 20,itemStyle:{normal:{color:'hsl(120,100%,50%)'}},
        {name: '下一页', value:30},itemStyle:{normal:{color:'hsl(240,100%,50%)'}]

---------------------------------------------------------------------------------------------------------------------

rgb大都知道，hsl三个值分别表示：色度、饱和度、亮度

主要关注色度，色度在0-360之间，越小越靠近红色，所以只需要将想突出显示的置为红色即可。

-----------------------------------------------------------------------------------------------------------------------------------

通常在应用中，data数值都是从后端直接传过来的，所以只能往原有的data对象中put值，类似下面

data[0].itemStyle = {normal:{color:'hsl(xxx,100%,50%)'}}

当然可以循环遍历，赋给data中每个元素。

上面xxx是指变量，因为颜色最终是要根据数值变化的

所以：

1.设置大致阀值，规定数值在某一范围内显示什么色

2.找出大致规律，写个颜色与数值的大致函数

我们实际应用中绘制的是桑基图，需要根据占比来控制颜色，占比越大需要越靠近红色，如上图，颜色数值是最小的，所以很明显的反比关系

上代码：

忽略link关系，只是为演示根据数值渐变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="echarts-all-3.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var data= [{name: 'A',value: 0.8},
        {name: 'B',value: 0.2},
        {name: 'C', value:0.05}];

    var links = [{ source: 'A',target: 'B',value:9},
        {source: 'B',target: 'C',value:9}];


    var option = {
        "title": {
            "text": "\nTest",
            "left":"center"
        },
        "tooltip": {
            "trigger": "item",
            "triggerOn": "mousemove"
        },
        "series": [
            {
                "type": "sankey",
                "layout": "none",
                "left":"20%",
                "data": data,
                "top":90,
                "bottom":20,
                "nodeWidth":40,
                "nodeGap":40,
                "links": links,
                label:{
                  normal:{
                      textStyle:{
                        fontFamily2:"微软雅黑",
                        fontSize:'15'
                          
                      }
                  }  
                },
                "itemStyle": {
                    "normal": {
                        "borderWidth": 1,
                        "borderColor": "#b0c4d",
                    }
                
                },
                "lineStyle": {
                    "normal": {
                        "curveness": 0.5,
                        color:'grey'
                    }
                }
            }
        ]
    };
    //循环赋值
    data.forEach(function (data_tmp) {

            var t = data_tmp.value
            t = t *  10 + 1;
            var color_tmp = 1 / ( t * t ) * 240;   //反比例函数，可自定义
          
            data_tmp.itemStyle = {normal:{color:'hsl('+color_tmp+',100%,50%)'}}
                
    })
    myChart.setOption(option);
</script>
</body>
</html>

效果如下：