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.                       

样例图：

 

 

posted @ 2017-08-05 14:48  宋发元  阅读(2451)  评论(0)  编辑  收藏  举报