uniapp使用echarts绘制各种图表（附带完整案例）

àì夳堔傛蜴生んèń 2022-11-24 14:28 2213阅读 0赞

### uniapp中使用echarts方案 ###

*   *   *  一、在项目中安装echarts插件
         *   *   *   *  1.实现的效果图
         *  二、代码（这里主要是做简单说明，代码请去码云下载）
         *   *   *  0. echarts.min.js文件
                 *  1. echarts.vue文件（这是封装好的组件，复制就可以，简单案例无需改动）
                 *  2. index.vue页面(数据均已内置)
                 *  3. page.json中添加页面配置

> 由于ucharts不能满足所需图表要求，故使用了echarts  
> 本案例引用至：https://ext.dcloud.net.cn/plugin?id=1668\#rating  
> 然后对其进行部分优化，解决安装到自己项目中，echarts引用错误等问题。  
> 正常适配APP和H5  
> 完整案例下载：[点击去码云下载][Link 1]

### 一、在项目中安装echarts插件 ###

**项目结构如下：** 可以在自己项目里，按如下方式进行安装。  
![项目结构][20200806165701211.png]

###### 1.实现的效果图 ######

功图，这块数据量较大：  
![功图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]  
柱图、折线图：  
![柱图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]

### 二、代码（这里主要是做简单说明，代码请去码云下载） ###

##### 0. echarts.min.js文件 #####

代码较大，请去[码云][Link 1]下载

##### 1. echarts.vue文件（这是封装好的组件，复制就可以，简单案例无需改动） #####

若echarts.min.js文件路径要更换，修改lang="renderjs"这个标签引用即可

> import echarts from ‘@/components/echarts/echarts.min.js’

<template>
    	<view>
    		<view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick"></view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		name: 'Echarts',
    		props: { 
    			option: { 
    				type: Object,
    				required: true
    			}
    		},
    		created() { 
    			// 设置随机数id
    			let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    			let len = t.length
    			let id = ''
    			for (let i = 0; i < 32; i++) { 
    				id += t.charAt(Math.floor(Math.random() * len))
    			}
    			this.option.id = id
    		},
    		methods: { 
    			/** * renderjs内的点击事件，回调到父组件 * @param {Object} params */
    			onViewClick(params) { 
    				this.$emit('click', params)
    			}
    		}
    	}
    </script>
    
    <script module="echarts" lang="renderjs">
    	import echarts from '@/components/echarts/echarts.min.js'
    	
    	export default { 
    		data() { 
    			return { 
    				chart: null,
    				clickData: null // echarts点击事件的值
    			}
    		},
    		mounted() { 
    			this.init();
    		},
    		methods: { 
    			/** * 初始化echarts */
    			init() { 
    				// 根据id初始化图表
    				this.chart = echarts.init(document.getElementById(this.option.id))
    				this.update(this.option)
    				// echarts的点击事件
    				this.chart.on('click', params => { 
    					// 把点击事件的数据缓存下来
    					this.clickData = params
    				})
    			},
    			/** * 点击事件，可传递到外部 * @param {Object} event * @param {Object} instance */
    			onClick(event, instance) { 
    				if (this.clickData) { 
    					// 把echarts点击事件相关的值传递到renderjs外
    					instance.callMethod('onViewClick', { 
    						value: this.clickData.data,
    						name: this.clickData.name,
    						seriesName: this.clickData.seriesName
    					})
    					// 上次点击数据置空
    					this.clickData = null
    				}
    			},
    			/** * 监测数据更新 * @param {Object} option */
    			update(option) { 
    				if (this.chart) { 
    					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
    					if (option) { 
    						// tooltip
    						if (option.tooltip) { 
    							// 判断是否设置tooltip的位置
    							if (option.tooltip.positionStatus) { 
    								option.tooltip.position = this.tooltipPosition()
    							}
    							// 判断是否格式化tooltip
    							if (option.tooltip.formatterStatus) { 
    								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
    							}
    						}
    					}
    					// 设置新的option
    					this.chart.setOption(option, option.notMerge)
    				}
    			},
    			/** * 设置tooltip的位置，防止超出画布 */
    			tooltipPosition() { 
    				return (point, params, dom, rect, size) => { 
    					// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
    					let x = point[0]
    					let y = point[1]
    					let viewWidth = size.viewSize[0]
    					let viewHeight = size.viewSize[1]
    					let boxWidth = size.contentSize[0]
    					let boxHeight = size.contentSize[1]
    					let posX = 0 // x坐标位置
    					let posY = 0 // y坐标位置
    					if (x >= boxWidth) {  // 左边放的下
    						posX = x - boxWidth - 1
    					}
    					if (y >= boxHeight) {  // 上边放的下
    						posY = y - boxHeight - 1
    					}
    					return [posX, posY]
    				}
    			},
    			/** * tooltip格式化 * @param {Object} unit 数值后的单位 * @param {Object} formatFloat2 是否保留两位小数 * @param {Object} formatThousands 是否添加千分位 */
    			tooltipFormatter(unit, formatFloat2, formatThousands) { 
    				return params => { 
    					let result = ''
    					unit = unit ? unit : ''
    					for (let i in params) { 
    						if (i == 0) { 
    							result += params[i].axisValueLabel
    						}
    						let value = '--'
    						if (params[i].data !== null) { 
    							value = params[i].data
    							// 保留两位小数
    							if (formatFloat2) { 
    								value = this.formatFloat2(value)
    							}
    							// 添加千分位
    							if (formatThousands) { 
    								value = this.formatThousands(value)
    							}
    						}
    						// #ifdef H5
    						result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
    						// #endif
    						
    						// #ifdef APP-PLUS
    						result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
    						// #endif
    					}
    					return result
    				}
    			},
    			/** * 保留两位小数 * @param {Object} value */
    			formatFloat2(value) { 
    				let temp = Math.round(parseFloat(value) * 100) / 100
    				let xsd = temp.toString().split('.')
    				if (xsd.length === 1) { 
    					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
    					return temp
    				}
    				if (xsd.length > 1) { 
    					if (xsd[1].length < 2) { 
    						temp = temp.toString() + '0'
    					}
    					return temp
    				}
    			},
    			/** * 添加千分位 * @param {Object} value */
    			formatThousands(value) { 
    				if (value === undefined || value === null) { 
    					value = ''
    				}
    				if (!isNaN(value)) { 
    					value = value + ''
    				}
    				let re = /\d{1,3}(?=(\d{3})+$)/g
    				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) { 
    					return s1.replace(re, '$&,') + s2
    				})
    				return n1
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.echarts { 
    		width: 100%;
    		height: 100%;
    	}
    </style>

##### 2. index.vue页面(数据均已内置) #####

<template>
    	<view>
    		<echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
    		<button @click="updateClick">切换数据</button>
    	</view>
    </template>
    
    <script>
    	import echarts from '@/components/echarts/echarts.vue'
    	export default { 
    		data() { 
    			return { 
    				option: { },
    				option2: { 
    					notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    					tooltip: { 
    						trigger: 'axis',
    						positionStatus: true,
    						formatterStatus: false, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用
    						formatterUnit: '元', // 自定义变量：数值后面的单位
    						formatFloat2: true, // 自定义变量：是否格式化为两位小数
    						formatThousands: true // 自定义变量：是否添加千分位
    					},
    					legend: { 
    						data: ['', '']
    					},
    					grid: { 
    						left: '8%',
    						right: '8%',
    						bottom: '8%',
    						containLabel: true
    					},
    					xAxis: [{ 
    						name: '位移（m）',
    						nameLocation: 'middle', //轴位置
    						nameGap: 26, //name名字与轴线间距
    						type: 'value',
    						axisLine: { 
    							onZero: false
    						}
    					}],
    					yAxis: [{ 
    						name: '载荷（KN）',
    						nameLocation: 'middle', //轴位置
    						nameGap: 26, //name名字与轴线间距
    						type: 'value',
    						axisLine: { 
    							onZero: false
    						}
    					}],
    					series: [{ 
    						id: 'a',
    						type: 'line',
    						smooth: true,
    						symbolSize: 0,
    						data: [
    							[11.26, 44.8],
    							[11.94, 44.52],
    							[12.64, 44.31],
    							[13.34, 44.26],
    							[14.04, 44.36],
    							[14.76, 44.51],
    							[15.46, 44.71],
    							[16.2, 44.84],
    							[16.92, 44.92],
    							[17.64, 44.85],
    							[18.38, 44.69],
    							[19.1, 44.46],
    							[19.84, 44.21],
    							[20.56, 44.06],
    							[21.28, 43.99],
    							[22, 44.03],
    							[22.72, 44.14],
    							[23.46, 44.27],
    							[24.16, 44.36],
    							[24.88, 44.38],
    							[25.58, 44.31],
    							[26.28, 44.2],
    							[26.98, 44.07],
    							[27.68, 43.97],
    							[28.36, 43.91],
    							[29.04, 43.89],
    							[29.72, 43.94],
    							[30.38, 44.02],
    							[31.04, 44.13],
    							[31.68, 44.22],
    							[32.34, 44.26],
    							[32.98, 44.28],
    							[33.6, 44.26],
    							[34.22, 44.24],
    							[34.84, 44.19],
    							[35.44, 44.19],
    							[36.04, 44.18],
    						]
    					}]
    				},
    				option3: { 
    					notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    					xAxis: { 
    						type: 'category',
    						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    					},
    					yAxis: { 
    						type: 'value'
    					},
    					series: [{ 
    						data: [120, 200, 150, 80, 70, 110, 130],
    						type: 'bar',
    						showBackground: true,
    						backgroundStyle: { 
    							color: 'rgba(220, 220, 220, 0.8)'
    						}
    					}]
    				}
    			};
    		},
    		components: { 
    			echarts
    		},
    		onLoad() { 
    			this.option = this.option2
    		},
    		methods: { 
    			/** * 点击事件 * @param {Object} params */
    			echartsClick(params) { 
    				console.log('点击数据', params)
    			},
    			/** * 切换数据 */
    			updateClick() { 
    				if (this.option === this.option2) { 
    					this.option = this.option3
    				} else { 
    					this.option = this.option2
    				}
    			}
    		}
    	};
    </script>
    
    <style></style>

##### 3. page.json中添加页面配置 #####

{ 
    	"pages": [
    		{ 
    			"path": "pages/index",
    			"style": { 
    				"navigationBarTitleText": "echarts-renderjs"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	}
    }

[Link 1]: https://gitee.com/agitee/uniapp-echarts/tree/master/
[20200806165701211.png]: /images/20221124/72df49f6f8f247d786c38d073dc58bcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]: /images/20221124/264cb75c36fa43ed8a4f2fcf6f426fd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221124/c1b55ab40ccd49a487d9d345919969e2.png