Newer
Older
urbanLifeline_YanAn / src / views / oneMap / ConstructionEvaluation / ChartCsfl.vue
@zhangqy zhangqy on 13 Nov 4 KB 性能优化
  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/util';
  7.  
  8. import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';
  9.  
  10. export default {
  11. name: 'shishijiangyu',
  12. props: {
  13. //刷新标志
  14. refresh: {
  15. type: [String, Number],
  16. default: 1,
  17. },
  18. //数据
  19. data: {
  20. type: Object,
  21. default: {},
  22. },
  23. },
  24. setup(props) {
  25. const state = reactive({
  26. id: guid(),
  27. chart: null,
  28. xData: [],
  29. yData1: [],
  30. yData2: [],
  31. });
  32.  
  33. const resizeTheChart = () => {
  34. if (state.chart) {
  35. state.chart.resize();
  36. }
  37. };
  38. const init = () => {
  39. state.xData = props.data.listName;
  40. state.yData1 = props.data.diduan;
  41. state.yData2 = props.data.zhengzhi;
  42.  
  43. let chartDom = echarts.init(document.getElementById(state.id));
  44. var option;
  45. option = {
  46. tooltip: {
  47. trigger: 'axis',
  48. axisPointer: {
  49. type: 'shadow',
  50. },
  51. backgroundColor: '#000000',
  52. borderColor: '#00D2FF',
  53. textStyle: { fontSize: 14, fontWeight: 500, color: '#00D2FF' },
  54. },
  55. grid: {
  56. top: '22%',
  57. left: '8%',
  58. right: '8%',
  59. bottom: '5%',
  60. containLabel: true,
  61. },
  62. legend: {
  63. show: true,
  64. textStyle: {
  65. color: '#E8F7FF',
  66. },
  67. itemHeight: 3,
  68. itemWidth: 10,
  69. icon: 'rect',
  70. },
  71. xAxis: {
  72. type: 'category',
  73. data: state.xData,
  74.  
  75. splitLine: {
  76. show: false,
  77. },
  78. axisLabel: {
  79. color: '#ffffffFF',
  80. fontSize: 11,
  81. },
  82. },
  83. yAxis: [
  84. {
  85. type: 'value',
  86. name: '堤段长度(km)',
  87. alignTicks: true,
  88. min: 0,
  89. nameTextStyle: {
  90. color: '#16d0dcFF',
  91. },
  92. splitLine: {
  93. show: true,
  94. lineStyle: {
  95. type: 'dotted',
  96. color: 'rgba(14, 107, 165, 1)',
  97. },
  98. },
  99. axisLabel: {
  100. color: '#1cf5fcFF',
  101. },
  102. },
  103. {
  104. type: 'value',
  105. name: '整治长度(km)',
  106. alignTicks: true,
  107. min: 0,
  108. position: 'right',
  109. nameTextStyle: {
  110. color: '#52d183FF',
  111. },
  112. splitLine: {
  113. show: true,
  114. lineStyle: {
  115. type: 'dotted',
  116. color: 'rgba(14, 107, 165, 1)',
  117. },
  118. },
  119. axisLabel: {
  120. color: 'rgb(44 252 100 / 98%)',
  121. },
  122. },
  123. ],
  124. series: [
  125. {
  126. name: '堤段长度',
  127. // data: props.data.rainlist,
  128. data: state.yData1,
  129. type: 'bar',
  130. barWidth: 10,
  131. itemStyle: {
  132. normal: {
  133. borderRadius: [2, 2, 0, 0],
  134. color: '#1cf5fcFF',
  135. // color: new proxy.echarts.graphic.LinearGradient(
  136. // 0,
  137. // 1,
  138. // 0,
  139. // 0, // 0,0,1,0表示从左向右 0,0,0,1表示从右向左
  140. // [
  141. // { offset: 1, color: '#1cf5fcFF' },
  142. // { offset: 0, color: 'rgba(11, 167, 124, 0.3)' },
  143. // ]
  144. // ),
  145. },
  146. },
  147. },
  148. {
  149. name: '整治长度',
  150. // data: props.data.rainlist,
  151. data: state.yData2,
  152. yAxisIndex: 1,
  153. type: 'bar',
  154. barWidth: 10,
  155. itemStyle: {
  156. normal: {
  157. borderRadius: [2, 2, 0, 0],
  158. color: '#5fe889FF',
  159. // color: new proxy.echarts.graphic.LinearGradient(
  160. // 0,
  161. // 1,
  162. // 0,
  163. // 0, // 0,0,1,0表示从左向右 0,0,0,1表示从右向左
  164. // [
  165. // { offset: 1, color: 'rgb(44 252 100 / 98%)' },
  166. // { offset: 0, color: 'rgb(44 252 100 / 21%)' },
  167. // ]
  168. // ),
  169. },
  170. },
  171. },
  172. ],
  173. };
  174.  
  175. option && chartDom.setOption(option, true);
  176. state.chart = chartDom;
  177. };
  178. watch(
  179. () => props.refresh,
  180. (newVal, oldVal) => {
  181. console.log(props, 'props');
  182. //先销毁实例
  183. // myChart.value && myChart.value.dispose();
  184. init();
  185. }
  186. );
  187.  
  188. onMounted(() => {
  189. nextTick(() => {
  190. init();
  191. });
  192. window.addEventListener('resize', resizeTheChart);
  193. });
  194. return {
  195. ...toRefs(state),
  196. resizeTheChart,
  197. init,
  198. };
  199. },
  200. };
  201. </script>
  202.  
  203. <style></style>