echarts 实际值与目标值不符时 变色

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_40803257/article/details/81629958

echarts中 代码如下

关键代码为

itemStyle: {
                        normal: {
                            color: function(item) {
                                
                                    //实际值>计划值 变红
                                if (Number(sData_cos2[item.dataIndex]) < Number(yData_cos2[item.dataIndex])) {
                                    return 'rgb(255,0,0)';
                                } else {
                                    return '#9ACD32';
                                }
                            
                            }
                        }
                    }

有意思的事 原先  sData_cos2[item.dataIndex] 和yData_cos2[item.dataIndex] 为字符串

结果比较时出现了"1500.00"<"800.00" 的情况

因此用Number(）强制类型转换为数字。

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

以下是实际代码

       var option1 = {
                title: {
                    text: oData_pl[0].PRODUCELINENAME + this.getView().getModel("i18n.SFM").getResourceBundle().getText("Single_tool_cost")
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: {
                    show: true,
                    data: [
                        this.getView().getModel("i18n.SFM").getResourceBundle().getText("actual_value"),
                        this.getView().getModel("i18n.SFM").getResourceBundle().getText("Planned_value"),
                        this.getView().getModel("i18n.SFM").getResourceBundle().getText("Actual_average_year"),
                        this.getView().getModel("i18n.SFM").getResourceBundle().getText("Average_target_year")
                    ]
                },
                color: ['#EE00EE', '#9ACD32', '#9AC0CD', '#DAA520'],
                xAxis: {
                    name: this.getView().getModel("i18n.SFM").getResourceBundle().getText("time"),
                    data: xData_cos2
                },
                yAxis: {
                    type: 'value',
                    name: this.getView().getModel("i18n.SFM").getResourceBundle().getText("Unit_(yuan/platform)")
                },
                series: [{
                    type: 'line',
                    name: this.getView().getModel("i18n.SFM").getResourceBundle().getText("Planned_value"),
                    data: sData_cos2,//目标
                    label: {
                        normal: {
                            show: true,
                            // position: 'inside',
                            color: '#A52A2A'
                        }
                    }
                }, {
                    type: 'bar',
                    name: this.getView().getModel("i18n.SFM").getResourceBundle().getText("actual_value"),
                    data: yData_cos2,//实际
                    
                    itemStyle: {
                        normal: {
                            color: function(item) {
                                
                                    //实际值>计划值 变红
                                if (Number(sData_cos2[item.dataIndex]) < Number(yData_cos2[item.dataIndex])) {
                                    return 'rgb(255,0,0)';
                                } else {
                                    return '#9ACD32';
                                }
                            
                            }
                        }
                    }
                }, {
                    type: 'line',
                    name: this.getView().getModel("i18n.SFM").getResourceBundle().getText("Average_target_year"),
                    data: wData_cos2,
                    label: {
                        normal: {
                            show: true,
                            // position: 'inside',
                            color: '#A52A2A'
                        }
                    }
                }, {
                    type: 'line',
                    name: this.getView().getModel("i18n.SFM").getResourceBundle().getText("Actual_average_year"),
                    data: zData_cos2,
                    label: {
                        normal: {
                            show: true,
                            // position: 'inside',
                            color: '#A52A2A'
                        }
                    }
                }]
            };