devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 使用renderjs引入echarts

作者：菜鸟追梦旅行 | 2024-02-13 02:36:17

赞

踩

uniapp 使用renderjs引入echarts

效果图：

1.1renderjs引入echarts 

组件zmui-echarts.vue：

  1. <template>
  2. 	<view class="zmui-echarts" :prop="option" :change:prop="echarts.delay"></view>
  3. </template>
  4.  
  5. <script>
  6. 	export default {
  7. 		name: 'zmuiEcharts',
  8. 		props: {
  9. 			option: {
  10. 				type: Object,
  11. 				required: true
  12. 			}
  13. 		}
  14. 	}
  15. </script>
  16.  
  17. //使用renderjs 就让app拥有类似有.HTML文件的环境 能直接挂载.js的能力
  18. <script module="echarts" lang="renderjs"> 
  19. 	export default {
  20. 		data() {
  21. 			return {
  22. 				timeoutId: null,
  23. 				chart: null
  24. 			}
  25. 		},
  26. 		mounted() {
  27. 			if (typeof window.echarts === 'object') {
  28. 				this.init()
  29. 			} else {
  30. 				// 动态引入类库
  31. 				const script = document.createElement('script') //创建个标签
  32. 				script.src = './static/echarts.min.js'  //引入echarts.min.js
  33. 				script.onload = this.init
  34. 				document.head.appendChild(script) //全局挂载echarts.min.js
  35. 			}
  36. 		},
  37. 		methods: {
  38. 			/**
  39. 			 * 初始化echarts
  40. 			 */
  41. 			init() {
  42. 				// 根据id初始化图表
  43. 				this.chart = echarts.init(this.$el)
  44. 				this.update(this.option)
  45. 			},
  46. 			/**
  47. 			 * 防抖函数，500毫秒内只运行最后一次的方法
  48. 			 * @param {Object} option
  49. 			 */
  50. 			delay(option) {
  51. 				if (this.timeoutId) {
  52. 					clearTimeout(this.timeoutId)
  53. 					this.timeoutId = null
  54. 				}
  55.       this.timeoutId = setTimeout(() => {
  56. 					this.update(option)
  57. 				}, 500)
  58. 			},
  59. 			/**
  60. 			 * 监测数据更新
  61. 			 * @param {Object} option
  62. 			 */
  63. 			update(option) {
  64. 				console.log('option', option)
  65. 				if (this.chart) {
  66. 					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
  67. 					if (option) {
  68. 						// tooltip
  69. 						if (option.tooltip) {
  70. 							// 判断是否设置tooltip的位置
  71. 							if (option.tooltip.positionStatus) {
  72. 								option.tooltip.position = this.tooltipPosition()
  73. 							}
  74. 							// 判断是否格式化tooltip
  75. 							if (option.tooltip.formatterStatus) {
  76. 								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2,
  77. 									option.tooltip.formatThousands)
  78. 							}
  79. 						}
  80.  
  81. 						// legend
  82. 						if (option.legend) {
  83. 							console.log('option.legend', option.legend)
  84. 							if (Object.prototype.toString.call(option.legend) == '[object Array]') {
  85. 								for (let i in option.legend) {
  86. 									if (option.legend[i].formatterStatus) {
  87. 										option.legend[i].formatter = this.legendFormatter(option.legend[i].formatterType, option.legend[i].formatterArr)
  88. 									}
  89. 								}
  90. 								console.log(12)
  91. 							} else {
  92. 								if (option.legend.formatterStatus) {
  93. 									console.log(56)
  94. 									// option.legend.formatter = this.legendFormatter(option.legend.formatterType, option.legend.formatterArr)
  95. 									// option.legend.formatter = function(value) {
  96. 									// 	return '1'
  97. 									// }
  98. 								}
  99. 								console.log(34)
  100. 							}
  101. 						}
  102.  
  103. 						// y轴
  104. 						if (option.yAxis) {
  105. 							if (option.yAxis.axisLabel) {
  106. 								if (option.yAxis.axisLabel.formatterStatus) {
  107. 									option.yAxis.axisLabel.formatter = this.yAxisFormatter(option.yAxis.axisLabel.formatterData)
  108. 								}
  109. 							}
  110. 							
  111. 							if (option.yAxis[0].axisLabel.water) {
  112. 									let currentChooseName = option.yAxis[0].axisLabel.water.currentChooseName
  113. 									let name = option.yAxis[0].axisLabel.water.name
  114. 									console.log('name========>', name,currentChooseName)
  115. 									option.yAxis[0].axisLabel.formatter =  function(value) {
  116. 										let level = null
  117. 										if (currentChooseName == '西铝饮用水' || currentChooseName == '和尚山') {
  118. 											if (name == 'CODMn') {
  119. 												switch (value) {
  120. 													case 2:
  121. 														level = 2.0;
  122. 														break;
  123. 													case 4:
  124. 														level = 4.0;
  125. 														break;
  126. 													case 6:
  127. 														level = 6.0;
  128. 														break;
  129. 													case 10:
  130. 														level = 10.0;
  131. 														break;
  132. 												}
  133. 												return level;
  134. 											}else if (name == 'TP') {
  135. 												switch (value) {
  136. 													case 0.02:
  137. 														level = 0.02;
  138. 														break;
  139. 													case 0.1:
  140. 														level = 0.1;
  141. 														break;
  142. 													case 0.2:
  143. 														level = 0.2;
  144. 														break;
  145. 													case 0.3:
  146. 														level = 0.3;
  147. 														break;
  148. 												}
  149. 												return level;
  150. 												
  151. 											}else if (name == 'DO') {
  152. 												switch (value) {
  153. 													case 7.5:
  154. 														level = 7.5;
  155. 														break;
  156. 													case 6:
  157. 														level = 6.0;
  158. 														break;
  159. 													case 5:
  160. 														level = 5.0;
  161. 														break;
  162. 													case 3:
  163. 														level = 3.0;
  164. 														break;
  165. 												}
  166. 												return level;
  167. 											}else if (name == 'TN') {
  168. 												switch (value) {
  169. 													case 0.2:
  170. 														level = 0.2;
  171. 														break;
  172. 													case 0.5:
  173. 														level = 0.5;
  174. 														break;
  175. 													case 1:
  176. 														level = 1.0;
  177. 														break;
  178. 													case 1.5:
  179. 														level = 1.5;
  180. 														break;
  181. 												}
  182. 												return level;
  183. 											} else if (name == 'NH3-N') {
  184. 												switch (value) {
  185. 													case 0.15:
  186. 														level = 0.15;
  187. 														break;
  188. 													case 0.5:
  189. 														level = 0.5;
  190. 														break;
  191. 													case 1:
  192. 														level = 1.0;
  193. 														break;
  194. 													case 1.5:
  195. 														level = 1.5;
  196. 														break;
  197. 												}
  198. 												return level;
  199. 											}
  200. 											
  201. 										}else if(currentChooseName !== '西铝饮用水' || currentChooseName !== '和尚山') {
  202. 											if (name == 'CODMn') {
  203. 												switch (value) {
  204. 													case 4:
  205. 														level = 4.0;
  206. 														break;
  207. 													case 6:
  208. 														level = 6.0;
  209. 														break;
  210. 													case 10:
  211. 														level = 10.0;
  212. 														break;
  213. 														case 15:
  214. 															level = 15.0;
  215. 															break;
  216. 												}
  217. 												return level;
  218. 											}else if (name == 'TP') {
  219. 												switch (value) {
  220. 															
  221. 													case 0.1:
  222. 														level = 0.1;
  223. 														break;
  224. 													case 0.2:
  225. 														level = 0.2;
  226. 														break;
  227. 													case 0.3:
  228. 														level = 0.3;
  229. 														break;
  230. 														case 0.4:
  231. 															level = 0.4;
  232. 															break;
  233. 												}
  234. 												return level;
  235. 											} else if (name == 'DO') {
  236. 												switch (value) {
  237. 													
  238. 													case 6:
  239. 														level = 6.0;
  240. 														break;
  241. 													case 5:
  242. 														level = 5.0;
  243. 														break;
  244. 													case 3:
  245. 														level = 3.0;
  246. 														break;
  247. 														case 2:
  248. 															level = 2.0;
  249. 															break;
  250. 												}
  251. 												return level;
  252. 											}else if (name == 'TN') {
  253. 												switch (value) {
  254. 													
  255. 													case 0.5:
  256. 														level = 0.5;
  257. 														break;
  258. 													case 1:
  259. 														level = 1.0;
  260. 														break;
  261. 													case 1.5:
  262. 														level = 1.5;
  263. 														break;
  264. 														case 2:
  265. 															level = 2.0;
  266. 															break;
  267. 												}
  268. 																			
  269. 												return level;
  270. 											} else if (name == 'NH3-N') {
  271. 												switch (value) {							
  272. 													case 0.5:
  273. 														level = 0.5;
  274. 														break;
  275. 													case 1:
  276. 														level = 1.0;
  277. 														break;
  278. 													case 1.5:
  279. 														level = 1.5;
  280. 														break;
  281. 														case 2:
  282. 															level = 2.0;
  283. 															break;
  284. 												}
  285. 												return level;
  286. 											}
  287. 										} 
  288. 										
  289. 									}
  290. 							}
  291. 						}
  292.  
  293. 						// 颜色渐变
  294. 						if (option.series) {
  295. 							for (let i in option.series) {
  296. 								let linearGradient = option.series[i].linearGradient
  297. 								if (option.series[i].axisLabel && option.series[i].axisLabel.formatterText) {
  298. 									option.series[i].axisLabel.formatter = function(value) {
  299. 										if (value === 0) {
  300. 											return '0 \n 健康';
  301. 										} else if (value === 1) {
  302. 											return '50 \n 优';
  303. 										} else if (value === 2) {
  304. 											return '100 \n 良';
  305. 										} else if (value === 3) {
  306. 											return '150 \n 轻度';
  307. 										} else if (value === 4) {
  308. 											return '200 \n 中度';
  309. 										} else if (value === 5) {
  310. 											return '300 \n 重度';
  311. 										} else if (value === 6) {
  312. 											return '500 \n 严重';
  313. 										}
  314. 									}
  315. 								}
  316. 								if (linearGradient) {
  317. 									option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0], linearGradient[1],
  318. 										linearGradient[2], linearGradient[3], linearGradient[4])
  319. 								}
  320.  
  321. 								if (option.series[i].itemStyle) {
  322. 									if (option.series[i].itemStyle.normal) {
  323. 										if (option.series[i].itemStyle.normal.formatterColor) {
  324. 											option.series[i].itemStyle.normal.color = this.colorFormatter(option.series[i].itemStyle.normal.formatterType,option.series[i])
  325. 										}
  326. 									}
  327. 								}
  328.  
  329. 								if (option.series[i].markLine) {
  330. 									if (option.series[i].markLine.label) {
  331. 										if (option.series[i].markLine.label.normal) {
  332. 											if (option.series[i].markLine.label.normal.formatterLabel) {
  333. 												option.series[i].markLine.label.normal.formatter = this.labelFormatter(option.series[i].markLine.label.normal
  334. 													.formatterType, option.series[i].markLine.label.normal.formatterValue)
  335. 											}
  336. 										}
  337. 									}
  338. 								}
  339. 							}
  340. 						}
  341. 					}
  342. 					
  343. 					console.log(option)
  344. 					this.chart.clear() // 这个不要删掉哟，不然切换不同图形的时候会有bug
  345. 					// 设置新的option
  346. 					this.chart.setOption(option, option.notMerge)
  347. 				}
  348. 			},
  349. 			waterFormatterYAxis (value) {
  350. 				/* let name = null
  351. 				switch (value) {
  352. 					case 2:
  353. 						name = 2.0;
  354. 						break;
  355. 					case 4:
  356. 						name = 4.0;
  357. 						break;
  358. 					case 6:
  359. 						name = 6.0;
  360. 						break;
  361. 					case 10:
  362. 						name = 10.0;
  363. 						break;
  364. 				} */
  365. 				console.log('value', value)
  366. 				// return name;
  367. 			},
  368. 			/**
  369. 			 * 设置tooltip的位置，防止超出画布
  370. 			 */
  371. 			tooltipPosition() {
  372. 				return (point, params, dom, rect, size) => {
  373. 					// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
  374. 					let x = point[0]
  375. 					let y = point[1]
  376. 					let viewWidth = size.viewSize[0]
  377. 					let viewHeight = size.viewSize[1]
  378. 					let boxWidth = size.contentSize[0]
  379. 					let boxHeight = size.contentSize[1]
  380. 					let posX = 0 // x坐标位置
  381. 					let posY = 0 // y坐标位置
  382. 					if (x >= boxWidth) { // 左边放的下
  383. 						posX = x - boxWidth - 1
  384. 					}
  385. 					if (y >= boxHeight) { // 上边放的下
  386. 						posY = y - boxHeight - 1
  387. 					}
  388. 					return [posX, posY]
  389. 				}
  390. 			},
  391. 			/**
  392. 			 * tooltip格式化
  393. 			 * @param {Object} unit 数值后的单位
  394. 			 * @param {Object} formatFloat2 是否保留两位小数
  395. 			 * @param {Object} formatThousands 是否添加千分位
  396. 			 */
  397. 			tooltipFormatter(unit, formatFloat2, formatThousands) {
  398. 				return params => {
  399. 					if (Array.isArray(params)) {
  400. 						var params = params[0]
  401. 						// #ifdef H5
  402. 						var result = params.data.fullDate + '/n' + params.seriesName + "：" + params.data.value
  403. 						// #endif
  404. 						// #ifdef APP-PLUS
  405. 						var result = params.data.fullDate + '</br>' + params.seriesName + "：" + params.data.value
  406. 						// #endif
  407. 					} else {
  408. 						// #ifdef H5
  409. 						var result = params.data.fullDate + '/n' + params.seriesName + "：" + params.data.value
  410. 						// #endif
  411. 						// #ifdef APP-PLUS
  412. 						var result = params.data.fullDate + '</br>' + params.seriesName + "：" + params.data.value
  413. 						// #endif
  414. 					}
  415. 					return result
  416. 				}
  417. 			},
  418. 			/**
  419. 			 * 保留两位小数
  420. 			 * @param {Object} value
  421. 			 */
  422. 			formatFloat2(value) {
  423. 				let temp = Math.round(parseFloat(value) * 100) / 100
  424. 				let xsd = temp.toString().split('.')
  425. 				if (xsd.length === 1) {
  426. 					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
  427. 					return temp
  428. 				}
  429. 				if (xsd.length > 1) {
  430. 					if (xsd[1].length < 2) {
  431. 						temp = temp.toString() + '0'
  432. 					}
  433. 					return temp
  434. 				}
  435. 			},
  436. 			/**
  437. 			 * 添加千分位
  438. 			 * @param {Object} value
  439. 			 */
  440. 			formatThousands(value) {
  441. 				if (value === undefined || value === null) {
  442. 					value = ''
  443. 				}
  444. 				if (!isNaN(value)) {
  445. 					value = value + ''
  446. 				}
  447. 				let re = /\d{1,3}(?=(\d{3})+$)/g
  448. 				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
  449. 					return s1.replace(re, '$&,') + s2
  450. 				})
  451. 				return n1
  452. 			},
  453.  
  454. 			/**
  455. 			 * Y轴格式化
  456. 			 * @param {Object} data
  457. 			 */
  458. 			yAxisFormatter(data) {
  459. 				return params => {
  460. 					let result = []
  461. 					for (let i in data) {
  462. 						if (params == i) {
  463. 							result.push(data[i])
  464. 						}
  465. 					}
  466. 					return result
  467. 				}
  468. 			},
  469. 			/**
  470. 			 * legend 格式
  471. 			 * @param {Object} Type
  472. 			 * @param {Object} Arr
  473. 			 */
  474. 			legendFormatter(Type, Arr) {
  475. 				console.log('Arr', Arr)
  476. 				return params => {
  477. 					let result = ""
  478. 					var total = 0;
  479. 					for (var i = 0, l = Arr.length; i < l; i++) {
  480. 						total += Arr[i].value;
  481. 				    }
  482. 					let res = Arr.filter(v => v.name === params)
  483. 					let val = res[0].value
  484. 					let precent=((val/total)*100).toFixed(2) + '%'
  485. 					// #ifdef H5
  486. 					result = params +"("+ val+"件)"
  487. 					// #endif
  488. 					// #ifdef APP-PLUS
  489. 					result = params +"("+ val+"件)"
  490. 					// #endif
  491. 					return result
  492. 				}
  493. 			},
  494. 			/**
  495. 			 * 颜色设置
  496. 			 * @param {Object} Type
  497. 			 */
  498. 			colorFormatter(Type,series) {
  499. 				let value  =0;
  500. 				return params => {
  501. 					//如果series 里面包含aqiData 数据 按AQI 的值来渲染颜色
  502. 					let value =params.value;
  503. 					 if(series['aqiData']!=null){
  504. 						value =series['aqiData'][params.dataIndex];
  505. 					} 
  506. 					let result = ""
  507. 					if (Type === 'one') {
  508. 						result = "rgb(126,0,35)"
  509. 						if (value > 0 && value < 51) {
  510. 							result = "#00e400"
  511. 						} else if (value >= 51 && value < 101) {
  512. 							result = "#ffff00"
  513. 						} else if (value>= 101 && value < 151) {
  514. 							result = "#ff7e00"
  515. 						} else if (value >= 151 && value < 201) {
  516. 							result = "#ff0000"
  517. 						} else if (value >= 201 && value < 301) {
  518. 							result = "#7e0023"
  519. 						}
  520. 					}
  521. 					return result
  522. 				}
  523. 			},
  524. 			/**
  525. 			 * 标记线
  526. 			 * @param {Object} Type
  527. 			 * @param {Object} Value
  528. 			 */
  529. 			labelFormatter(Type, Value) {
  530. 				return params => {
  531. 					let result = ""
  532. 					if (Type === 'one') {
  533. 						result = Value
  534. 					}
  535. 					return result
  536. 				}
  537. 			},
  538. 		}
  539. 	}
  540. </script>
  541.  
  542. <style scoped>
  543. 	.zmui-echarts {
  544. 		width: 100%;
  545. 		height: 100%;
  546. 	}
  547. </style>

2.使用<zmuiEcharts  :option="echartOptions"></zmuiEcharts>

  1. import zmuiEcharts from '@/components/zmui-echarts/zmui-echarts.vue'
  2. components: {
  3. 			zmuiEcharts
  4. 		},
  5. <zmuiEcharts  :option="echartOptions"></zmuiEcharts>
  6.  
  7. export default {
  8.     data(){
  9.         return{
  10.             echartOptions: {
  11. 					backgroundColor: '#ffffff',
  12. 					title: {
  13. 						text: 'mg/L',
  14. 						textStyle: {
  15. 							fontSize: 12,
  16. 							fontWeight: 'normal',
  17. 							color: '#858585', //标题颜色
  18. 						},
  19. 						top: 0,
  20. 						left: '4%',
  21. 					},
  22. 					tooltip: {
  23. 						show: false
  24. 						// axisPointer: {
  25. 						// 	type: "axis",
  26. 						// 	textStyle: {
  27. 						// 		color: "#000"
  28. 						// 	}
  29. 						// },
  30. 						// formatter: (data) => {
  31. 						// 	// 可以自定义文字和样式，用行内样式，数据包含在data参数中
  32. 						// 	let text = ` ${data.name}：${data.value}`
  33. 						// 	return text
  34. 						// }
  35. 					},
  36. 					grid: {
  37. 						top: "5%",
  38. 						right: "3%",
  39. 						bottom: '13%',
  40. 					},
  41. 					xAxis: [{
  42. 						data: [],
  43. 						margin: 20,
  44. 						interval: 0,
  45. 						rotate: 40,
  46. 						color: '#858585',
  47. 						textStyle: {
  48. 							fontSize: 12
  49. 						},
  50. 						axisLine: {
  51. 							lineStyle: {
  52. 								color: '#858585',
  53. 							}
  54. 						},
  55. 						axisTick: {
  56. 							show: true
  57. 						},
  58. 					}],
  59. 					axisLine: {
  60. 						show: false,
  61. 						lineStyle: {
  62. 							color: '#858585', //y轴颜色
  63. 						}
  64. 					},
  65. 					axisTick: {
  66. 						show: false
  67. 					},
  68. 					splitLine: {
  69. 						show: false
  70. 					},
  71. 					dataZoom: [{
  72. 							"show": true,
  73. 							"height": 8,
  74. 							"xAxisIndex": [
  75. 								0
  76. 							],
  77. 							bottom: '0%',
  78. 							start: 0,
  79. 							end: 6,
  80. 							handleIcon: "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
  81. 							handleSize: "130%",
  82. 							handleStyle: {
  83. 								color: "#fff",
  84. 								shadowColor: "#B1B5B9",
  85. 								shadowBlur: 5,
  86. 							},
  87. 							backgroundColor: "#DEE3F4",
  88. 							fillerColor: "#008efe",
  89. 							endValue: 5,
  90. 						},
  91. 						{
  92. 							"type": "inside",
  93. 							"show": true,
  94. 							"height": 15,
  95. 							"start": 1,
  96. 							"end": 35
  97. 						}
  98. 					],
  99. 					yAxis: [{
  100. 						type: 'value',
  101. 						min: 0,
  102. 						max: 0,
  103. 						interval: 0.01,
  104. 						name: 'nj',
  105. 						nameTextStyle: {
  106. 							color: '#ffffff'
  107. 						},
  108. 						axisLine: {
  109. 							show: true
  110. 						},
  111. 						axisTick: {
  112. 							show: false
  113. 						},
  114. 						splitLine: {
  115. 							show: false,
  116. 						},
  117. 						axisLabel: {
  118. 							color: '#858585',
  119. 							textStyle: {
  120. 								fontSize: 13
  121. 							},
  122. 							formatter: function(value1) {
  123. 								return value1;
  124. 							},
  125. 							water: {
  126. 								name: 'water',
  127. 								code: 'code'
  128. 							},
  129. 				
  130. 						},
  131. 				
  132. 					}],
  133. 				
  134. 				
  135. 					series: [{
  136. 						label: {
  137. 							normal: {
  138. 								show: true,
  139. 								color: '#333',
  140. 								position: 'top',
  141. 							}
  142. 						},
  143. 						name: 'nj',
  144. 						type: 'bar',
  145. 						data: [],
  146. 						barWidth: '8px',
  147. 						itemStyle: {
  148. 							normal: {
  149. 								formatterColor: true,
  150. 								formatterType: "one",
  151. 							}
  152. 						},
  153. 					}]
  154. 				}
  155.         }
  156.     }
  157. }
  158.  
  159.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/79443
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号