BarChart.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <div :class="className" :style="{ height: height, width: width }" />
  3. </template>
  4. <script>
  5. import echarts from "echarts";
  6. require("echarts/theme/macarons");
  7. import resize from "./mixins/resize";
  8. export default {
  9. mixins: [resize],
  10. props: {
  11. className: {
  12. type: String,
  13. default: "chart"
  14. },
  15. width: {
  16. type: String,
  17. default: "100%"
  18. },
  19. height: {
  20. type: String,
  21. default: "350px"
  22. }
  23. },
  24. data() {
  25. return {
  26. chart: null,
  27. chartData: [
  28. {
  29. category: "Customer",
  30. Document: 8,
  31. Video: 77,
  32. Audio: 22,
  33. Image: 76,
  34. Text: 11,
  35. Other: 88
  36. },
  37. {
  38. category: "Developer",
  39. Document: 23,
  40. Video: 52,
  41. Audio: 80,
  42. Image: 30,
  43. Text: 22,
  44. Other: 20
  45. },
  46. {
  47. category: "Manager",
  48. Document: 98,
  49. Video: 65,
  50. Audio: 18,
  51. Image: 92,
  52. Text: 71,
  53. Other: 90
  54. },
  55. {
  56. category: "Designer",
  57. Document: 93,
  58. Video: 33,
  59. Audio: 98,
  60. Image: 10,
  61. Text: 36,
  62. Other: 11
  63. }
  64. ]
  65. };
  66. },
  67. mounted() {
  68. this.$nextTick(() => {
  69. this.initChart();
  70. });
  71. },
  72. beforeDestroy() {
  73. if (!this.chart) {
  74. return;
  75. }
  76. this.chart.dispose();
  77. this.chart = null;
  78. },
  79. methods: {
  80. initChart() {
  81. this.chart = echarts.init(this.$el, "macarons");
  82. const categories = this.chartData.map(item => item.category);
  83. const series = ["Document", "Video", "Audio", "Image", "Text", "Other"].map(type => ({
  84. name: type,
  85. type: "bar",
  86. barWidth: "10%",
  87. data: this.chartData.map(item => item[type]),
  88. itemStyle: { color: this.getColor(type) }
  89. }));
  90. this.chart.setOption({
  91. tooltip: {
  92. trigger: "axis",
  93. axisPointer: {
  94. type: "shadow"
  95. }
  96. },
  97. legend: {
  98. data: ["Document", "Video", "Audio", "Image", "Text", "Other"],
  99. bottom: 0
  100. },
  101. grid: {
  102. left: "3%",
  103. right: "4%",
  104. bottom: "10%",
  105. top: "3%",
  106. containLabel: true
  107. },
  108. xAxis: [
  109. {
  110. type: "category",
  111. data: categories,
  112. axisTick: { show: false },
  113. axisLine: { show: false },
  114. axisLabel: {
  115. interval: 0,
  116. align: 'center',
  117. margin: 20,
  118. fontSize: 14
  119. },
  120. axisTick: {
  121. alignWithLabel: true
  122. },
  123. splitLine: {
  124. show: true,
  125. lineStyle: {
  126. type: 'dashed',
  127. color: '#ddd'
  128. }
  129. }
  130. }
  131. ],
  132. yAxis: [
  133. {
  134. type: "value",
  135. max: 100
  136. }
  137. ],
  138. series: series
  139. });
  140. },
  141. getColor(type) {
  142. const colorMap = {
  143. Document: "#FF7B7B",
  144. Video: "#9D96F5",
  145. Audio: "#4ADEDE",
  146. Image: "#FFA400",
  147. Text: "#5D7DFF",
  148. Other: "#4ADEDE"
  149. };
  150. return colorMap[type];
  151. }
  152. }
  153. };
  154. </script>