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

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 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题
  • ¥15 在现有系统基础上增加功能