widgetPiechart.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <template>
  2. <div :style="styleObj">
  3. <v-chart :options="options" autoresize/>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "WidgetPiechart",
  9. components: {},
  10. props: {
  11. value: Object,
  12. ispreview: Boolean
  13. },
  14. data() {
  15. return {
  16. options: {
  17. title: {
  18. text: "",
  19. left: "center",
  20. textStyle: {
  21. color: "#fff"
  22. }
  23. },
  24. legend: {
  25. orient: "vertical",
  26. left: "left",
  27. textStyle: {
  28. color: "#fff"
  29. }
  30. },
  31. series: [
  32. {
  33. type: "pie",
  34. radius: "50%",
  35. data: [],
  36. emphasis: {
  37. itemStyle: {
  38. shadowBlur: 10,
  39. shadowOffsetX: 0,
  40. shadowColor: "rgba(0, 0, 0, 0.5)"
  41. }
  42. }
  43. }
  44. ]
  45. },
  46. optionsStyle: {}, // 样式
  47. optionsData: {}, // 数据
  48. optionsCollapse: {}, // 图标属性
  49. optionsSetup: {}
  50. };
  51. },
  52. computed: {
  53. styleObj() {
  54. return {
  55. position: this.ispreview ? "absolute" : "static",
  56. width: this.optionsStyle.width + "px",
  57. height: this.optionsStyle.height + "px",
  58. left: this.optionsStyle.left + "px",
  59. top: this.optionsStyle.top + "px",
  60. background: this.optionsSetup.background
  61. };
  62. }
  63. },
  64. watch: {
  65. value: {
  66. handler(val) {
  67. this.optionsStyle = val.position;
  68. this.optionsData = val.data;
  69. this.optionsCollapse = val.collapse;
  70. this.optionsSetup = val.setup;
  71. this.editorOptions();
  72. },
  73. deep: true
  74. }
  75. },
  76. created() {
  77. this.optionsStyle = this.value.position;
  78. this.optionsData = this.value.data;
  79. this.optionsCollapse = this.value.collapse;
  80. this.optionsSetup = this.value.setup;
  81. this.editorOptions();
  82. },
  83. methods: {
  84. // 修改图标options属性
  85. editorOptions() {
  86. this.setOptionsTitle();
  87. this.setOptionsValue();
  88. this.setOptionsTooltip();
  89. this.setOptionsLegend();
  90. this.setOptionsColor();
  91. this.setOptionsData();
  92. this.setOptionsPiechartStyle();
  93. },
  94. // 饼图样式
  95. setOptionsPiechartStyle() {
  96. if (this.optionsSetup.piechartStyle == "shixin") {
  97. this.options.series[0]["radius"] = "50%";
  98. } else if (this.optionsSetup.piechartStyle == "kongxin") {
  99. this.options.series[0]["radius"] = ["40%", "70%"];
  100. } else {
  101. }
  102. },
  103. // 标题设置
  104. setOptionsTitle() {
  105. const optionsSetup = this.optionsSetup;
  106. const title = {};
  107. title.show = optionsSetup.isNoTitle;
  108. title.text = optionsSetup.titleText;
  109. title.left = optionsSetup.textAlign;
  110. title.textStyle = {
  111. color: optionsSetup.textColor,
  112. fontSize: optionsSetup.textFontSize,
  113. fontWeight: optionsSetup.textFontWeight
  114. };
  115. title.subtext = optionsSetup.subText;
  116. title.subtextStyle = {
  117. color: optionsSetup.subTextColor,
  118. fontWeight: optionsSetup.subTextFontWeight,
  119. fontSize: optionsSetup.subTextFontSize
  120. };
  121. this.options.title = title;
  122. },
  123. // 数值设定
  124. setOptionsValue() {
  125. const optionsSetup = this.optionsSetup;
  126. const series = this.options.series;
  127. const numberValue = optionsSetup.numberValue ? "{c}" : "";
  128. const percentage = optionsSetup.percentage ? "({d})%" : "";
  129. const label = {
  130. show: optionsSetup.isShow,
  131. formatter: `{a|{b}:${numberValue} ${percentage}}`,
  132. rich: {
  133. a: {
  134. padding: [-30, 15, -20, 15],
  135. color: optionsSetup.subTextColor,
  136. fontSize: optionsSetup.fontSize,
  137. fontWeight: optionsSetup.fontWeight
  138. }
  139. },
  140. fontSize: optionsSetup.fontSize,
  141. fontWeight: optionsSetup.optionsSetup
  142. };
  143. for (const key in series) {
  144. if (series[key].type == "pie") {
  145. series[key].label = label;
  146. series[key].labelLine = {show: optionsSetup.isShow};
  147. }
  148. }
  149. },
  150. // 提示语设置 tooltip
  151. setOptionsTooltip() {
  152. const optionsSetup = this.optionsSetup;
  153. const tooltip = {
  154. trigger: "item",
  155. show: true,
  156. textStyle: {
  157. color: optionsSetup.lineColor,
  158. fontSize: optionsSetup.fontSize
  159. }
  160. };
  161. this.options.tooltip = tooltip;
  162. },
  163. // 图例操作 legend
  164. setOptionsLegend() {
  165. const optionsSetup = this.optionsSetup;
  166. const legend = this.options.legend;
  167. legend.show = optionsSetup.isShowLegend;
  168. legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
  169. legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
  170. legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
  171. legend.bottom =
  172. optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  173. legend.orient = optionsSetup.layoutFront;
  174. legend.textStyle = {
  175. color: optionsSetup.lengedColor,
  176. fontSize: optionsSetup.fontSize
  177. };
  178. legend.itemWidth = optionsSetup.lengedWidth;
  179. },
  180. // 图例颜色修改
  181. setOptionsColor() {
  182. const optionsSetup = this.optionsSetup;
  183. const customColor = optionsSetup.customColor;
  184. if (!customColor) return;
  185. const arrColor = [];
  186. for (let i = 0; i < customColor.length; i++) {
  187. arrColor.push(customColor[i].color);
  188. }
  189. this.options.color = arrColor;
  190. this.options = Object.assign({}, this.options);
  191. },
  192. setOptionsData() {
  193. const optionsData = this.optionsData; // 数据类型 静态 or 动态
  194. optionsData.dataType == "staticData"
  195. ? this.staticDataFn(optionsData.staticData)
  196. : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  197. },
  198. staticDataFn(val) {
  199. const staticData = typeof val == "string" ? JSON.parse(val) : val;
  200. for (const key in this.options.series) {
  201. if (this.options.series[key].type == "pie") {
  202. this.options.series[key].data = staticData;
  203. }
  204. }
  205. },
  206. dynamicDataFn(val, refreshTime) {
  207. if (!val) return;
  208. if (this.ispreview) {
  209. this.getEchartData(val);
  210. this.flagInter = setInterval(() => {
  211. this.getEchartData(val);
  212. }, refreshTime);
  213. } else {
  214. this.getEchartData(val);
  215. }
  216. },
  217. getEchartData(val) {
  218. const data = this.queryEchartsData(val);
  219. data.then(res => {
  220. this.renderingFn(res);
  221. });
  222. },
  223. renderingFn(val) {
  224. for (const key in this.options.series) {
  225. if (this.options.series[key].type == "pie") {
  226. this.options.series[key].data = val;
  227. }
  228. }
  229. }
  230. }
  231. };
  232. </script>
  233. <style scoped lang="scss">
  234. .echarts {
  235. width: 100%;
  236. height: 100%;
  237. overflow: hidden;
  238. }
  239. </style>