• uni-app：服务器端数据绘制多个echarts图标（renderjs解决手机端无法显示问题）

    效果

    代码 

    1. <template>
    2. 	<view>
    3. 		<view :prop="option1" :change:prop="echarts.updateEcharts1" id="echarts1"
    4. 			class="echarts">view>
    5. 		<view :prop="option2" :change:prop="echarts.updateEcharts2" id="echarts2"
    6. 			class="echarts">view>
    7. 	view>
    8.  
    9. template>
    10.  
    11. <script>
    12. 	export default {
    13. 		data() {
    14. 			return {
    15. 				option1: '',
    16. 				option2: '',
    17. 			}
    18. 		},
    19. 		mounted() {
    20. 			this.getData(); // 在组件挂载后调用获取数据的方法
    21. 		},
    22. 		methods: {
    23. 			getData() {
    24. 				uni.request({
    25. 					url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',
    26. 					data: {},
    27. 					header: {
    28. 						"Content-Type": "application/x-www-form-urlencoded"
    29. 					},
    30. 					method: 'POST',
    31. 					dataType: 'json',
    32. 					success: res => {
    33. 						//行1：年月日总额统计
    34. 						this.line1_info = res.data;
    35. 						//行2：周统计
    36. 						var weekinfo = res.data.week_info;
    37. 						this.weekinfo = weekinfo;
    38. 						//行2：月统计
    39. 						var monthinfo = res.data.month_info;
    40. 						this.monthinfo = monthinfo;
    41. 						//行2：年统计
    42. 						var yearinfo = res.data.year_info;
    43. 						this.yearinfo = yearinfo;
    44. 						console.log(this.yearinfo)
    45. 						//显示图表
    46. 						this.echart();
    47. 					},
    48. 					fail(res) {
    49. 						console.log("查询失败")
    50. 					}
    51. 				});
    52. 			},
    53. 			echart() {
    54. 				//月统计
    55. 				// 提取日期和对应的值
    56. 				var dates1 = this.monthinfo.date;
    57. 				var values1 = this.monthinfo.total_amount;
    58. 				var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
    59. 				var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    60. 				this.option1 = {
    61. 					//配置网格组件，用于定义图表的位置和大小
    62. 					grid: {
    63. 						top: '15%', // 增加top的值来创建间距
    64. 						left: '2%',
    65. 						right: '2%',
    66. 						bottom: '2%', // 增加bottom的值来创建间距
    67. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    68. 					},
    69. 					color: ['#5588d4'],
    70. 					tooltip: {
    71. 						trigger: 'item',
    72. 						axisPointer: {
    73. 							type: 'line'
    74. 						},
    75. 						formatter: function(params) {
    76. 							var value = values1[params.dataIndex];
    77. 							var date = dates1[params.dataIndex];
    78. 							var month = months1_chinese[params.dataIndex];
    79. 							var marker = params.marker; // 添加marker(小圆点)
    80. 							return marker + ' ' + date + '
      '       + month + ' : ' + value + '万元';
    81. 						}
    82. 					},
    83. 					xAxis: {
    84. 						// name: '日期',
    85. 						data: months1,
    86. 						axisLine: {
    87. 							show: false // 隐藏纵坐标轴的横线
    88. 						},
    89. 						//隐藏小刻度短线
    90. 						axisTick: { // x轴刻度相关配置
    91. 							show: false, // 是否显示x轴刻度线
    92. 						},
    93. 						nameTextStyle: {
    94. 							fontSize: 12 // 设置横轴名称字体大小为12
    95. 						}
    96. 					},
    97. 					yAxis: {
    98. 						name: '金额(万元)',
    99. 						splitLine: {
    100. 							show: false // 隐藏纵坐标轴的背景横线
    101. 						},
    102. 						axisLine: {
    103. 							show: false // 隐藏纵坐标轴的竖线
    104. 						},
    105. 						//隐藏小刻度短线
    106. 						axisTick: { // x轴刻度相关配置
    107. 							show: false, // 是否显示x轴刻度线
    108. 						},
    109. 						axisLabel: {
    110. 							fontSize: 12 // 设置横轴标签字体大小为12
    111. 						},
    112. 						nameTextStyle: {
    113. 							fontSize: 12 // 设置横轴名称字体大小为12
    114. 						}
    115. 					},
    116. 					series: [{
    117. 						barWidth: '6',
    118. 						name: '销量',
    119. 						type: 'bar',
    120. 						data: values1,
    121. 						itemStyle: {
    122. 							show: true,
    123. 							position: 'top',
    124. 							textStyle: {
    125. 								// color: '#515dc3',
    126. 								fontSize: 12
    127. 							}
    128. 						}
    129. 					}]
    130. 				}
    131. 				//近五年年统计
    132. 				// 提取日期和对应的值
    133. 				var dates2 = this.yearinfo.date;
    134. 				var values2 = this.yearinfo.total_amount;
    135. 				// 进行图表的配置和数据处理
    136. 				this.option2 = {
    137. 					//配置网格组件，用于定义图表的位置和大小
    138. 					grid: {
    139. 						top: '15%', // 增加top的值来创建间距
    140. 						left: '2%',
    141. 						right: '2%',
    142. 						bottom: '2%', // 增加bottom的值来创建间距
    143. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    144. 					},
    145. 					color: ['#71aa77'],
    146. 					tooltip: {
    147. 						trigger: 'item',
    148. 						axisPointer: {
    149. 							type: 'line'
    150. 						},
    151. 						formatter: function(params) {
    152. 							var value = values2[params.dataIndex];
    153. 							var date = dates2[params.dataIndex];
    154. 							var marker = params.marker; // 添加marker(小圆点)
    155. 							return marker + ' ' + date + '年' + '
      '       + value + '万元';
    156. 						}
    157. 					},
    158. 					xAxis: {
    159. 						// name: '日期',
    160. 						data: dates2,
    161. 						axisLine: {
    162. 							show: false // 隐藏纵坐标轴的横线
    163. 						},
    164. 						//隐藏小刻度短线
    165. 						axisTick: { // x轴刻度相关配置
    166. 							show: false, // 是否显示x轴刻度线
    167. 						},
    168. 						nameTextStyle: {
    169. 							fontSize: 12 // 设置横轴名称字体大小为12
    170. 						}
    171. 					},
    172. 					yAxis: {
    173. 						name: '金额(万元)',
    174. 						splitLine: {
    175. 							show: false // 隐藏纵坐标轴的背景横线
    176. 						},
    177. 						axisLine: {
    178. 							show: false // 隐藏纵坐标轴的竖线
    179. 						},
    180. 						//隐藏小刻度短线
    181. 						axisTick: { // x轴刻度相关配置
    182. 							show: false, // 是否显示x轴刻度线
    183. 						},
    184. 						axisLabel: {
    185. 							fontSize: 12 // 设置横轴标签字体大小为12
    186. 						},
    187. 						nameTextStyle: {
    188. 							fontSize: 12 // 设置横轴名称字体大小为12
    189. 						}
    190. 					},
    191. 					series: [{
    192. 						barWidth: '8',
    193. 						name: '销量',
    194. 						type: 'bar',
    195. 						data: values2,
    196. 						itemStyle: {
    197. 							normal: {
    198. 								label: {
    199. 									show: true,
    200. 									position: 'top',
    201. 									textStyle: {
    202. 										// color: '#515dc3',
    203. 										fontSize: 12
    204. 									}
    205. 								}
    206. 							}
    207. 						}
    208. 					}]
    209. 				}
    210.  
    211.  
    212. 			}
    213. 		}
    214. 	}
    215. script>
    217. <script module="echarts" lang="renderjs">
    218. 	let myChart1
    219. 	let myChart2
    220. 	export default {
    221. 		mounted() {
    222. 			// 首先判断window.echarts是否存在，如果存在则调用initEcharts1方法进行初始化。
    223. 			if (typeof window.echarts === 'function') {
    224. 				this.initEcharts1()
    225. 				this.initEcharts2()
    226. 			} else {
    227. 				// 如果不存在，则动态创建一个