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