因為專案中要用到echarts裡面的富文字所以發現了相關問題

echarts官網例項：http://echarts.baidu.com/examples/editor.html?c=bar-rich-text

程式碼如下

var weatherIcons = {
    '漢字': './data/asset/img/weather/sunny_128.png',
    'Cloudy': './data/asset/img/weather/cloudy_128.png',
    'Showers': './data/asset/img/weather/showers_128.png'
};

var
 
 seriesLabel = {
    normal: {
        show: true,
        textBorderColor: '#333',
        textBorderWidth: 2
    }
}

option = {
    title: {
        text: 'Wheater Statistics'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend:
 
 {
        data: ['City Alpha', 'City Beta', 'City Gamma']
    },
    grid: {
        left: 100
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'value',
        name: 'Days',
        axisLabel: {
            formatter:
 
 '{value}'
        }
    },
    yAxis: {
        type: 'category',
        inverse: true,
        data: ['漢字', 'Cloudy', 'Showers'],
        axisLabel: {
            formatter: function (value) {
                return '{' + value + '| }\n{value|' + value + '}';
            },
            margin: 20,
            rich: {
                value: {
                    lineHeight: 30,
                    align: 'center'
                },
                漢字: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.漢字
                    }
                },
                Cloudy: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Cloudy
                    }
                },
                Showers: {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Showers
                    }
                }
            }
        }
    },
    series: [
        {
            name: 'City Alpha',
            type: 'bar',
            data: [165, 170, 30],
            label: seriesLabel,
            markPoint: {
                symbolSize: 1,
                symbolOffset: [0, '50%'],
                label: {
                   normal: {
                        formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                        backgroundColor: 'rgb(242,242,242)',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        padding: [4, 10],
                        lineHeight: 26,
                        // shadowBlur: 5,
                        // shadowColor: '#000',
                        // shadowOffsetX: 0,
                        // shadowOffsetY: 1,
                        position: 'right',
                        distance: 20,
                        rich: {
                            a: {
                                align: 'center',
                                color: '#fff',
                                fontSize: 18,
                                textShadowBlur: 2,
                                textShadowColor: '#000',
                                textShadowOffsetX: 0,
                                textShadowOffsetY: 1,
                                textBorderColor: '#333',
                                textBorderWidth: 2
                            },
                            b: {
                                 color: '#333'
                            },
                            c: {
                                color: '#ff8811',
                                textBorderColor: '#000',
                                textBorderWidth: 1,
                                fontSize: 22
                            }
                        }
                   }
                },
                data: [
                    {type: 'max', name: 'max days: '},
                    {type: 'min', name: 'min days: '}
                ]
            }
        },
        {
            name: 'City Beta',
            type: 'bar',
            label: seriesLabel,
            data: [150, 105, 110]
        },
        {
            name: 'City Gamma',
            type: 'bar',
            label: seriesLabel,
            data: [220, 82, 63]
        }
    ]
};

發現不能直接顯示漢字
而我想要這樣的效果

為了實現這樣的功能只能在 axisLabel裡面寫自定義方法

var weatherIcons = {
    '奧迪': './icon/奧迪.png',
    'Cloudy': './icon/本田.png',
    'Showers': './icon/比亞迪.png'
};

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    // legend: {
    //     data: ['City Alpha']
    // },
    grid: {
        left: 100,
        bottom: 100 
    },
    yAxis: {
        type: 'value',
        name: 'Days',
        axisLabel: {
            formatter: '{value}'
        },
        axisLine: {
            lineStyle: {
                color: '#407cc3' //座標軸線線的顏色
            }
       },
    },
    xAxis: {
        type: 'category',
        inverse: true,
        data: ['1', '1', '1',"1","1",'1',"1","1","1","1"],
        axisLine: {
            lineStyle: {
                color: '#407cc3' //座標軸線線的顏色
            }
        },
        axisLabel: {
            formatter: function (value) {
                var bbb = "";
                if(value === "1"){
                    bbb = "本田"
                }else{
                    bbb = "奧托" 
                }
                return '{value|' + bbb + '}\n{' + value + '| }';
            },
            interval:0,
            //margin: 20,
            rich: {
                value: {
                    //lineHeight: 20,
                    //align: 'center'
                },
                "1": {
                    height: 20,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.奧迪
                    }
                },
                Cloudy: {
                    height: 20,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Cloudy
                    }
                },
                Showers: {
                    height: 20,
                    align: 'center',
                    backgroundColor: {
                        image: weatherIcons.Showers
                    }
                }
            }
        }
    },
    series: [
        {
            name: 'City Alpha',
            type: 'bar',
            data: [165, 170, 30],
            itemStyle:{
                normal:{
                    color:'rgba(180,212,101,1)'
                }
            },
        },
        
    ]
};

上述程式碼結果圖如下

我感覺這樣的話使用起來不方便 所以就在git上給incubator-echarts 也就是echarts 提了issues 目前狀態是pending 等待後續處理結果。