江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

173 lines
4.7 KiB

1 year ago
  1. <template>
  2. <view class="charts-box">
  3. <qiun-data-charts
  4. type="line"
  5. :opts="opts"
  6. :chartData="chartData"
  7. />
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. chartData: {},
  15. //这里的 opts 是图表类型 type="column" 的全部配置参数,您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
  16. opts: {
  17. timing: "easeOut",
  18. duration: 1000,
  19. rotate: false,
  20. rotateLock: false,
  21. color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  22. padding: [15,15,0,5],
  23. fontSize: 13,
  24. fontColor: "#1989FA",
  25. dataLabel: true,
  26. dataPointShape: true,
  27. dataPointShapeType: "solid",
  28. touchMoveLimit: 60,
  29. enableScroll: false,
  30. enableMarkLine: false,
  31. legend: {
  32. show: false,
  33. position: "bottom",
  34. float: "center",
  35. padding: 5,
  36. margin: 5,
  37. backgroundColor: "rgba(0,0,0,0)",
  38. borderColor: "rgba(0,0,0,0)",
  39. borderWidth: 0,
  40. fontSize: 13,
  41. fontColor: "#666666",
  42. lineHeight: 11,
  43. hiddenColor: "#CECECE",
  44. itemGap: 10
  45. },
  46. xAxis: {
  47. disableGrid: true,
  48. disabled: false,
  49. axisLine: true,
  50. axisLineColor: "#E8E9EC",
  51. calibration: false,
  52. fontColor: "#686B73",
  53. fontSize: 12,
  54. lineHeight: 20,
  55. marginTop: 0,
  56. rotateLabel: false,
  57. rotateAngle: 45,
  58. itemCount: 5,
  59. boundaryGap: "center",
  60. splitNumber: 5,
  61. gridColor: "#CCCCCC",
  62. gridType: "solid",
  63. dashLength: 4,
  64. gridEval: 1,
  65. scrollShow: false,
  66. scrollAlign: "left",
  67. scrollColor: "#A6A6A6",
  68. scrollBackgroundColor: "#EFEBEF",
  69. title: "",
  70. titleFontSize: 13,
  71. titleOffsetY: 0,
  72. titleOffsetX: 0,
  73. titleFontColor: "#666666",
  74. format: ""
  75. },
  76. yAxis: {
  77. data: [
  78. {
  79. min: 0
  80. }
  81. ],
  82. disabled: true,
  83. disableGrid: false,
  84. splitNumber: 5,
  85. gridType: "dash",
  86. dashLength: 8,
  87. gridColor: "#E8E9EC",
  88. padding: 10,
  89. showTitle: false
  90. },
  91. extra: {
  92. column: {
  93. type: "group",
  94. width: 9,
  95. activeBgColor: "#000000",
  96. activeBgOpacity: 0.08,
  97. seriesGap: 2,
  98. categoryGap: 3,
  99. barBorderCircle: false,
  100. linearType: "none",
  101. linearOpacity: 1,
  102. colorStop: 0,
  103. meterBorder: 1,
  104. meterFillColor: "#FFFFFF",
  105. labelPosition: "outside"
  106. },
  107. tooltip: {
  108. showBox: false,
  109. showArrow: true,
  110. showCategory: false,
  111. borderWidth: 0,
  112. borderRadius: 0,
  113. borderColor: "#000000",
  114. borderOpacity: 0.7,
  115. bgColor: "#000000",
  116. bgOpacity: 0.7,
  117. gridType: "solid",
  118. dashLength: 4,
  119. gridColor: "#CCCCCC",
  120. boxPadding: 3,
  121. fontSize: 12,
  122. lineHeight: 20,
  123. fontColor: "#FFFFFF",
  124. legendShow: true,
  125. legendShape: "auto",
  126. splitLine: true,
  127. horizentalLine: false,
  128. xAxisLabel: false,
  129. yAxisLabel: false,
  130. labelBgColor: "#FFFFFF",
  131. labelBgOpacity: 0.7,
  132. labelFontColor: "#666666"
  133. },
  134. markLine: {
  135. type: "solid",
  136. dashLength: 4,
  137. data: []
  138. }
  139. }
  140. }
  141. };
  142. },
  143. mounted() {
  144. this.getServerData();
  145. },
  146. methods: {
  147. getServerData() {
  148. //模拟从服务器获取数据时的延时
  149. setTimeout(() => {
  150. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  151. let res = {
  152. categories: ["08/01","08/02","08/03","08/04","08/05","08/06"],
  153. series: [
  154. {
  155. name: "目标值",
  156. data: [35,16,31,33,35,36,]
  157. }
  158. ]
  159. };
  160. this.chartData = JSON.parse(JSON.stringify(res));
  161. }, 500);
  162. },
  163. }
  164. };
  165. </script>
  166. <style scoped>
  167. /* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
  168. .charts-box {
  169. width: 100%;
  170. height: 100%;
  171. }
  172. </style>