zhangkai04 2022-04-06 17:36 采纳率: 100%
浏览 295
已结题

Echarts中的Bar图，如何实现根据不同的seriesName指定不同的legend和series的颜色？

问题遇到的现象和发生背景

现在有个需求，要做一张堆积柱状图，但是数据里面有一些系列，根据系列名称指定颜色，legend和series都是如此。我用回调函数修改了series的部分，但是legend却不起作用。

问题相关代码，请勿粘贴截图

（省去了部分css和元素）

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script> 
// 基于准备好的dom，初始化echarts图表 
$(function(){
    $("button").on("click",function(){
        var outsource = "";        
        $("table").find("tr").find("td:eq(0)").find("textarea").each(function(){
                outsource+= $(this).val() + ',';
        });
        var ouc = outsource.slice(0,-1).split(",");

        var insource = "";        
        $("table").find("tr").find("th").find("textarea").each(function(){
                insource+= $(this).val() + ',';
        });
        var ins = insource.slice(0,-1).split(",");
        for (var i=1;i<ins.length+1;i++){
            var str ="data"+ i+"r = ''";eval(str);
            var str = "$('table').find('tr').find('td:eq("+i+")').find('textarea').each(function(){data"+i+"r+= $(this).val() + ',';});";eval(str);            
            var str = "d"+i+" = data"+i+"r.slice(0,-1).split(',');";eval(str);
        };

        var series=[];    //定义一个数组变量用于存放配置
        
        for (var j=1;j<ins.length+1;j++) {
        var str='datacs=d'+j;eval(str);
            series.push({
                name: ins[j-1],
                type: 'bar',
                stack: 'total',            
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                itemStyle:{
//这里就是数据里面需要根据seriesName修改颜色的条件
                  color:function(params){
                    if (params.seriesName=="融资流入（流贷技术处理）") {
                        return "#FFFF00";
                    } else if(params.seriesName=="融资流入（流贷需要技术突破）") {
                        return "#FF0000";
                    } else if(params.seriesName=="外方股东流入") {
                        return "#0000FF";
                    }                    
                    else {
                        return "#00FF00";
                    }
                }},
                data: datacs 
            });            
        };

        var myChart = echarts.init(document.getElementById('main')); 
        var option = {
            title: {
                text: '资金配置图',
                left:'20px',
                textStyle: {    
                color: "#436EEE",
                fontSize: 17,   
                }
            },
            legend: {
                left:'10%',
                data: ins
            },
            xAxis: {
                type: 'value'
            }, 
            yAxis: {
                type: 'category',            
                data: ouc
            },              
            series: series
            };
        myChart.setOption(option);         
    });
});
</script> 
</head>
<body>

<div id="main"></div> 
<div>
<table>
    <tr>
    <th>表格</th>
    <th><textarea id="ots1" rows="2" cols="11">服务收入</textarea></th>
    <th><textarea id="ots2" rows="2" cols="11">租售收入（自用）</textarea></th>
    <th><textarea id="ots3" rows="2" cols="11">租售收入（还款）</textarea></th>
    <th><textarea id="ots4" rows="2" cols="11">股权转让及分利收益</textarea></th>    
    <th><textarea id="ots5" rows="2" cols="11">政府补贴</textarea></th>    
    <th><textarea id="ots6" rows="2" cols="11">外方股东流入</textarea></th>    
    <th><textarea id="ots7" rows="2" cols="11">融资流入（固贷）</textarea></th>    
    <th><textarea id="ots8" rows="2" cols="11">融资流入（权益）</textarea></th>    
    <th><textarea id="ots9" rows="2" cols="11">融资流入（债券）</textarea></th>    
    <th><textarea id="ots10" rows="2" cols="11">其他流入（符合监管）</textarea></th>    
    <th><textarea id="ots11" rows="2" cols="11">融资流入（流贷符合监管）</textarea></th>    
    <th><textarea id="ots12" rows="2" cols="11">融资流入（流贷技术处理）</textarea></th>    
    <th><textarea id="ots13" rows="2" cols="11">融资流入（流贷需要技术突破）</textarea></th>
    </tr>                        
    <tr>                         
    <td><textarea id="td2_1" rows="1" cols="13">服务支出</textarea></td>    
    <td><textarea id="td2_2" rows="1" cols="11">15</textarea></td>
    <td><textarea id="td2_3" rows="1" cols="11">2</textarea></td>
    <td><textarea id="td2_4" rows="1" cols="11"></textarea></td>
    <td><textarea id="td2_5" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_6" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_7" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_8" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_9" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_10" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_11" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_12" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_13" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td2_14" rows="1" cols="11"></textarea></td>    
    </tr>
    <tr>                         
    <td><textarea id="td3_1" rows="1" cols="13">存量增加</textarea></td>
    <td><textarea id="td3_2" rows="1" cols="11"></textarea></td>
    <td><textarea id="td3_3" rows="1" cols="11">24</textarea></td>
    <td><textarea id="td3_4" rows="1" cols="11"></textarea></td>
    <td><textarea id="td3_5" rows="1" cols="11">77</textarea></td>    
    <td><textarea id="td3_6" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_7" rows="1" cols="11">13.7</textarea></td>    
    <td><textarea id="td3_8" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_9" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_10" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_11" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_12" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_13" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td3_14" rows="1" cols="11"></textarea></td>    
    </tr>
    <tr>                         
    <td><textarea id="td4_1" rows="1" cols="13">税金支出</textarea></td>
    <td><textarea id="td4_2" rows="1" cols="11"></textarea></td>
    <td><textarea id="td4_3" rows="1" cols="11"></textarea></td>
    <td><textarea id="td4_4" rows="1" cols="11"></textarea></td>
    <td><textarea id="td4_5" rows="1" cols="11">17</textarea></td>    
    <td><textarea id="td4_6" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_7" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_8" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_9" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_10" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_11" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_12" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_13" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td4_14" rows="1" cols="11"></textarea></td>    
    </tr>
    <tr>                         
    <td><textarea id="td5_1" rows="1" cols="13">融资还款</textarea></td>
    <td><textarea id="td5_2" rows="1" cols="11"></textarea></td>
    <td><textarea id="td5_3" rows="1" cols="11"></textarea></td>
    <td><textarea id="td5_4" rows="1" cols="11">87</textarea></td>
    <td><textarea id="td5_5" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_6" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_7" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_8" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_9" rows="1" cols="11">5</textarea></td>    
    <td><textarea id="td5_10" rows="1" cols="11">195.8</textarea></td>    
    <td><textarea id="td5_11" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_12" rows="1" cols="11">39.2</textarea></td>    
    <td><textarea id="td5_13" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_14" rows="1" cols="11"></textarea></td>    
    </tr>    
    <tr>                         
    <td><textarea id="td5_1" rows="1" cols="13">三费支出</textarea></td>
    <td><textarea id="td5_2" rows="1" cols="11"></textarea></td>
    <td><textarea id="td5_3" rows="1" cols="11"></textarea></td>
    <td><textarea id="td5_4" rows="1" cols="11"></textarea></td>
    <td><textarea id="td5_5" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_6" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_7" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_8" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_9" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_10" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_11" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_12" rows="1" cols="11">53</textarea></td>    
    <td><textarea id="td5_13" rows="1" cols="11"></textarea></td>    
    <td><textarea id="td5_14" rows="1" cols="11"></textarea></td>    
    </tr>
</table>
</div>
<button>确认</button>
</body>
</html>
运行结果及报错内容

由于legend部分没有修改，导致legend颜色和图表里面的系列的颜色不一致。

img


如上图，红色部分的legend和蓝色部分的图片里面，相同系列的数据颜色不一致。

我的解答思路和尝试过的方法

我尝试过直接在legend里复制series里面itemStyle的全部代码，但不起作用。

我想要达到的结果

我想达到的效果就是legend颜色和bar图的颜色，根据不同名称任意指定。
期望哪位能够帮帮我！

  • 写回答

2条回答 默认 最新

  • hfhan_872914334 2022-04-06 17:59
    关注

    不要使用回调，而且这么简单也没必要使用，完全可以提前计算好，然后去赋值

    var colors = {
    "融资流入（流贷技术处理）": "#FFFF00",
    "融资流入（流贷需要技术突破）": "#FF0000",
    "外方股东流入": "#0000FF"
}
var color = colors[ins[j-1]] || "#00FF00"

itemStyle: {
  color: color
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月14日
  • 已采纳回答 4月6日
  • 创建了问题 4月6日

悬赏问题

  • ¥15 软件定义网络mininet和onos控制器问题
  • ¥15 微信小程序 用oss下载 aliyun-oss-sdk-6.18.0.min client报错
  • ¥15 ArcGIS批量裁剪
  • ¥15 labview程序设计
  • ¥15 为什么在配置Linux系统的时候执行脚本总是出现E: Failed to fetch http:L/cn.archive.ubuntu.com
  • ¥15 Cloudreve保存用户组存储空间大小时报错
  • ¥15 伪标签为什么不能作为弱监督语义分割的结果？
  • ¥15 编一个判断一个区间范围内的数字的个位数的立方和是否等于其本身的程序在输入第1组数据后卡住了(语言-c语言)
  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。