Echarts柱状图百分比显示
2018-06-24 00:38:04来源:未知 阅读 ()
1 option = { 2 3 tooltip: { 4 trigger: 'item', 5 formatter:'{c}%' //这是关键,在需要的地方加上就行了 6 }, 7 grid: { 8 borderWidth: 0, 9 y: 80, 10 y2: 60 11 }, 12 xAxis: [ 13 { 14 type: 'category', 15 show: false, 16 data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel'] 17 } 18 ], 19 yAxis: [ 20 { 21 type: 'value', 22 show: false 23 } 24 ], 25 series: [ 26 { 27 name: 'ECharts例子个数统计', 28 type: 'bar', 29 itemStyle: { 30 normal: { 31 color: function(params) { 32 // build a color map as your need. 33 var colorList = [ 34 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', 35 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', 36 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' 37 ]; 38 return colorList[params.dataIndex] 39 }, 40 label: { 41 show: true, 42 position: 'top', 43 formatter: '{b}\n{c}%' //这是关键,在需要的地方加上就行了 44 } 45 } 46 }, 47 data: [12,21,10,4,12,5,6,5,25,23,7], 48 } 49 ] 50 }; 51
结果如下:
附上官网链接:http://echarts.baidu.com/echarts2/doc/example/bar14.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- vue学习【一】vue引用封装echarts并展示多个echarts图表 2019-08-14
- 使用百度echarts仿雪球分时图(一) 2019-08-14
- echarts交叉关系图二 2019-05-13
- vue+echarts实现可拖动节点的折现图(支持拖动方向和上下限 2019-04-12
- Echarts堆积柱状图排序问题 2019-02-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash