1.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <template>
  2. <div id="c1" style="width: 90%;margin-left:5%;height: 100%;"></div>
  3. </template>
  4. <script>
  5. export default {
  6. name: "chart",
  7. props: {
  8. id: {
  9. type: String,
  10. default: "id"
  11. },
  12. dataArr: {
  13. type: Array,
  14. default: () => {
  15. return [];
  16. }
  17. }
  18. // colorArr: {
  19. // type: Array,
  20. // default: () => {
  21. // return [];
  22. // }
  23. // },
  24. // imageArr: {
  25. // type: Array,
  26. // default: () => {
  27. // return [];
  28. // }
  29. // }
  30. },
  31. data() {
  32. return {};
  33. },
  34. mounted() {
  35. this.gatherers();
  36. },
  37. watch: {
  38. dataArr() {
  39. this.myChart.clear();
  40. this.gatherers();
  41. }
  42. },
  43. methods: {
  44. gatherers() {
  45. let myChart = this.$echarts.init(document.getElementById("c1"));
  46. this.myChart = myChart;
  47. let dataArr = this.dataArr;
  48. let chartName = [];
  49. let chartData = [];
  50. dataArr.forEach(item => {
  51. chartName.push(item.label);
  52. chartData.push(item.value);
  53. });
  54. // // 绘制图表
  55. myChart.setOption({
  56. grid: {
  57. top: "10%",
  58. left: "5%",
  59. right: "5%",
  60. bottom: "15%",
  61. containLabel: true
  62. },
  63. tooltip: {
  64. trigger: "axis",
  65. formatter: function(params) {
  66. // console.log(params)
  67. var result = "";
  68. var dotHtml =
  69. '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f9f43b"></span>';
  70. // var dotHtml2 =
  71. // '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7800"></span>';
  72. result +=
  73. dotHtml +
  74. "申请金额:" +
  75. params[0].data +
  76. "</br>"
  77. // dotHtml2 +
  78. // "整改到位率:" +
  79. // params;
  80. return result;
  81. },
  82. // formatter: function(params) {
  83. // //提示框内容
  84. // var value = "";
  85. // for (var i = 0; i < params.length; i++) {
  86. // var data = params[i].data;
  87. // value += "申请金额 "+data + "万元";
  88. // }
  89. // return value;
  90. // },
  91. axisPointer: {
  92. lineStyle: {
  93. color: {
  94. type: "linear",
  95. x: 0,
  96. y: 0,
  97. x2: 0,
  98. y2: 1,
  99. colorStops: [
  100. {
  101. offset: 0,
  102. color: "rgba(0, 255, 233,0)"
  103. },
  104. {
  105. offset: 0.5,
  106. color: "rgba(255, 255, 255,1)"
  107. },
  108. {
  109. offset: 1,
  110. color: "rgba(0, 255, 233,0)"
  111. }
  112. ],
  113. global: false
  114. }
  115. }
  116. }
  117. },
  118. title: [
  119. {
  120. text: "(万元)",
  121. left: "2%",
  122. bottom: "13%",
  123. // textAlign: "center",
  124. textStyle: {
  125. // fontWeight: 900,
  126. fontSize: 18,
  127. color: "#fff",
  128. textAlign: "center"
  129. }
  130. }
  131. // {
  132. // text: "(日)",
  133. // right: "0%",
  134. // bottom: "13%",
  135. // // textAlign: "center",
  136. // textStyle: {
  137. // fontWeight: 900,
  138. // fontSize: 18,
  139. // color: "#8998aa",
  140. // textAlign: "center"
  141. // }
  142. // }
  143. ],
  144. xAxis: [
  145. {
  146. type: "category",
  147. axisLine: {
  148. show: true
  149. },
  150. splitArea: {
  151. color: "#f00",
  152. lineStyle: {
  153. color: "#f00"
  154. }
  155. },
  156. axisLabel: {
  157. color: "#fff",
  158. // fontWeight: 900,
  159. fontSize: 18,
  160. formatter: "{value}日",
  161. interval: 0
  162. },
  163. splitLine: {
  164. show: false
  165. },
  166. axisTick: {
  167. show: false
  168. },
  169. boundaryGap: true,
  170. data: chartName
  171. }
  172. ],
  173. yAxis: [
  174. {
  175. type: "value",
  176. splitLine: {
  177. show: true,
  178. lineStyle: {
  179. color: "rgba(255,255,255,0.1)"
  180. }
  181. },
  182. axisLine: {
  183. show: false
  184. },
  185. axisLabel: {
  186. show: true,
  187. textStyle: {
  188. color: "#fff",
  189. // fontWeight: 900,
  190. fontSize: 18
  191. }
  192. },
  193. axisTick: {
  194. show: false
  195. }
  196. }
  197. ],
  198. series: [
  199. {
  200. name: "申请金额",
  201. type: "line",
  202. smooth: true, //是否平滑
  203. showAllSymbol: true,
  204. symbol: `image://${require("../../assets/index/point2.png")}`,
  205. symbolSize: 16,
  206. lineStyle: {
  207. normal: {
  208. color: "#f9f43b"
  209. }
  210. },
  211. label: {
  212. show: false,
  213. position: "top",
  214. textStyle: {
  215. color: "#6c50f3"
  216. }
  217. },
  218. itemStyle: {
  219. color: "#f9f43b"
  220. },
  221. // tooltip: {
  222. // show: false
  223. // },
  224. areaStyle: {
  225. normal: {
  226. color: new this.$echarts.graphic.LinearGradient(
  227. 0,
  228. 0,
  229. 0,
  230. 1,
  231. [
  232. {
  233. offset: 0,
  234. color: "#fca91f"
  235. },
  236. {
  237. offset: 1,
  238. color: "#4e6b57"
  239. }
  240. ],
  241. false
  242. )
  243. }
  244. },
  245. data: chartData,
  246. markPoint: {
  247. data: [{ type: "max", name: "最大值" }],
  248. symbol: `image://${require("../../assets/index/k2.png")}`,
  249. symbolSize: [85, 35],
  250. symbolOffset: [0, -20],
  251. label: {
  252. // padding:[100],
  253. fontSize: 16,
  254. fontWeight: 800,
  255. color: "#000"
  256. }
  257. }
  258. }
  259. // {
  260. // name: "放款金额",
  261. // type: "line",
  262. // smooth: true, //是否平滑
  263. // showAllSymbol: true,
  264. // symbol: `image://${require("../../assets/index/point1.png")}`,
  265. // // symbol: "circle",
  266. // symbolSize: 16,
  267. // lineStyle: {
  268. // normal: {
  269. // color: "#3aa1d7"
  270. // }
  271. // },
  272. // label: {
  273. // show: false,
  274. // position: "top",
  275. // textStyle: {
  276. // color: "#00ca95"
  277. // }
  278. // },
  279. // itemStyle: {
  280. // color: "#fada31"
  281. // },
  282. // // tooltip: {
  283. // // show: false
  284. // // },
  285. // areaStyle: {
  286. // normal: {
  287. // color: new this.$echarts.graphic.LinearGradient(
  288. // 0,
  289. // 0,
  290. // 0,
  291. // 1,
  292. // [
  293. // {
  294. // offset: 0,
  295. // color: "#1c5076"
  296. // },
  297. // {
  298. // offset: 1,
  299. // color: "#1c5076"
  300. // }
  301. // ],
  302. // false
  303. // )
  304. // // shadowColor: "rgba(0,202,149, 0.9)",
  305. // // shadowBlur: 20
  306. // }
  307. // },
  308. // data: chartData2,
  309. // markPoint: {
  310. // data: [{ type: "max", name: "最大值" }],
  311. // symbol: `image://${require("../../assets/index/k1.png")}`,
  312. // symbolSize: [57, 35],
  313. // symbolOffset: [0, -20],
  314. // label: {
  315. // fontSize: 16,
  316. // fontWeight: 800,
  317. // color: "#fff"
  318. // }
  319. // // color: "#f00"
  320. // }
  321. // }
  322. ]
  323. });
  324. window.addEventListener("resize", function() {
  325. myChart.resize();
  326. });
  327. }
  328. },
  329. computed: {}
  330. };
  331. </script>
  332. <style scoped>
  333. </style>