Echarts bar图标怎么显示百分比

版权声明：转载请注明出处。 原文作者：宋发元 原文链接：http://blog.csdn.net/u011019141

打开链接：http://echarts.baidu.com/echarts2/doc/example/bar14.html

将代码更改为如下代码：

 

[html] view plain copy

 

1. option = {  
2.     title: {  
3.         x: \'center\',  
4.         text: \'Age\',  
5.         subtext: \'Rainbow bar for Age\',  
6.         link: \'http://echarts.baidu.com/doc/example.html\'  
7.     },  
8.     tooltip: {  
9.         trigger: \'item\',  
10.         formatter: \'{b}:\n{c}%\'  
11.     },  
12.     toolbox: {  
13.         show: true,  
14.         feature: {  
15.             dataView: {show: true, readOnly: false},  
16.             restore: {show: true},  
17.             saveAsImage: {show: true}  
18.         }  
19.     },  
20.     calculable: true,  
21.     grid: {  
22.         borderWidth: 0,  
23.         y: 80,  
24.         y2: 60  
25.     },  
26.     xAxis: [  
27.         {  
28.             type: \'category\',  
29.             show: true,  
30.             data: [\'4-14\', \'15-24\', \'25-34\', \'35-44\', \'45-54\', \'55-64\', \'65以上\']  
31.         }  
32.     ],  
33.     yAxis: [  
34.         {  
35.             type: \'value\',  
36.             axisLabel: {  
37.                   show: true,  
38.                   interval: \'auto\',  
39.                   formatter: \'{value} %\'  
40.                 },  
41.             show: true  
42.         }  
43.     ],  
44.     series: [  
45.         {  
46.             name: \'Age\',  
47.             type: \'bar\',  
48.             itemStyle: {  
49.                 normal: {  
50.                     color: function(params) {  
51.                         // build a color map as your need.  
52.                         var colorList = [  
53.                           \'#C1232B\',\'#B5C334\',\'#FCCE10\',\'#E87C25\',\'#27727B\',  
54.                            \'#FE8463\',\'#9BCA63\',\'#FAD860\',\'#F3A43B\',\'#60C0DD\',  
55.                            \'#D7504B\',\'#C6E579\',\'#F4E001\',\'#F0805A\',\'#26C0C0\'  
56.                         ];  
57.                         return colorList[params.dataIndex]  
58.                     },  
59.                     label: {  
60.                         show: true,  
61.                         position: \'top\',  
62.                         formatter: \'{b}\n{c}%\'  
63.                     }  
64.                 }  
65.             },  
66.             data: [12,21,10,4,12,5,6,5,25,23,7],  
67.             markPoint: {  
68.                 tooltip: {  
69.                     trigger: \'item\',  
70.                     backgroundColor: \'rgba(0,0,0,0)\',  
71.                     formatter: function(params){  
72.                         return \'<img src="\'   
73.                                 + params.data.symbol.replace(\'image://\', \'\')  
74.                                 + \'"/>\';  
75.                     }  
76.                 },  
77.                 data: [  
78.                     {xAxis:0, y: 350, name:\'4-14\', symbolSize:20, symbol: \'image://../asset/ico/折线图.png\'},  
79.                     {xAxis:1, y: 350, name:\'15-24\', symbolSize:20, symbol: \'image://../asset/ico/柱状图.png\'},  
80.                     {xAxis:2, y: 350, name:\'25-34\', symbolSize:20, symbol: \'image://../asset/ico/散点图.png\'},  
81.                     {xAxis:3, y: 350, name:\'35-44\', symbolSize:20, symbol: \'image://../asset/ico/K线图.png\'},  
82.                     {xAxis:4, y: 350, name:\'45-54\', symbolSize:20, symbol: \'image://../asset/ico/饼状图.png\'},  
83.                     {xAxis:5, y: 350, name:\'55-64\', symbolSize:20, symbol: \'image://../asset/ico/雷达图.png\'},  
84.                     {xAxis:6, y: 350, name:\'65以上\', symbolSize:20, symbol: \'image://../asset/ico/和弦图.png\'},  
85.                     //{xAxis:7, y: 350, name:\'Force\', symbolSize:20, symbol: \'image://../asset/ico/力导向图.png\'},  
86.                     //{xAxis:8, y: 350, name:\'Map\', symbolSize:20, symbol: \'image://../asset/ico/地图.png\'},  
87.                     //{xAxis:9, y: 350, name:\'Gauge\', symbolSize:20, symbol: \'image://../asset/ico/仪表盘.png\'},  
88.                     //{xAxis:10, y: 350, name:\'Funnel\', symbolSize:20, symbol: \'image://../asset/ico/漏斗图.png\'},  
89.                 ]  
90.             }  
91.         }  
92.     ]  
93. };  
94.                       

样例图：