uni-app 使用uCharts-进行图表展示（折线图带单位）

前言

• 在uni-app经常是需要进行数据展示，针对这个情况也是有人开发好了第三方包，来兼容不同平台展示

• uCharts和pc端的Echarts使用差不多，甚至会感觉在uni-app使用uCharts更轻便，更舒服

• 但是这个第三方包有优点就会有缺点，还会有坑的地方下面我会一一讲解

uCharts使用-注意事项-和避坑

• 首先我们在hb插件市场下载这个包时可能需要看一段广告......

• 官方文档确实写的很清楚也很多，稍微适应一下就行了。但在线调试和定制需求是需要收费的

• 这个组件在uni-app使用时，会受到定位，子绝父相，固定定位，隐藏等css属性影响，会导致显示正常，但是点击数据是没反应的，并且数据弹出框也是显示不出来的

• 关于这个网上是说加一个canasid等，但并没有大作用，改源码的话不建议删代码，建议往上加

• 在页面使用时，建议把每一个图标封装成全局组件（组件长宽100），在页面直接使用。

• 每个图标padding属性很重要它可以是负值，从上 右 下 左 来帮助我们在父组件矫正布局

• uCharts在示例里面各种图形数据格式-包括标题等，都不能修改它，只能像他看齐

• x，y 轴单位x轴直接生效，y轴是需要开启才会生效，注意看文档

uCharts包地址

插件市场地址：秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

包文档地址：uCharts官网 - 秋云uCharts跨平台图表库

代码实现

1.来到插件市场-下载插件导入HBuilderX

2.来到全局组件components文件-右键新建组件-创建同名目录（很重要）创建scss命名failure-rate

代码如下-查看官方文档-注意宽高-100-使用父组件宽高

 
<script>
	export default {
		name: "failure-rate",
		// 接受父组件传递数据
		props: ['data'],
		watch: {
			data: {
				deep: true,
				handler(newVal) {
					console.log('执行了', newVal);
					// 监听data的变化，数据变化时候更新图标
					// x轴数据
					this.categories = newVal.xdata
					// 数据
					this.calleqdata.series[0].name = newVal.series[0].name
					this.calleqdata.series[0].data = newVal.series[0].data
					this.calleqdata.series[1].name = newVal.series[1].name
					this.calleqdata.series[1].data = newVal.series[1].data
				}
			}
		},
		data() {
			return {
				// 报警故障配置
				calleqopts: {
					// 数据颜色
					color: ["#1890FF", "#ffc370", ],
					// 内边距-矫正父组件布局
					padding: [-5, 0, 0, -5],
					// 是否显示折线图每个节点数据
					dataLabel: false,
					// 是否在每个节点-显示节点
					dataPointShape: false,
					// 是否开启滚动条-配合x轴itemCount出现x轴滚动条
					enableScroll: false,
					// 图例配置
					legend: {
						// 把图例放在图表上方
						position: "top",
					},
					// x轴配置
					xAxis: {
						// 单位
						title: '日期',
						// 单位横移偏移量
						titleOffsetX: '-20',
						// 不绘制纵向网格
						disableGrid: true
					},
					// y轴配置
					yAxis: {
						// 虚线-实线
						gridType: "dash",
						// 虚线单位
						dashLength: 2,
						// 开启y轴单位
						showTitle: true,
						// y轴配置
						data: [{
							// 不写最大最小值-自增长
							// min: 0,
							// max: 150,
							// y轴单位
							title: '数量',
						}]
					},
					extra: {
						line: {
							// 曲线圆滑模式
							type: "curve",
							// 折线的宽度
							width: 2,
							// 点击弹出框时，节点样式
							activeType: "hollow",
							// 自定义渐变色
							linearType: "custom",
							// 开启阴影
							onShadow: true,
							// 水平动画
							animation: "horizontal"
						}
					}
				},
				// 报警故障数据
				calleqdata: {
					// x轴数据
					categories: [],
					// 表格数据 - 一个对象就是一个数据
					series: [{
							// 数据名
							name: "",
							// 数据渐变
							linearColor: [
								[
									0,
									"#1890FF"
								],
								[
									0.25,
									"#00B5FF"
								],
								[
									0.5,
									"#00D1ED"
								],
								[
									0.75,
									"#00E6BB"
								],
								[
									1,
									"#90F489"
								]
							],
							// 阴影部分
							setShadow: [
								3,
								8,
								10,
								"#1890FF"
							],
							// 数据量
							data: []
						},
 
						{
							name: "",
							linearColor: [
								[
									0,
									"#FAC858"
								],
								[
									0.33,
									"#FFC371"
								],
								[
									0.66,
									"#FFC2B2"
								],
								[
									1,
									"#FA7D8D"
								]
							],
							setShadow: [
								3,
								8,
								10,
								"#FC8452"
							],
							data: []
						}
					]
				},
			};
		},
	}
script>

3.来到父组件使用-因为我们组件符合小程序规范-不用注册直接使用-代码如下

 
<script>
	export default {
		data() {
			return {
				// 报警率趋势
				calltendency: {},
			};
		},
		onLoad() {
			// 模拟掉接口
			this.getcalltendency()
		},
		onReady() {
			// 模拟掉接口
			// this.getcalltendency()
		},
		methods: {
			getcalltendency() {
				console.log('发送数据');
				setTimeout(() => {
					let a = {
						xdata: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: '电话',
								data: [15, 45, 15, 45, 15, 45]
							},
							{
								name: '短信',
								data: [95, 125, 95, 125, 95, 125]
							}
						]
					}
					// 传递数据
					this.calltendency = a
					console.log('发送完毕');
				}, 2000)
			}
		}
	}
script>
 
<style lang="scss">
	.failceshi {
		i {
			color: skyblue;
			font-weight: 700;
			font-size: 38rpx;
			margin-left: 50rpx;
		}
 
		.failceshi-item {
			width: 100vw;
			height: 400rpx;
		}
	}
style>

4.调用接口传递真实数据-在子组件侦听传递过来的数据进行操作

---

总结：

经过这一趟流程下来相信你也对 uni-app 使用uCharts-进行图表展示（折线图带单位） 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕