vue封装echarts组件

小鱼儿 2022-10-27 02:56 337阅读 0赞

话不多说,先上代码。
组件:

  1. <template>
  2. <div
  3. id="echartsItem"
  4. style="width: 100%; height: 400px"
  5. :legendData="legendData"
  6. :echartsData="echartsData"
  7. ></div>
  8. </template>
  9. <script>
  10. import echarts from "@/utils/echars";
  11. export default {
  12. name: "echartsList",
  13. mixins: [mixin],
  14. components: { },
  15. props: {
  16. legendData: {
  17. type: Array,
  18. default: () => [],
  19. },
  20. echartsData: {
  21. type: Object,
  22. default: null,
  23. }
  24. },
  25. data() {
  26. return {
  27. option: {
  28. grid: {
  29. left: "0",
  30. right: "10",
  31. top: "8%",
  32. bottom: "10%",
  33. containLabel: true,
  34. },
  35. tooltip: {
  36. trigger: "axis",
  37. textStyle: {
  38. color: "#79828b",
  39. fontSize: "12px",
  40. },
  41. axisPointer: {
  42. color: "#0FA0F8",
  43. }
  44. },
  45. legend: {
  46. bottom: "0",
  47. icon: "circle",
  48. itemHeight: 10,
  49. textStyle: {
  50. padding: [0, 30, 0, 0],
  51. },
  52. data: this.legendData,
  53. },
  54. toolbox: {
  55. show: true,
  56. feature: {
  57. magicType: { show: true, type: ["stack", "tiled"] },
  58. saveAsImage: { show: true },
  59. },
  60. },
  61. xAxis: {
  62. type: "category",
  63. axisLabel: {
  64. color: "#A9A9A9",
  65. },
  66. axisLine: {
  67. show: false,
  68. },
  69. axisTick: {
  70. show: false,
  71. },
  72. data: [],
  73. },
  74. yAxis: {
  75. name: "",
  76. type: "value",
  77. axisLine: {
  78. show: false,
  79. },
  80. axisTick: {
  81. show: false,
  82. },
  83. axisLabel: {
  84. color: "#A9A9A9",
  85. },
  86. splitLine: {
  87. show: false,
  88. },
  89. axisPointer: {
  90. snap: true,
  91. },
  92. },
  93. series: [
  94. {
  95. type: "bar",
  96. itemStyle: {
  97. normal: {
  98. color: "rgba(246, 248, 250,1)",
  99. width: "33px",
  100. },
  101. },
  102. emphasis: {
  103. itemStyle: {
  104. color: "rgba(246, 248, 250,1)",
  105. },
  106. },
  107. zlevel: 0,
  108. data: [],
  109. barGap: "-100%",
  110. barCategoryGap: "20%",
  111. animation: false,
  112. },
  113. {
  114. name: this.legendData[1],
  115. type: "line",
  116. smooth: true,
  117. zlevel: 1,
  118. itemStyle: {
  119. borderColor: "#E7B962",
  120. color: "#E7B962",
  121. },
  122. lineStyle: {
  123. color: "#E7B962",
  124. },
  125. areaStyle: { },
  126. data: [],
  127. },
  128. {
  129. name: this.legendData[2],
  130. type: "line",
  131. smooth: true,
  132. zlevel: 1,
  133. itemStyle: {
  134. borderColor: "#49A4FF",
  135. color: "#49A4FF",
  136. },
  137. lineStyle: {
  138. color: "#49A4FF",
  139. },
  140. areaStyle: { },
  141. data: [],
  142. },
  143. {
  144. name: this.legendData[0],
  145. type: "line",
  146. smooth: true,
  147. zlevel: 1,
  148. itemStyle: {
  149. borderColor: "#8ED83E",
  150. color: "#8ED83E",
  151. },
  152. lineStyle: {
  153. color: "#8ED83E",
  154. },
  155. areaStyle: { },
  156. data: [],
  157. },
  158. ],
  159. },
  160. };
  161. },
  162. watch: {
  163. echartsData: {
  164. handler(val) {
  165. this.getChart();
  166. },
  167. deep: true,
  168. },
  169. },
  170. mounted() {
  171. this.getChart();
  172. this.initEchart();
  173. },
  174. computed: { },
  175. methods: {
  176. // echarts数据
  177. initEchart() {
  178. this.myChart = echarts.init(document.getElementById("echartsItem"));
  179. this.setOption();
  180. },
  181. setOption() {
  182. this.option.yAxis.name = this.echartsData.yAxis.name;
  183. this.option.series[0].data = this.echartsData.series[0].data;
  184. this.option.series[1].data = this.echartsData.series[1].data;
  185. this.option.series[2].data = this.echartsData.series[2].data;
  186. this.option.series[3].data = this.echartsData.series[3].data;
  187. this.option.xAxis.data = this.echartsData.xAxis.data;
  188. this.myChart.setOption(this.option, true);
  189. this.myChart.resize();
  190. },
  191. getChart() {
  192. this.$nextTick(() => {
  193. this.initEchart();
  194. });
  195. },
  196. },
  197. beforeDestroy () {
  198. if (this.myChart) {
  199. this.myChart.clear()
  200. }
  201. },
  202. };
  203. </script>

调用组件

  1. <template>
  2. <echartsList :legendData="legendData" :echartsData="echartsData"></echartsList>
  3. </template>
  4. <script>
  5. data() {
  6. return {
  7. //你要传的echarts数据,调用接口后赋值
  8. legendData: ["活动***", "活动***", "活动***"],
  9. echartsData: {
  10. xAxis: {
  11. data: [],
  12. },
  13. yAxis: {
  14. name:"人数"
  15. },
  16. series: [
  17. { data: []},
  18. { data: []},
  19. { data: []},
  20. { data: []},
  21. ]
  22. }
  23. }
  24. },
  25. mounted() { this.getData()},
  26. methods: {
  27. getData(){ //获取数据接口
  28. this.echartsData.yAxis.max = this.option.series[0].data[0];
  29. }
  30. }
  31. </script>

不封装的话每次用到都要重新配置,太麻烦,不如封装成组件提高复用性。这里的代码是简化后的,效果什么的根据需求加就好了,若有错误请指出。

发表评论

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

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

相关阅读

    相关 封装vue的过程

    vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.