【echarts】修改柱状图颜色

迈不过友情╰ 2022-06-17 20:09 396阅读 0赞

创建一个柱状图对象

  1. <div id="barGragh" style="width: 100%;height:400px;margin-bottom: 5px">
  2. </div>

js设置树形

  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: true,
  24. grid: {
  25. left: '0%',
  26. right: '0%',
  27. bottom: '15%',
  28. containLabel: true
  29. },
  30. xAxis: [
  31. {
  32. type: 'category',
  33. axisLabel:{
  34. interval:0,
  35. rotate:30,
  36. margin:15,
  37. textStyle:{
  38. color:"#222"
  39. }
  40. },
  41. data: []
  42. }
  43. ],
  44. yAxis: [
  45. {
  46. type: 'value',
  47. name: 'GMV'
  48. }
  49. ],
  50. series: [
  51. {
  52. name: '上周同比',
  53. type: 'bar',
  54. barMaxWidth: '100',
  55. data: [],
  56. markPoint: {
  57. itemStyle: {
  58. normal: {
  59. label: {
  60. show: true,
  61. formatter: "{b}\n¥{c}",
  62. textStyle: {
  63. color: '#000'
  64. }
  65. },
  66. textColor : '#000'
  67. },
  68. emphasis: {
  69. label: {
  70. show: true
  71. }
  72. }
  73. },
  74. data: [
  75. {
  76. type: 'max', name: '上周最大值',},
  77. {
  78. type: 'min', name: '上周最小值'}
  79. ]
  80. },
  81. markLine: {
  82. data: [
  83. {
  84. type: 'average', name: '平均值'}
  85. ]
  86. }
  87. },
  88. {
  89. name: '今日整点',
  90. type: 'bar',
  91. barMaxWidth: '100',
  92. data: [],
  93. markPoint: {
  94. itemStyle: {
  95. normal: {
  96. label: {
  97. show: true,
  98. formatter: "{b}\n{c}",
  99. textStyle: {
  100. color: '#000'
  101. }
  102. },
  103. textColor : '#000'
  104. },
  105. emphasis: {
  106. label: {
  107. show: true
  108. }
  109. }
  110. },
  111. data: [
  112. {
  113. type: 'max', name: '今日最大值'},
  114. {
  115. type: 'min', name: '今日最小值'}
  116. ]
  117. },
  118. markLine: {
  119. data: [
  120. {
  121. type: 'average', name: '平均值'}
  122. ]
  123. }
  124. }
  125. ]
  126. };
  127. barChart.setOption(barChartoption);

发表评论

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

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

相关阅读