echarts（富文本）图片展示问题。

因为项目中要用到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 等待后续处理结果。