Dashboard.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <div class="chart" :id="id"></div>
  3. </template>
  4. <script>
  5. import util from "@/helper/util.js";
  6. import partten from "@/helper/partten.js";
  7. import * as echarts from "echarts";
  8. export default {
  9. name: "Dashboard-chart",
  10. componentName: "Dashboard-chart",
  11. props: {
  12. width: {
  13. type: String,
  14. default: "100%",
  15. },
  16. height: {
  17. type: String,
  18. default: "100%",
  19. },
  20. value: {
  21. type: Number,
  22. default: 50,
  23. },
  24. max: {
  25. type: Number,
  26. default: 100,
  27. },
  28. },
  29. data() {
  30. return {
  31. id: "",
  32. chart: null,
  33. };
  34. },
  35. computed: {},
  36. methods: {
  37. initChart() {
  38. let option = {
  39. tooltip: {
  40. formatter: "{a} <br/>{b} : {c}%",
  41. },
  42. series: [
  43. {
  44. name: "内部进度条",
  45. type: "gauge",
  46. // center: ['50%', '50%'],
  47. radius: "80%",
  48. z: 4,
  49. splitNumber: 10,
  50. axisLine: {
  51. lineStyle: {
  52. color: [
  53. [this.value / 100, partten.getColor("green")],
  54. [1, partten.getColor("gray")],
  55. ],
  56. width: 8,
  57. },
  58. },
  59. axisLabel: {
  60. show: false,
  61. },
  62. axisTick: {
  63. show: false,
  64. },
  65. splitLine: {
  66. show: false,
  67. },
  68. itemStyle: {
  69. show: false,
  70. },
  71. detail: {
  72. formatter: function(value) {
  73. if (value !== 0) {
  74. var num = Math.round(value);
  75. return parseInt(num).toFixed(0) + "";
  76. } else {
  77. return 0;
  78. }
  79. },
  80. offsetCenter: [0, "75%"],
  81. textStyle: {
  82. padding: [0, 0, 0, 0],
  83. fontSize: 20,
  84. fontWeight: "700",
  85. color: partten.getColor("green"),
  86. },
  87. },
  88. title: {
  89. show: false,
  90. },
  91. data: [
  92. {
  93. name: this.value,
  94. value: this.value,
  95. },
  96. ],
  97. pointer: {
  98. show: true,
  99. length: "70%",
  100. radius: "20%",
  101. width: 2, //指针粗细
  102. itemStyle: {
  103. color: partten.getColor("green"),
  104. },
  105. },
  106. animationDuration: 1500,
  107. },
  108. // 内圆
  109. {
  110. name: "内圆",
  111. type: "pie",
  112. hoverAnimation: false,
  113. legendHoverLink: false,
  114. radius: "8%",
  115. z: 4,
  116. labelLine: {
  117. normal: {
  118. show: false,
  119. },
  120. },
  121. data: [
  122. {
  123. value: 0,
  124. },
  125. {
  126. value: 10,
  127. itemStyle: {
  128. normal: {
  129. color: "#161f1e",
  130. },
  131. emphasis: {
  132. color: "#161f1e",
  133. },
  134. },
  135. },
  136. ],
  137. },
  138. // 圆环
  139. {
  140. name: "小圆形",
  141. type: "pie",
  142. hoverAnimation: false,
  143. legendHoverLink: false,
  144. radius: ["8%", "5%"],
  145. z: 5,
  146. labelLine: {
  147. normal: {
  148. show: false,
  149. },
  150. },
  151. data: [
  152. {
  153. value: 0,
  154. },
  155. {
  156. value: 10,
  157. itemStyle: {
  158. normal: {
  159. color: partten.getColor("green"),
  160. },
  161. },
  162. },
  163. ],
  164. },
  165. {
  166. name: "外部刻度",
  167. type: "gauge",
  168. radius: "94%",
  169. min: 0, //最小刻度
  170. max: this.max, //最大刻度
  171. splitNumber: 4, //刻度数量
  172. startAngle: 225,
  173. endAngle: -45,
  174. axisLine: {
  175. show: false,
  176. },
  177. //仪表盘轴线
  178. axisLabel: {
  179. show: true,
  180. distance: 16,
  181. fontSize: 12,
  182. },
  183. //刻度标签。
  184. axisTick: {
  185. show: true,
  186. splitNumber: 4,
  187. lineStyle: {
  188. color: partten.getColor("gray"), //用颜色渐变函数不起作用
  189. width: 1,
  190. },
  191. length: 4,
  192. },
  193. //刻度样式
  194. splitLine: {
  195. show: false,
  196. },
  197. //分隔线样式
  198. detail: {
  199. show: false,
  200. },
  201. pointer: {
  202. show: true,
  203. },
  204. },
  205. ],
  206. };
  207. this.chart.setOption(option);
  208. },
  209. },
  210. created() {
  211. this.id = "pie-chart-" + util.newGUID();
  212. },
  213. mounted() {
  214. this.$nextTick(() => {
  215. this.$el.style.width = this.width;
  216. this.$el.style.height = this.height;
  217. this.chart = echarts.init(this.$el);
  218. this.initChart();
  219. });
  220. },
  221. updated() {
  222. this.initChart();
  223. },
  224. };
  225. </script>
  226. <style lang="less">
  227. .chart {
  228. width: 100%;
  229. height: 100%;
  230. display: inline-block;
  231. }
  232. </style>