BarChart.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. import {
  9. selectTypeList
  10. } from "@/api/knowledge";
  11. export default {
  12. mixins: [resize],
  13. props: {
  14. className: {
  15. type: String,
  16. default: "chart"
  17. },
  18. width: {
  19. type: String,
  20. default: "100%"
  21. },
  22. height: {
  23. type: String,
  24. default: "350px"
  25. },
  26. kenValue:{
  27. type:Number,
  28. default:null
  29. }
  30. },
  31. data() {
  32. return {
  33. chart: null,
  34. chartData: [
  35. {
  36. category: "Customer",
  37. Document: 8,
  38. Video: 77,
  39. Audio: 22,
  40. Image: 76,
  41. Text: 11,
  42. Other: 88
  43. },
  44. {
  45. category: "Developer",
  46. Document: 23,
  47. Video: 52,
  48. Audio: 80,
  49. Image: 30,
  50. Text: 22,
  51. Other: 20
  52. },
  53. {
  54. category: "Manager",
  55. Document: 98,
  56. Video: 65,
  57. Audio: 18,
  58. Image: 92,
  59. Text: 71,
  60. Other: 90
  61. },
  62. {
  63. category: "Designer",
  64. Document: 93,
  65. Video: 33,
  66. Audio: 98,
  67. Image: 10,
  68. Text: 36,
  69. Other: 11
  70. }
  71. ],
  72. dirList:[]
  73. };
  74. },
  75. watch:{
  76. kenValue:{
  77. handler(val) {
  78. this.init(val)
  79. }
  80. }
  81. },
  82. mounted() {
  83. this.$nextTick(() => {
  84. this.initChart();
  85. });
  86. },
  87. beforeDestroy() {
  88. if (!this.chart) {
  89. return;
  90. }
  91. this.chart.dispose();
  92. this.chart = null;
  93. },
  94. methods: {
  95. initChart() {
  96. this.chart = echarts.init(this.$el, "macarons");
  97. const categories = this.chartData.map(item => item.category);
  98. const series = ["Document", "Video", "Audio", "Image", "Text", "Other"].map(type => ({
  99. name: type,
  100. type: "bar",
  101. barWidth: "10%",
  102. data: this.chartData.map(item => item[type]),
  103. itemStyle: { color: this.getColor(type) }
  104. }));
  105. this.chart.setOption({
  106. tooltip: {
  107. trigger: "axis",
  108. axisPointer: {
  109. type: "shadow"
  110. }
  111. },
  112. legend: {
  113. data: ["Document", "Video", "Audio", "Image", "Text", "Other"],
  114. bottom: 0
  115. },
  116. grid: {
  117. left: "3%",
  118. right: "4%",
  119. bottom: "10%",
  120. top: "3%",
  121. containLabel: true
  122. },
  123. xAxis: [
  124. {
  125. type: "category",
  126. data: categories,
  127. axisTick: { show: false },
  128. axisLine: { show: false },
  129. axisLabel: {
  130. interval: 0,
  131. align: 'center',
  132. margin: 20,
  133. fontSize: 14
  134. },
  135. axisTick: {
  136. alignWithLabel: true
  137. },
  138. splitLine: {
  139. show: true,
  140. lineStyle: {
  141. type: 'dashed',
  142. color: '#ddd'
  143. }
  144. }
  145. }
  146. ],
  147. yAxis: [
  148. {
  149. type: "value",
  150. max: 100
  151. }
  152. ],
  153. series: series
  154. });
  155. },
  156. getColor(type) {
  157. const colorMap = {
  158. Document: "#FF7B7B",
  159. Video: "#9D96F5",
  160. Audio: "#4ADEDE",
  161. Image: "#FFA400",
  162. Text: "#5D7DFF",
  163. Other: "#4ADEDE"
  164. };
  165. return colorMap[type];
  166. },
  167. /* 获取知识库目录 */
  168. init(val){
  169. const tList={
  170. page: 1,
  171. pageSize: 9999,
  172. kb_id: val,
  173. }
  174. selectTypeList(tList).then(res=>{
  175. console.log(res);
  176. if(res.status!==200) return
  177. this.dirList=res.data.dataList
  178. })
  179. },
  180. }
  181. };
  182. </script>