【echarts】柱状图设置固定宽度(最大宽度)

缺乏、安全感 2022-09-29 10:58 330阅读 0赞
  1. //柱状图
  2. var barGragh = document.getElementById('barGragh');
  3. var barChart = echarts.init(barGragh);
  4. var barChartoption = {
  5. tooltip: {
  6. trigger: 'axis'
  7. },
  8. legend: {
  9. data: ['上周同比', '今日整点'],
  10. /* y : 'bottom' */
  11. },
  12. toolbox: {
  13. show: false,
  14. feature: {
  15. mark: {show: true},
  16. dataView: {show: true, readOnly: false},
  17. magicType: {show: true, type: ['line', 'bar']},
  18. restore: {show: true},
  19. saveAsImage: {show: true}
  20. }
  21. },
  22. color : ['#ff7f50','#87cefa', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  23. calculable: false,
  24. grid: {
  25. left: '0%',
  26. right: '0%',
  27. bottom: '5%',
  28. containLabel: true
  29. },
  30. xAxis: [
  31. {
  32. type: 'category',
  33. data: []
  34. }
  35. ],
  36. yAxis: [
  37. {
  38. type: 'value',
  39. name: 'GMV'
  40. }
  41. ],
  42. series: [
  43. {
  44. name: '上周同比',
  45. type: 'bar',
  46. barMaxWidth: '100',
  47. data: [],
  48. markPoint: {
  49. data: [
  50. {
  51. type: 'max', name: '最大值'},
  52. {
  53. type: 'min', name: '最小值'}
  54. ]
  55. },
  56. markLine: {
  57. data: [
  58. {
  59. type: 'average', name: '平均值'}
  60. ]
  61. }
  62. },
  63. {
  64. name: '今日整点',
  65. type: 'bar',
  66. barMaxWidth: '100',
  67. data: [],
  68. markPoint: {
  69. data: [
  70. {
  71. type: 'max', name: '最大值'},
  72. {
  73. type: 'min', name: '最小值'}
  74. ]
  75. },
  76. markLine: {
  77. data: [
  78. {
  79. type: 'average', name: '平均值'}
  80. ]
  81. }
  82. }
  83. ]
  84. };
  85. barChart.setOption(barChartoption);

关键代码:

  1. barMaxWidth: '100',

实现效果

这里写图片描述

发表评论

表情:
评论列表 (有 0 条评论,330人围观)

还没有评论,来说两句吧...

相关阅读