效果

百分比柱状图.jpg

代码

  1. {
  2. grid: {
  3. top: 10,
  4. right: 40,
  5. bottom: 10,
  6. left: 10,
  7. containLabel: true,
  8. },
  9. tooltip: {
  10. trigger: 'axis',
  11. axisPointer: {
  12. type: 'shadow',
  13. },
  14. formatter: '{b}:{c} %',
  15. },
  16. xAxis: {
  17. type: 'value',
  18. max: 100, // 最大 100%
  19. axisLine: {
  20. show: false,
  21. },
  22. splitLine: {
  23. show: false,
  24. },
  25. axisTick: {
  26. show: false,
  27. },
  28. axisLabel: {
  29. show: false,
  30. },
  31. },
  32. yAxis: {
  33. type: 'category',
  34. data: ['巴西', '印尼', '美国', '印度', '中国', 'test', '世界人口(万)'],
  35. axisLine: {
  36. show: false,
  37. },
  38. splitLine: {
  39. show: false,
  40. },
  41. axisTick: {
  42. show: false,
  43. },
  44. axisLabel: {
  45. color: 'rgba(255, 255, 255, 1)',
  46. },
  47. },
  48. series: [
  49. {
  50. type: 'bar',
  51. data: [20.1, 50.7, 10.3, 33.3, 80.9, 6.0, 100],
  52. showBackground: true,
  53. backgroundStyle: {
  54. color: 'rgba(0, 149, 237, 0.2)',
  55. },
  56. itemStyle: {
  57. color: 'skyblue',
  58. },
  59. label: {
  60. show: true,
  61. position: 'right',
  62. formatter: '{c} %',
  63. },
  64. },
  65. ],
  66. }