Newer
Older
KaiFengPC / src / views / sponeScreen / Echarts / SewageEcharts.vue
@zhangdeliang zhangdeliang on 9 Oct 2 KB update
  1. <template>
  2. <div ref="assetEchart" class="asset_echart"></div>
  3. </template>
  4. <script setup>
  5. import { init } from 'echarts';
  6. import * as echarts from 'echarts';
  7.  
  8. const assetEchart = ref(null);
  9. const emit = defineEmits(['click-call-back']);
  10. const initM = () => {
  11. const chart = init(assetEchart.value);
  12. window.addEventListener('resize', () => {
  13. chart.resize();
  14. });
  15. chart.setOption({
  16. title: {
  17. text: '',
  18. show: false,
  19. },
  20. tooltip: {
  21. trigger: 'axis',
  22. axisPointer: {
  23. type: 'shadow',
  24. },
  25. },
  26. legend: {
  27. show: false,
  28. },
  29. grid: {
  30. top: '10%',
  31. left: '-20%',
  32. right: '4%',
  33. bottom: '3%',
  34. containLabel: true,
  35. },
  36. xAxis: {
  37. type: 'value',
  38. boundaryGap: [0, 0.01],
  39. axisTick: {
  40. show: false, // 不显示坐标轴刻度线
  41. },
  42.  
  43. axisLabel: {
  44. color: '#60C2FF',
  45. show: true,
  46. },
  47. splitNumber: 5,
  48. splitLine: {
  49. show: true,
  50. lineStyle: {
  51. type: 'dotted',
  52. color: 'rgba(255, 255, 255,0.3)',
  53. },
  54. },
  55. },
  56. yAxis: {
  57. type: 'category',
  58. data: ['远期(2035年)', '中期(2030年)', '近期(2020年)'],
  59. name: '再生水利用(%)',
  60. nameTextStyle: {
  61. color: 'rgba(96, 194, 255, 1)',
  62. nameLocation: 'start',
  63. padding: [1, 10, -118, -130],
  64. },
  65. axisLabel: {
  66. color: '#fff',
  67. show: true,
  68. margin: 110,
  69. width: 120,
  70. overflow: 'truncate',
  71. align: 'left', // 设置为 left 表示左对齐
  72. fontSize: '14',
  73. },
  74. axisTick: {
  75. show: false, // 不显示坐标轴刻度线
  76. },
  77. axisLine: {
  78. show: false,
  79. },
  80. },
  81. series: [
  82. {
  83. name: '再生水利用(%)',
  84. type: 'bar',
  85. data: [40, 30, 20],
  86. barWidth: '8',
  87. itemStyle: {
  88. color: {
  89. type: 'linear',
  90. x: 0,
  91. y: 0,
  92. x2: 1,
  93. y2: 1,
  94. colorStops: [
  95. {
  96. offset: 0,
  97. color: 'rgba(255, 237, 82, 0)', // 0% 处的颜色
  98. },
  99. {
  100. offset: 1,
  101. color: 'rgba(255, 237, 82, 1)', // 100% 处的颜色
  102. },
  103. ],
  104. global: false, // 缺省为 false
  105. },
  106. },
  107. },
  108. ],
  109. });
  110. chart.on('click', function (params) {
  111. console.log(params, 'paramsparams');
  112. emit('click-call-back', { ...params });
  113. });
  114. };
  115. function chartSize(container, charts) {
  116. function getStyle(el, name) {
  117. if (window.getComputedStyle) {
  118. return window.getComputedStyle(el, null);
  119. } else {
  120. return el.currentStyle;
  121. }
  122. }
  123. const hi = getStyle(container, 'height').height;
  124. charts.style.height = hi;
  125. }
  126. watchEffect(() => {});
  127. onMounted(() => {
  128. initM();
  129. });
  130. </script>
  131.  
  132. <style lang="scss" scoped>
  133. .asset_echart {
  134. width: 430px;
  135. height: 120px;
  136. // margin-left:-30px;
  137. &_echart {
  138. width: 100%;
  139. height: 100%;
  140. }
  141. }
  142. </style>