Newer
Older
KaiFengPC / src / components / Echarts / lineTwoChart.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <!-- 双Y轴折线图 -->
  3. <div :id="id" style="width: 100%; height: 100%"></div>
  4. </template>
  5. <script setup>
  6. import { guid } from '@/utils/ruoyi';
  7. import useUserStore from '@/store/modules/user';
  8. const pinias = useUserStore();
  9. const { proxy } = getCurrentInstance();
  10. const id = guid();
  11. const myChart = shallowRef('');
  12.  
  13. const props = defineProps({
  14. //刷新标志
  15. refresh: {
  16. type: [String, Number],
  17. default: 1,
  18. },
  19. //标题
  20. title: {
  21. type: String,
  22. default: '',
  23. },
  24. //数据
  25. echartData: {
  26. type: Object,
  27. default: {},
  28. },
  29. });
  30. watch(
  31. () => props.refresh,
  32. value => {
  33. //先销毁实例
  34. myChart.value && myChart.value.dispose();
  35. setTimeout(() => {
  36. intChart();
  37. });
  38. }
  39. );
  40.  
  41. //自适应
  42. function resizeTheChart() {
  43. if (myChart.value) {
  44. myChart.value.resize();
  45. }
  46. }
  47. function intChart() {
  48. myChart.value = proxy.echarts.init(document.getElementById(id));
  49. myChart.value.clear();
  50. // 绘制图表
  51. myChart.value.setOption({
  52. color: pinias.$state.chartColor,
  53. tooltip: {
  54. trigger: 'axis',
  55. confine: true, //是否将 tooltip 框限制在图表的区域内
  56. },
  57. title: {
  58. left: 'left',
  59. text: '',
  60. top: 10,
  61. bottom: 10,
  62. left: 10,
  63. textStyle: {
  64. color: '#545E75', //字体颜色
  65. fontSize: 16, //字体大小
  66. },
  67. },
  68. grid: {
  69. left: '3%',
  70. right: '7%',
  71. top: '25%',
  72. bottom: '3%',
  73. containLabel: true,
  74. },
  75. legend: {
  76. top: '2%',
  77. orient: 'horizontal', //horizontal
  78. left: 'center', //left ,center
  79. textStyle: {
  80. color: 'inherit',
  81. },
  82. },
  83. xAxis: [
  84. {
  85. type: 'category',
  86. boundaryGap: false,
  87. data: props.echartData.xAxisData,
  88. axisLabel: {
  89. color: '#c6c6c6',
  90. },
  91. axisLine: {
  92. lineStyle: {
  93. color: '#066592',
  94. },
  95. },
  96. },
  97. ],
  98. yAxis: [
  99. {
  100. name: props.echartData.yAxisName1,
  101. type: 'value',
  102. nameLocation: 'end', // 坐标轴名称显示位置
  103. nameGap: 15, // 坐标轴名称与轴线之间的距离
  104. nameTextStyle: {
  105. color: '#c6c6c6', //字体颜色
  106. fontSize: 12, //字体大小
  107. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  108. },
  109. splitLine: {
  110. lineStyle: {
  111. type: 'dashed',
  112. color: '#066592',
  113. },
  114. },
  115. axisLabel: {
  116. color: '#c6c6c6',
  117. },
  118. },
  119. {
  120. name: props.echartData.yAxisName2,
  121. type: 'value',
  122. nameLocation: 'end', // 坐标轴名称显示位置
  123. nameGap: 15, // 坐标轴名称与轴线之间的距离
  124. nameTextStyle: {
  125. color: '#c6c6c6', //字体颜色
  126. fontSize: 12, //字体大小
  127. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  128. },
  129. axisLabel: {
  130. color: '#c6c6c6',
  131. },
  132. splitLine: {
  133. lineStyle: {
  134. type: 'dashed',
  135. color: '#066592',
  136. },
  137. },
  138. },
  139. ],
  140. series: [
  141. {
  142. name: props.echartData.seriesName1,
  143. type: 'line',
  144. smooth: true,
  145. yAxisIndex: 0,
  146. symbolSize: 8,
  147. data: props.echartData.seriesData1,
  148. itemStyle: {
  149. color: 'rgb(255, 70, 131)',
  150. },
  151. areaStyle: {
  152. color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  153. {
  154. offset: 0,
  155. color: 'rgba(255, 158, 68,0.1)',
  156. },
  157. {
  158. offset: 1,
  159. color: 'rgba(255, 70, 131,0.2)',
  160. },
  161. ]),
  162. },
  163. },
  164. {
  165. name: props.echartData.seriesName2,
  166. type: 'line',
  167. smooth: true,
  168. yAxisIndex: 1,
  169. symbolSize: 8,
  170. data: props.echartData.seriesData2,
  171. itemStyle: {
  172. color: 'rgb(4, 192, 144)',
  173. },
  174. areaStyle: {
  175. color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
  176. {
  177. offset: 0,
  178. color: 'rgba(4, 192, 144,0.1)',
  179. },
  180. {
  181. offset: 1,
  182. color: 'rgba(4, 205, 144,0.2)',
  183. },
  184. ]),
  185. },
  186. },
  187. ],
  188. });
  189. }
  190. onMounted(() => {
  191. setTimeout(() => {
  192. intChart();
  193. });
  194. window.addEventListener('resize', resizeTheChart);
  195. });
  196. </script>