echart-scene.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <template>
  2. <div class="echartScene">
  3. <div class="scene" ref="scene"></div>
  4. <div class="pic">
  5. <img src="../../../../../assets/images/company/echart-zu.png" alt="" />
  6. </div>
  7. <div class="percent">
  8. <div class="percent-box">
  9. <span class="per-v">{{ percent.jf }}</span>
  10. <span class="per-d">m³/min</span>
  11. </div>
  12. <div class="percent-box">
  13. <span class="per-v">{{ percent.yf }}</span>
  14. <span class="per-d">m³/min</span>
  15. </div>
  16. <div class="percent-box">
  17. <span class="per-v">{{ percent.hf }}</span>
  18. <span class="per-d">m³/min</span>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script lang="ts" setup>
  24. import { defineProps, ref, nextTick, reactive, watch } from 'vue';
  25. import * as echarts from 'echarts';
  26. let props = defineProps({
  27. echartData: {
  28. type: Object,
  29. default: () => {
  30. return {};
  31. },
  32. },
  33. });
  34. //获取dom元素节点
  35. let scene = ref<any>();
  36. let percent = reactive({
  37. jf: 0,
  38. yf: 0,
  39. hf: 0,
  40. jfEcharts: 0,
  41. yfEcharts: 0,
  42. hfEcharts: 0,
  43. });
  44. function getOption() {
  45. nextTick(() => {
  46. let placeHolderStyle = {
  47. normal: {
  48. color: '#fff',
  49. opacity: 0.1,
  50. },
  51. emphasis: {
  52. color: '#fff',
  53. opacity: 0.1,
  54. },
  55. };
  56. console.log(scene.value, 'scene');
  57. const myChart = echarts.init(scene.value);
  58. let option = {
  59. color: ['#4edaff', '#53ffde', '#a696ed'],
  60. textStyle: {
  61. fontSize: 14,
  62. color: '#40E7F4 ',
  63. },
  64. tooltip: {
  65. trigger: 'item',
  66. formatter: '{a} : {b}{c} ({d}%)',
  67. },
  68. legend: [
  69. {
  70. // orient: 'vertical',
  71. x: '58%',
  72. y: '15%',
  73. itemWidth: 8,
  74. itemHeight: 8,
  75. align: 'left',
  76. textStyle: {
  77. fontSize: 12,
  78. color: '#ccc',
  79. },
  80. data: ['进风区'],
  81. },
  82. {
  83. // orient: 'vertical',
  84. x: '58%',
  85. y: '45%',
  86. itemWidth: 8,
  87. itemHeight: 8,
  88. align: 'left',
  89. textStyle: {
  90. fontSize: 12,
  91. color: '#ccc',
  92. },
  93. data: ['用风区'],
  94. },
  95. {
  96. // orient: 'vertical',
  97. x: '58%',
  98. y: '73%',
  99. itemWidth: 8,
  100. itemHeight: 8,
  101. align: 'left',
  102. textStyle: {
  103. fontSize: 12,
  104. color: '#ccc',
  105. },
  106. data: ['回风区'],
  107. },
  108. ],
  109. series: [
  110. {
  111. name: '进风区',
  112. type: 'pie',
  113. radius: ['55%', '62%'],
  114. center: ['25%', '50%'],
  115. label: true,
  116. startAngle: 50,
  117. clockWise: true,
  118. hoverAnimation: true,
  119. hoverOffset: 8,
  120. data: [
  121. {
  122. value: percent.jf,
  123. name: '占比',
  124. itemStyle: {
  125. normal: {
  126. color: new echarts.graphic.LinearGradient(
  127. 0,
  128. 0,
  129. 0,
  130. 1,
  131. [
  132. {
  133. // 0% 处的颜色
  134. offset: 0,
  135. color: 'rgba(80, 219, 255,1)',
  136. },
  137. {
  138. // 100% 处的颜色
  139. offset: 1,
  140. color: 'rgba(80, 219, 255,.7)',
  141. },
  142. ],
  143. false
  144. ),
  145. },
  146. },
  147. },
  148. {
  149. value: percent.jfEcharts,
  150. name: '未占比',
  151. hoverAnimation: true,
  152. itemStyle: placeHolderStyle,
  153. },
  154. ],
  155. },
  156. {
  157. name: '用风区',
  158. type: 'pie',
  159. radius: ['40%', '47%'],
  160. center: ['25%', '50%'],
  161. label: false,
  162. startAngle: 200,
  163. clockWise: true,
  164. hoverAnimation: true,
  165. hoverOffset: 3,
  166. data: [
  167. {
  168. value: percent.yf,
  169. name: '占比',
  170. itemStyle: {
  171. color: {
  172. // 完成的圆环的颜色
  173. colorStops: [
  174. {
  175. offset: 0,
  176. color: 'rgba(84, 255, 222,1)', // 0% 处的颜色
  177. },
  178. {
  179. offset: 1,
  180. color: 'rgba(84, 255, 222,.7)', // 100% 处的颜色
  181. },
  182. ],
  183. },
  184. },
  185. },
  186. {
  187. value: percent.yfEcharts,
  188. hoverAnimation: true,
  189. name: '未占比',
  190. itemStyle: placeHolderStyle,
  191. },
  192. ],
  193. },
  194. {
  195. name: '回风区',
  196. type: 'pie',
  197. radius: ['25%', '32%'],
  198. center: ['25%', '50%'],
  199. label: false,
  200. startAngle: 80,
  201. clockWise: true, //顺时加载
  202. hoverAnimation: true,
  203. hoverOffset: 3,
  204. data: [
  205. {
  206. value: percent.hf,
  207. name: '占比',
  208. itemStyle: {
  209. color: {
  210. // 完成的圆环的颜色
  211. colorStops: [
  212. {
  213. offset: 0,
  214. color: 'rgba(161, 142, 242,1)', // 0% 处的颜色
  215. },
  216. {
  217. offset: 1,
  218. color: 'rgba(161, 142, 242,.7)', // 100% 处的颜色
  219. },
  220. ],
  221. },
  222. },
  223. },
  224. {
  225. value: percent.hfEcharts,
  226. name: '未占比',
  227. hoverAnimation: true, //鼠标移入变大
  228. itemStyle: placeHolderStyle,
  229. },
  230. ],
  231. },
  232. ],
  233. };
  234. myChart.setOption(option);
  235. window.onresize = function () {
  236. myChart.resize();
  237. };
  238. });
  239. }
  240. watch(
  241. () => props.echartData,
  242. (newV, oldV) => {
  243. console.log(newV, 'newV-----------');
  244. percent.jf = newV.jfq;
  245. percent.yf = newV.yfq;
  246. percent.hf = newV.hfq;
  247. percent.jfEcharts = Math.ceil(newV.zf - percent.jf);
  248. percent.yfEcharts = Math.ceil(newV.zf - percent.yf);
  249. percent.hfEcharts = Math.ceil(newV.zf - percent.hf);
  250. getOption();
  251. },
  252. {
  253. immediate: true,
  254. deep: true,
  255. }
  256. );
  257. </script>
  258. <style scoped lang="less">
  259. @font-face {
  260. font-family: 'douyuFont';
  261. src: url('../../../../assets/font/douyuFont.otf');
  262. }
  263. .echartScene {
  264. width: 100%;
  265. height: 100%;
  266. position: relative;
  267. .scene {
  268. width: 100%;
  269. height: 100%;
  270. }
  271. .pic {
  272. height: 100%;
  273. position: absolute;
  274. left: 50%;
  275. top: 0;
  276. display: flex;
  277. align-items: center;
  278. img {
  279. height: 60%;
  280. }
  281. }
  282. .percent {
  283. position: absolute;
  284. left: 72%;
  285. top: 0;
  286. width: 100px;
  287. height: 100%;
  288. display: flex;
  289. flex-direction: column;
  290. align-items: center;
  291. .percent-box {
  292. width: 100%;
  293. display: flex;
  294. justify-content: space-between;
  295. padding: 0px 10px 0px 15px;
  296. box-sizing: border-box;
  297. .per-v {
  298. font-family: 'douyuFont';
  299. font-size: 14px;
  300. }
  301. .per-d {
  302. font-size: 12px;
  303. color: #ccc;
  304. }
  305. &:nth-child(1) {
  306. position: absolute;
  307. top: 14%;
  308. color: #4edaff;
  309. }
  310. &:nth-child(2) {
  311. position: absolute;
  312. top: 44%;
  313. color: #53ffde;
  314. }
  315. &:nth-child(3) {
  316. position: absolute;
  317. top: 72%;
  318. color: #a696ed;
  319. }
  320. }
  321. }
  322. }
  323. </style>