Newer
Older
KaiFengPC / src / views / sponeScreen / Echarts / echartBar3D.vue
@鲁yixuan 鲁yixuan on 20 Aug 5 KB updata
  1. <template>
  2. <div :id="id" style="width: 100%; height: 100%"></div>
  3. </template>
  4. <script>
  5. import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
  6. import * as echarts from 'echarts';
  7. import { guid } from '@/utils/ruoyi';
  8. import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
  9. export default {
  10. name: 'line-chart',
  11. props: {
  12. echartData: Object,
  13. refresh: Number,
  14. },
  15. setup(props) {
  16. const allData = reactive({
  17. series: [],
  18. legend: [],
  19. id: guid(),
  20. chart: null,
  21. timer: null,
  22. });
  23. const resizeTheChart = () => {
  24. if (allData.chart) {
  25. allData.chart.resize();
  26. }
  27. };
  28.  
  29. const init = () => {
  30. let chartDom = echarts.init(document.getElementById(allData.id));
  31. let option = {
  32. color: [
  33. '#63caff',
  34. '#49beff',
  35. 'rgba(18, 81, 210, 0.3)',
  36. 'rgba(18, 81, 210, 0.3)',
  37. 'rgba(18, 81, 210, 0.3)',
  38. '#6c93ee',
  39. '#a9abff',
  40. '#f7a23f',
  41. '#27bae7',
  42. '#ff6d9d',
  43. '#cb79ff',
  44. '#f95b5a',
  45. '#ccaf27',
  46. '#38b99c',
  47. '#93d0ff',
  48. '#bd74e0',
  49. '#fd77da',
  50. '#dea700',
  51. ],
  52. grid: {
  53. containLabel: true,
  54. left: 10,
  55. right: 20,
  56. bottom: 10,
  57. top: 30,
  58. },
  59. xAxis: {
  60. axisLabel: {
  61. color: '#c0c3cd',
  62. fontSize: 12,
  63. interval: 0,
  64. },
  65. axisTick: {
  66. lineStyle: {
  67. color: '#384267',
  68. },
  69. show: false,
  70. },
  71. splitLine: {
  72. show: false,
  73. },
  74. axisLine: {
  75. lineStyle: {
  76. color: '#005CBA',
  77. width: 1,
  78. type: 'dashed',
  79. },
  80. show: true,
  81. },
  82. data: props.echartData.xAxis,
  83. type: 'category',
  84. },
  85. yAxis: {
  86. axisLabel: {
  87. color: '#fff',
  88. fontSize: 12,
  89. },
  90. axisTick: {
  91. lineStyle: {
  92. color: '#005CBA',
  93. width: 1,
  94. },
  95. show: false,
  96. },
  97. splitLine: {
  98. show: true,
  99. lineStyle: {
  100. color: '#005CBA',
  101. type: 'dashed',
  102. },
  103. },
  104. axisLine: {
  105. lineStyle: {
  106. color: '#005CBA',
  107. width: 1,
  108. type: 'dashed',
  109. },
  110. show: true,
  111. },
  112. name: props.echartData.yName,
  113. nameTextStyle: {
  114. color: '#fff',
  115. },
  116. },
  117. dataZoom: [
  118. // {
  119. // //默认控制x轴
  120. // type: 'slider', //图标下方的伸缩条
  121. // // show: true, //是否显示
  122. // // realtime: true,
  123. // start: 0, //伸缩条开始位置
  124. // end: 60, //伸缩条结束位置
  125. // },
  126. // {
  127. // type: 'inside',
  128. // // xAxisIndex: [0],
  129. // start: 0,
  130. // end: 60,
  131. // },
  132. ],
  133. series: [
  134. {
  135. data: props.echartData.seriesData,
  136. type: 'bar',
  137. barMaxWidth: 'auto',
  138. barWidth: 20,
  139. itemStyle: {
  140. color: {
  141. x: 0,
  142. y: 0,
  143. x2: 0,
  144. y2: 1,
  145. type: 'linear',
  146. global: false,
  147. colorStops: [
  148. {
  149. offset: 0,
  150. color: '#0b9eff',
  151. },
  152. {
  153. offset: 1,
  154. color: '#63caff',
  155. },
  156. ],
  157. },
  158. },
  159. label: {
  160. show: true,
  161. position: 'top',
  162. distance: 10,
  163. color: '#fff',
  164. },
  165. },
  166. {
  167. data: [1, 1, 1, 1, 1, 1, 1, 1],
  168. type: 'pictorialBar',
  169. barMaxWidth: '20',
  170. symbol: 'diamond',
  171. symbolOffset: [0, '50%'],
  172. symbolSize: [20, 15],
  173. },
  174. {
  175. data: props.echartData.seriesData,
  176. type: 'pictorialBar',
  177. barMaxWidth: '20',
  178. symbolPosition: 'end',
  179. symbol: 'diamond',
  180. symbolOffset: [0, '-50%'],
  181. symbolSize: [20, 12],
  182. zlevel: 2,
  183. },
  184. {
  185. data: props.echartData.seriesDataMax,
  186. type: 'bar',
  187. barMaxWidth: 'auto',
  188. barWidth: 20,
  189. barGap: '-100%',
  190. zlevel: -1,
  191. },
  192. {
  193. data: [1, 1, 1, 1, 1, 1, 1, 1],
  194. type: 'pictorialBar',
  195. barMaxWidth: '20',
  196. symbol: 'diamond',
  197. symbolOffset: [0, '50%'],
  198. symbolSize: [20, 15],
  199. zlevel: -2,
  200. },
  201. {
  202. data: props.echartData.seriesDataMax,
  203. type: 'pictorialBar',
  204. barMaxWidth: '20',
  205. symbolPosition: 'end',
  206. symbol: 'diamond',
  207. symbolOffset: [0, '-50%'],
  208. symbolSize: [20, 12],
  209. zlevel: -1,
  210. },
  211. ],
  212. tooltip: {
  213. trigger: 'axis',
  214. show: false,
  215. },
  216. };
  217. option && chartDom.setOption(option, true);
  218. allData.chart = chartDom;
  219. };
  220. watch(
  221. () => props.refresh,
  222. () => {
  223. if (allData.chart) {
  224. allData.chart = null;
  225. }
  226. setTimeout(() => {
  227. init();
  228. }, 0);
  229. }
  230. );
  231.  
  232. onMounted(() => {
  233. // console.log(props, 'props.refresh');
  234. setTimeout(() => {
  235. init();
  236. }, 0);
  237. window.addEventListener('resize', resizeTheChart);
  238. });
  239. return {
  240. ...toRefs(allData),
  241. resizeTheChart,
  242. init,
  243. };
  244. },
  245. };
  246. </script>