uniapp数据可视化页面，引入uCharts开发（这里介绍一下图例的自定义开发，当数据上百条的情况处理）

uCharts官网地址：点击进入

一般比较方便的方式是直接使用插件市场的快捷方式按具体项目进行导入，就可以在项目里面直接使用了，使用方式也肯简单，和普通的vue项目使用插件差不多，参考官网的“演示”目录代码，参数不懂的可以查看“文档”目录。

但是通过看文档和实际使用，uCharts确实也还有很多不完善的地方。

比如说图下面的显示图例，只能平铺，遇到几十上百的数据时，真的太糟糕了

下面图例部分时自定义重写内容，主要问题就是要写与折线图的交互事件，交互里面主要问题是要对应各个对象所表示的颜色对应，因为每次显示/隐藏的时候，opts里面的color的排序都不一样。
下面代码示例及解释：

progress().then((res) => {
					const data = res.data
					this.operateBarData = data
					//定义一组默认色值，并插入图表数组对象
					let colorArr = ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"]
					this.operateBarData?.progressList.map((item,index)=>{
						if (index<5) {//默认只展示五条数据，因为上百条的情况展示不友好
							item.highLight = true
						} else {
							item.highLight = false
						}
						item.color = colorArr[index%9]
					})
				})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

自定义部分的样式就省略了。。。
自定义图例交互事件：

seeCharts(item){ // 自定义控制图例样式手写交互逻辑
		if (item.highLight&&this.resData.series.length<2) {//只剩一条数据显示折现的时候不能再取消进入隐藏模式
			uni.$u.toast('目前只展示了一条数据了哦！')
			return
		}
		item.highLight = !item.highLight// 控制显示/隐藏的样式
		//下面是根据显/隐改变数组对象的内容
		if (item.highLight) {
			this.resData.series.push({
			  name:item.projectName,
			  deptName:item.deptName,
			  color:item.color,
			  data:item.progressList
			})
		}
		if (!item.highLight) {
			this.resData.series.map((it,index)=>{
				if (item.projectName === it.name&&item.deptName === it.deptName) {
					this.resData.series.splice(index,1)
				}
			})
		}
		//根据重组的数据，更新opts.color的色值排序和值
		let colorArr = []
		  this.resData.series.map((item,index)=>{
			colorArr.push(item.color)
		  })
		this.opts.color = colorArr
		this.chartData = JSON.parse(JSON.stringify(this.resData));//更新图标
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30