devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp app使用echart（renderjs, 仅支持 app-vue、h5 端）并封装成组件使用_uniapp vue3 renderjs

作者：2023面试高手 | 2024-02-21 12:55:23

赞

踩

uniapp vue3 renderjs

仅支持 app-vue、h5 端

1.先根据文档renderjs说明，并且查看示例:https://ext.dcloud.net.cn/plugin?id=1207,下载renderjs-echarts-demo压缩包

2.将renderjs-echarts-demo\static的echarts拷贝放到项目目录static中，只能放到static目录中，不然会报错echarts.init is not a function，这个回答在示例地址底部作者有回答

3.复制renderjs-echarts-demo\pages\index的index.vue代码到你自己的页面，保存即可以显示图标，经测试在h5，模拟器，手机都可以查看图标

实现效果：

ps里面有一个坑，在app上formatter自定义函数不生效问题。解决方案：在setOption之前加上formatter方法，下面有具体写法

  1. <template>
  2. 	<view class="content">
  3. 		<view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	export default {
  9. 		data() {
  10. 			return {
  11. 				option: {
  12.           color: ['#78b4d1', '#fcd664', '#78a999'],
  13.           tooltip: {											//提示组件
  14.             trigger: 'axis',
  15.             axisPointer: {
  16.               type: 'shadow'
  17.             }
  18.           },
  19.           legend: {
  20.             data: [{
  21. 				name: '水',
  22. 				textStyle: {
  23. 				    color: '#999999' 
  24. 				}
  25. 			},{
  26. 				name: '电',
  27. 				textStyle: {
  28. 					color: '#999999' 
  29. 				}
  30. 			},{
  31. 				name: '冷量',
  32. 				textStyle: {
  33. 					color: '#999999' 
  34. 			    }
  35. 			}],
  36.             icon: 'circle',								    //图例icon园
  37. 			top: '10%',
  38. 			align: 'right',								    //图例icon位置
  39. 			itemWidth: '10'								    //图例icon大小
  40.           },
  41.           grid: {
  42.             left: '5%',
  43.             right: '10%',
  44.             bottom: '5%',
  45.             containLabel: true						        //防止标签溢出
  46.           },
  47.           xAxis: {
  48. 			type: 'value',
  49. 			position: 'top',							    //横坐标位于顶部
  50. 			interval: 50,									//横坐标间距50
  51. 			splitLine: {
  52. 				lineStyle: {
  53. 					color: '#eeeeee',
  54. 					type: 'dashed'						    //轴线虚线
  55. 				}
  56. 			},
  57. 			axisLine: {										//坐标轴轴线隐藏
  58. 				show: false
  59.             },
  60. 			axisTick: {										//坐标轴刻度隐藏
  61. 				show: false,
  62. 			},
  63. 			axisLabel: {									//坐标轴刻度文字
  64. 				color: '#999999'
  65. 			}
  66.           },
  67.           yAxis: {
  68. 			type: 'category',
  69. 			data: [{
  70. 				value: 'B栋',
  71. 				textStyle: {
  72. 					fontSize: 14
  73. 				}
  74. 			},{
  75. 				value: 'A栋',
  76. 				textStyle: {
  77. 					fontSize: 14
  78. 			    }
  79. 			}],
  80. 			axisLine: {										//坐标轴轴线隐藏
  81. 				show: false
  82.             },
  83. 			splitLine: {									//坐标分割线隐藏
  84. 				show: false
  85. 			},
  86. 			axisTick: {                		                //坐标轴刻度隐藏
  87. 				show: false
  88. 			}
  89.           },
  90.           series: [
  91.               {
  92.                 name: '水',
  93.                 type: 'bar',
  94. 				data: [110, 90],
  95. 				barGap: '150%',						        //类目 柱间距
  96. 				barCategoryGap: '40%',                      //类目 y轴值间距
  97. 				label: {
  98. 					show: true,							    //显示柱值
  99. 					position: 'right',			            //位置显示在右边
  100. 					color: '#000',
  101. 				},
  102.               },
  103.               {
  104.                 name: '电',
  105.                 type: 'bar',
  106. 				data: [140, 100],
  107. 				barGap: '150%',
  108. 				barCategoryGap: '40%',
  109. 				label: {
  110. 					show: true,
  111. 					position: 'right',
  112. 					color: '#000'
  113. 				}
  114.               },{
  115.                 name: '冷量',
  116.                 type: 'bar',
  117. 				data: [130, 70],
  118. 				barGap: '150%',
  119. 				barCategoryGap: '40%',
  120. 				label: {
  121. 					show: true,
  122. 					position: 'right',
  123. 					color: '#000',
  124. 					// formatter: () => {    不这么做的原因是app上不生效，在setOption之前加上formatter方法
  125.  
  126. 					// }
  127. 				}
  128.               }
  129.           ]
  130. 				}
  131. 			}
  132. 		},
  133. 		methods: {
  134. 		}
  135. 	}
  136. </script>
  137.  
  138. <script module="echarts" lang="renderjs">
  139. 	let myChart
  140. 	export default {
  141. 		mounted() {
  142. 			if (typeof window.echarts === 'function') {
  143. 				this.initEcharts()
  144. 			} else {
  145. 				// 动态引入较大类库避免影响页面展示
  146. 				const script = document.createElement('script')
  147. 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
  148. 				script.src = 'static/echarts.js'
  149. 				script.onload = this.initEcharts.bind(this)
  150. 				document.head.appendChild(script)
  151. 			}
  152. 		},
  153. 		methods: {
  154. 			initEcharts() {
  155. 				myChart = echarts.init(document.getElementById('echarts'))
  156. 				// 这么做解决app上formatter自定义函数不生效问题。
  157. 				this.option.series[0].label.formatter = function formatter(data) {
  158. 					return data.value + 'm³'
  159. 				}
  160. 				this.option.series[1].label.formatter = function formatter(data) {
  161. 					return data.value + 'kwh'
  162. 				}
  163. 				this.option.series[2].label.formatter = function formatter(data) {
  164. 					return data.value + 'kwh'
  165. 				}
  166. 				// 观测更新的数据在 view 层可以直接访问到
  167. 				myChart.setOption(this.option)
  168. 			},
  169. 			updateEcharts(newValue, oldValue, ownerInstance, instance) {
  170. 				// 监听 service 层数据变更
  171. 				myChart.setOption(newValue)
  172. 			}
  173. 		}
  174. 	}
  175. </script>
  176.  
  177. <style>
  178. 	.content {
  179. 		width: 100%;
  180. 		height: 100%;
  181. 		display: flex;
  182. 		flex-direction: column;
  183. 		align-items: center;
  184. 		justify-content: center;
  185. 	}
  186.  
  187. 	.echarts {
  188. 		/* margin-top: 100px; */
  189. 		width: 100%;
  190. 		height: 100%;
  191. 	}
  192. </style>

封装组件

实现效果：一个组件，可以实现不同的图表功能

实现思路：

1.在同个页面使用多个图表，需要id名不一致

2.option配置项需改成配置项

实现过程：

1.父级传id名传给组件或者组件里生成随机数加上前缀

2.父级传option配置项传给组件

实现中出现问题：uniapp中的renderjs在app中是于逻辑层分开，无法获取逻辑层中的data或者props,所以无法给renderjs中的id无法改成配置项

解决过程思路：1.从逻辑层传入renderjs 2.既然逻辑层传入renderjs在app中无效，h5有效，那可不可以在renderjs定义变量传给逻辑层，在动态改变

解决过程分析：（主要为解决renderjs的id改成配置项的问题）

1.从逻辑层传入根据uniapp提供的dome，需要触发点击，即:change:prop,再通过ownerInstance.callMethod来调用method中的方法，但问题是，这个组件根本不用点击呀，如何在mouted中调用renderjs中的方法？翻看社区，百度，博客等，社区有给一个 this.$ownerInstance.callMethod，经测试，这个再h5有效，app无效，无法调用renderjs中的方法（不信你们可以自己试试），那咋办，社区等都找了个遍，无提供答案，那试试第二种了

2.在renderjs中定义一个随机数，然后通过this.$ownerInstance.callMethod传给逻辑层，然后动态改变，结果，h5跟app都空白。。。（有人试了可以的话，留言跟我说下，谢谢）

再出现一个解决思路：为什么renderjs中有一个this.option,为什么这个可以？

尝试：跟renderjs的this.option定义一样，那试试看定义一个跟他一模一样的会不会可以？

结果：没用，不管怎么定义，renderjs获取不到

再出现一个解决思路：那我把从新定义一个变量，在变量里面修改，再给:prop，会不会可以？

结果：可以。。。原因不明（有人知道的话，可以跟我说下，谢谢）

过程用到网址：https://ask.dcloud.net.cn/question/97817            https://ask.dcloud.net.cn/question/92340         有兴趣的可以研究下

效果

组件

  1. <template>
  2. 	<view class="content">
  3. 		<view :prop="echartInfo" :change:prop="echarts.updateEcharts" :id="echartInfo.id" :class="echartInfo.id" style="width: 100%;height: 100%"></view>
  4. 	</view>
  5. </template>
  6.  
  7. <script>
  8. 	export default {
  9.     props: {
  10. 			echartInfo: {
  11. 				type: Object,
  12. 				default: () => {}
  13. 			}
  14. 		}
  15. 	}
  16. </script>
  17.  
  18. <script module="echarts" lang="renderjs">
  19. 	let myChart
  20. 	export default {
  21. 		mounted() {
  22. 			if (typeof window.echarts === 'function') {
  23. 				this.initEcharts()
  24. 			} else {
  25. 				// 动态引入较大类库避免影响页面展示
  26. 				const script = document.createElement('script')
  27. 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
  28. 				script.src = 'static/echarts.js'
  29. 				script.onload = this.initEcharts.bind(this)
  30. 				document.head.appendChild(script)
  31. 			}
  32. 		},
  33. 		methods: {
  34. 			initEcharts() {
  35. 				let option = this.echartInfo.option
  36. 				let id = this.echartInfo.id
  37. 				myChart = echarts.init(document.getElementById(id))
  38. 				// 观测更新的数据在 view 层可以直接访问到
  39. 				myChart.setOption(option)
  40. 			},
  41. 			updateEcharts(newValue, oldValue, ownerInstance, instance) {
  42. 				// 监听 service 层数据变更
  43. 				myChart.setOption(newValue)
  44. 			}
  45. 		}
  46. 	}
  47. </script>
  48.  
  49. <style>
  50. 	.content {
  51. 		width: 100%;
  52. 		height: 100%;
  53. 		display: flex;
  54. 		flex-direction: column;
  55. 		align-items: center;
  56. 		justify-content: center;
  57. 	}
  58. </style>

页面

  1. <template>
  2.   <div class="minitor-container">
  3.     <div class="minitor">
  4.       <echart :echartInfo="echartInfo"></echart>
  5.       <echart :echartInfo="echartInfo2"></echart>
  6.     </div>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11.   import echart from '@/components/echart'
  12.   export default {
  13.     components: {
  14.       echart
  15.     },
  16.     data() {
  17.       return {
  18.         echartInfo: {
  19.           id: 'echart1',
  20.           option: {
  21.             color: ['#78b4d1', '#fcd664', '#78a999'],
  22.             tooltip: {											//提示组件
  23.               trigger: 'axis',
  24.               axisPointer: {
  25.                 type: 'shadow'
  26.               }
  27.             },
  28.             legend: {
  29.               data: [{
  30.                 name: '水',
  31.                 textStyle: {
  32.                   color: '#999999' 
  33.                 }
  34.               },{
  35.                 name: '电',
  36.                 textStyle: {
  37.                   color: '#999999' 
  38.                 }
  39.               },{
  40.                 name: '冷量',
  41.                 textStyle: {
  42.                   color: '#999999' 
  43.                 }
  44.               }],
  45.               icon: 'circle',								//图例icon园
  46.               top: '10%',
  47.               align: 'right',								//图例icon位置
  48.               itemWidth: '10'								//图例icon大小
  49.             },
  50.             grid: {
  51.               left: '5%',
  52.               right: '10%',
  53.               bottom: '5%',
  54.               containLabel: true						//防止标签溢出
  55.             },
  56.             xAxis: {
  57.               type: 'value',
  58.               position: 'top',							//横坐标位于顶部
  59.               interval: 50,									//横坐标间距50
  60.               splitLine: {
  61.                 lineStyle: {
  62.                   color: '#eeeeee',
  63.                   type: 'dashed'						//轴线虚线
  64.                 }
  65.               },
  66.               axisLine: {										//坐标轴轴线隐藏
  67.                 show: false
  68.               },
  69.               axisTick: {										//坐标轴刻度隐藏
  70.                 show: false,
  71.               },
  72.               axisLabel: {									//坐标轴刻度文字
  73.                 color: '#999999'
  74.               }
  75.             },
  76.             yAxis: {
  77.               type: 'category',
  78.               data: [{
  79.                 value: 'A栋',
  80.                 textStyle: {
  81.                   fontSize: 14
  82.                 }
  83.               },{
  84.                 value: 'B栋',
  85.                 textStyle: {
  86.                   fontSize: 14
  87.                 }
  88.               }],
  89.               axisLine: {										//坐标轴轴线隐藏
  90.                 show: false
  91.               },
  92.               splitLine: {									//坐标分割线隐藏
  93.                 show: false
  94.               },
  95.               axisTick: {                		//坐标轴刻度隐藏
  96.                 show: false
  97.               },
  98.               inverse: true
  99.             },
  100.             series: [
  101.                 {
  102.                   name: '水',
  103.                   type: 'bar',
  104.                   data: [110, 90],
  105.                   barGap: '150%',						//类目 柱间距
  106.                   barCategoryGap: '40%',    //类目 y轴值间距
  107.                   label: {
  108.                     show: true,							//显示柱值
  109.                     position: 'right',			//位置显示在右边
  110.                     color: '#000',
  111.                     formatter:"{c}m³"
  112.                   }
  113.                 },
  114.                 {
  115.                   name: '电',
  116.                   type: 'bar',
  117.                   data: [140, 100],
  118.                   barGap: '150%',
  119.                   barCategoryGap: '40%',
  120.                   label: {
  121.                     show: true,
  122.                     position: 'right',
  123.                     color: '#000',
  124.                     formatter:"{c}m³"
  125.                   }
  126.                 },{
  127.                   name: '冷量',
  128.                   type: 'bar',
  129.                   data: [130, 70],
  130.                   barGap: '150%',
  131.                   barCategoryGap: '40%',
  132.                   label: {
  133.                     show: true,
  134.                     position: 'right',
  135.                     color: '#000',
  136.                     // unit: 'm³'
  137.                     formatter:"{c}m³"
  138.                   }
  139.                 }
  140.             ]
  141.           },
  142.         },
  143.         echartInfo2: {
  144.           id: 'echart_2',
  145.           option: {
  146.             // color: ['#5eb0f1'],
  147.             tooltip: {
  148.               trigger: 'axis',
  149.               axisPointer: {
  150.                 type: 'shadow'
  151.               }
  152.             },
  153.             grid: {
  154.               left: '5%',
  155.               right: '10%',
  156.               top: '10%',
  157.               containLabel: true
  158.             },
  159.             xAxis: {
  160.               type: 'value',
  161.               axisLine: {
  162.                 show: false
  163.               },
  164.               axisLabel: {
  165.                 show: false
  166.               },
  167.               axisTick: {
  168.                 show: false
  169.               },
  170.               splitLine: {
  171.                 show: false
  172.               }
  173.             },
  174.             yAxis: [{
  175.               type: 'category',
  176.               data: ['视频监控', '视频监控', '视频监控', '视频监控', '视频监控', '视频监控'],
  177.               axisLine: {
  178.                 show: false
  179.               },
  180.               axisTick: {
  181.                 show: false
  182.               },
  183.               splitLine: {
  184.                 show: false
  185.               },
  186.               inverse:true
  187.             },{
  188.               type: 'category',
  189.               data: ['100','80','50','80','50','80'],
  190.               axisLine: {
  191.                 show: false
  192.               },
  193.               axisTick: {
  194.                 show: false
  195.               },
  196.               splitLine: {
  197.                 show: false
  198.               },
  199.               inverse:true
  200.             }],
  201.             series: [{
  202.               type: 'bar',
  203.               yAxisIndex: 0,
  204.               data: ['100','80','50','80','50','80'],
  205.               barWidth: 6,
  206.               itemStyle: {
  207.                 normal: {
  208.                   color: '#5eb0f1',
  209.                 }
  210.               },
  211.               label:{
  212.                 show: false,
  213.                 // position:"right",
  214.                 // formatter:"{c}%"
  215.               }
  216.             }, {
  217.               type: 'bar',
  218.               silent: true,
  219.               yAxisIndex: 1,
  220.               barWidth: 6,
  221.               itemStyle: {
  222.                 normal: {
  223.                   color: 'rgba(180, 180, 180, 0.2)',
  224.                 }
  225.               },
  226.               data: ['100', '100', '100', '100', '100', '100']
  227.             }]
  228.           }
  229.         }
  230.       }
  231.     }
  232.   }
  233. </script>
  234.  
  235. <style lang="scss" scoped>
  236. .minitor-container{
  237.   height: 100%;
  238.   background-color: #fff;
  239.   .minitor{
  240.     height: 400rpx
  241.   }
  242. }
  243. </style>

ps：因为uniapp上的demo的echart.js不是最新的，很多新的echart配置不能用，需要去下载最新的echart.js替换即可，地址：

https://echarts.apache.org/zh/changelog.html#v5-0-1

https://github.com/apache/echarts/tree/5.0.1/dist

 

第二种app使用echarts方法，那就是写html，用iframe嵌入，很明显小程序也是不支持的，h5和app都可以，不过多个图表得写多个html。。

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

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

  

闽ICP备14008679号