{"id":239058,"date":"2022-04-06T10:40:56","date_gmt":"2022-04-06T02:40:56","guid":{"rendered":"https:\/\/gulass.cn\/?p=239058"},"modified":"2022-03-29T10:41:58","modified_gmt":"2022-03-29T02:41:58","slug":"vue-echarts-java","status":"publish","type":"post","link":"https:\/\/gulass.cn\/vue-echarts-java.html","title":{"rendered":"\u7b80\u5355\u4ecb\u7ecdVue\u4f7f\u7528echarts\u5b9a\u5236\u7279\u6b8a\u7684\u4eea\u8868\u76d8"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td style=\"padding: 5px 12px; width: 25px; font-size: 22px; text-align: center; background: #E8E8E8; line-height: 30px; color: #999;\">\u5bfc\u8bfb<\/td>\n<td style=\"padding: 10px 10px 12px; line-height: 20px;\"><strong>\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86Vue\u4f7f\u7528echarts\u5b9a\u5236\u7279\u6b8a\u7684\u4eea\u8868\u76d8\uff0c\u6587\u4e2d\u793a\u4f8b\u4ee3\u7801\u4ecb\u7ecd\u7684\u975e\u5e38\u8be6\u7ec6\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86Vue\u4f7f\u7528echarts\u5b9a\u5236\u7279\u6b8a\u4eea\u8868\u76d8\u7684\u5177\u4f53\u4ee3\u7801\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b<\/p>\n<p>\u5b9e\u73b0\u7684\u6548\u679c\uff1a(\u521d\u59cb\u5316\u4ee5\u53ca\u6d4f\u89c8\u5668resize\u7684\u65f6\u5019\u6570\u5b57\u548c\u5f27\u5f62\u6761\u5747\u4e3a\u9012\u589e\u52a8\u753b)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/gulass.cn\/wp-content\/uploads\/2022\/03\/2022327142624550.gif\" alt=\"\" width=\"386\" height=\"288\" class=\"aligncenter size-full wp-image-239062\" \/><\/p>\n<p>HTML\u90e8\u5206\uff1a<\/p>\n<pre>< !-- \u4e3aECharts\u51c6\u5907\u4e00\u4e2a\u5177\u5907\u5927\u5c0f\uff08\u5bbd\u9ad8\uff09\u7684Dom -->\r\n< div class=\"main-echarts-contianer\"\r\n     ref=\"main\">\r\n< \/div><\/pre>\n<p>CSS\u90e8\u5206\uff1a<\/p>\n<pre>.main-echarts-contianer {\r\n  width: 480px;\r\n  height: 320px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}<\/pre>\n<p>JS\u90e8\u5206\uff1a<\/p>\n<pre>drawClockChart () {\r\n  \/\/ \u6307\u5b9a\u56fe\u8868\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\r\n  let option = {\r\n    'series': [\r\n      {\r\n        'name': '\u4e2a\u4eba\u6307\u6807',\r\n        'type': 'gauge',\r\n        'radius': '65%',\r\n        'startAngle': '240',\r\n        'endAngle': '-60',\r\n        \/\/ \u56fe\u8868\u7684\u523b\u5ea6\u5206\u9694\u6bb5\u6570\r\n        'splitNumber': 5,\r\n        \/\/ \u56fe\u8868\u7684\u8f74\u7ebf\u76f8\u5173\r\n        'axisLine': {\r\n          'show': true,\r\n          'lineStyle': {\r\n            'color': [\r\n              [\r\n                0.9,\r\n                new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{\r\n                  offset: 0,\r\n                  color: '#FFD900'\r\n                },\r\n                {\r\n                  offset: 1,\r\n                  color: '#FF8000'\r\n                }\r\n                ])\r\n              ],\r\n              [1, '#56606E']\r\n            ],\r\n            'width': 15\r\n          }\r\n        },\r\n        \/\/ \u56fe\u8868\u7684\u523b\u5ea6\u53ca\u6837\u5f0f\r\n        'axisTick': {\r\n          'lineStyle': {\r\n            'color': '#0F1318',\r\n            'width': 2\r\n          },\r\n          'length': 15,\r\n          'splitNumber': 1\r\n        },\r\n        \/\/ \u56fe\u8868\u7684\u523b\u5ea6\u6807\u7b7e(20\u300140\u300160\u7b49\u7b49)\r\n        'axisLabel': {\r\n          'distance': -8,\r\n          'textStyle': {\r\n            'color': '#9E9E9E'\r\n          }\r\n        },\r\n        \/\/ \u56fe\u8868\u7684\u5206\u5272\u7ebf\r\n        'splitLine': {\r\n          'show': false\r\n        },\r\n        \/\/ \u56fe\u8868\u7684\u6307\u9488\r\n        'pointer': {\r\n          'show': false\r\n        },\r\n        \/\/ \u56fe\u8868\u7684\u6570\u636e\u8be6\u60c5\r\n        'detail': {\r\n          'formatter': function (params) {\r\n            return '{title|' + '\u603b\u4f53\u5f97\u5206}' + '\\n' + '{score|' + params + '}'\r\n          },\r\n          'offsetCenter': [0, 0],\r\n          'rich': {\r\n            'title': {\r\n              'fontSize': 12,\r\n              'color': '#9E9E9E',\r\n              'lineHeight': 30\r\n            },\r\n            'score': {\r\n              'fontSize': 27,\r\n              'color': '#fff'\r\n            }\r\n          }\r\n        },\r\n        \/\/ \u56fe\u8868\u7684\u6807\u9898\r\n        'title': {\r\n          'offsetCenter': [0, '90%'],\r\n          'color': '#fff',\r\n          'fontSize': 14\r\n        },\r\n        'data': [{\r\n          'name': '\u5b8c\u6210',\r\n          'value': 31\r\n        }]\r\n      },\r\n      {\r\n        'name': '\u5916\u5c42\u7ebf',\r\n        'type': 'gauge',\r\n        'radius': '72%',\r\n        'startAngle': '240',\r\n        'endAngle': '-60',\r\n        'center': ['50%', '50%'],\r\n        'axisLine': {\r\n          'lineStyle': {\r\n            'width': 1,\r\n            'color': [[1, '#56606E']]\r\n          }\r\n        },\r\n        'splitLine': {\r\n          'length': -6,\r\n          'lineStyle': {\r\n            'opacity': 0\r\n          }\r\n        },\r\n        'axisLabel': {\r\n          'show': false\r\n        },\r\n        'axisTick': {\r\n          'splitNumber': 1,\r\n          'lineStyle': {\r\n            'opacity': 0\r\n          }\r\n        },\r\n        'detail': {\r\n          'show': false\r\n        },\r\n        'pointer': {\r\n          'show': false\r\n        }\r\n      }\r\n    ]\r\n  }\r\n  let tempVal = 0\r\n  clearInterval(this.clockChartTimer)\r\n  this.clockChartTimer = setInterval(() => {\r\n    if (tempVal > this.myIvstrAbility) {\r\n      clearInterval(this.clockChartTimer)\r\n      \/\/ \u6700\u540e\u8f6c\u5230\u6700\u7ec8\u6570\u636e\u7684\u5730\u65b9\r\n      option.series[0].data[0].value = this.myIvstrAbility\r\n      option.series[0].axisLine.lineStyle.color[0][0] = this.myIvstrAbility \/ 100\r\n      \/\/ \u4f7f\u7528\u521a\u6307\u5b9a\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\u663e\u793a\u56fe\u8868\r\n      this.myChart.setOption(option)\r\n      \/\/ \u521d\u59cb\u5316\u6e32\u67d3\u5b8c\u6210\r\n      this.renderCompleted = true\r\n      return\r\n    }\r\n    option.series[0].data[0].value = tempVal\r\n    option.series[0].axisLine.lineStyle.color[0][0] = tempVal \/ 100\r\n    \/\/ \u4f7f\u7528\u521a\u6307\u5b9a\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\u663e\u793a\u56fe\u8868\u3002\r\n    this.myChart.setOption(option)\r\n    tempVal++\r\n  }, 20)\r\n  \/\/ \u6b64\u5904\u76d1\u542c\u6d4f\u89c8\u5668\u7684resize\uff0c\u91cd\u65b0\u6e32\u67d3\u56fe\u8868\r\n  let that = this\r\n  window.addEventListener(\"resize\", function () {\r\n    clearTimeout(that.resizeTimer)\r\n    that.resizeTimer = setTimeout(() => {\r\n      myChart.resize()\r\n    }, 500)\r\n  })\r\n}<\/pre>\n<p>\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86Vue\u4f7f\u7528echarts\u5b9a\u5236\u7279\u6b8a\u4eea\u8868\u76d8\u7684\u5177\u4f53\u4ee3\u7801\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b \u5b9e\u73b0\u7684\u6548\u679c\uff1a( [&hellip;]<\/p>\n","protected":false},"author":362,"featured_media":238555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-239058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/239058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/users\/362"}],"replies":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/comments?post=239058"}],"version-history":[{"count":5,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/239058\/revisions"}],"predecessor-version":[{"id":239064,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/239058\/revisions\/239064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/media\/238555"}],"wp:attachment":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/media?parent=239058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/categories?post=239058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/tags?post=239058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}