ucharts的使用

最近发现小程序使用echarts出现了内存泄漏的问题,使用官方的clear()和dispose()方法,仍然没有得到解决,不得已换成ucharts,网上找了下,发现大多数都是1.0的教程,但是官方推荐使用2.0。看了半
天,总结了大致的使用方法。
1.首先,hbuilderx的版本要是3.1以上,从uniapp的插件市场导入ucharts,地址:https://ext.dcloud.net.cn/plugin?id=271
导入后的目录:
ucharts的使用_第1张图片

2.与echarts不同,ucharts的配置非常的人性化,在线配置网址:https://www.ucharts.cn/
进入首页后,点击‘在线工具’,然后点击‘在线生成工具’,如图:
ucharts的使用_第2张图片
左边是常用配置,右边是效果
chartData是存放数据的地方,
右下方的‘配置代码config-ucharts.js’,是你的配置转换成代码的结果,如图:
ucharts的使用_第3张图片
3.配置完成后,打开目录的‘config-ucharts.js’文件,复制上面‘配置代码config-ucharts.js’的代码粘贴进js文件中,如图:
ucharts的使用_第4张图片
ucharts的使用_第5张图片
可以自定义名称,如代码中的‘demotype’,自定义名称记得上面的type数组和categories数组两个地方也要添加,这样就配置好了一种图形。
4.封装自己的组件,以折线图为例,配置了demotype,在组件的type赋值demotype,就会使用到你刚才的配置。就是说,你想要使用不同图形的不同的配置,只需要王往config-ucharts.js文件中添加,然后自定义名称,使用的时候,type为你自定义的名称即可。如果想要动态替换js文件里的配置,就要使用:opts,比如下面的组件我想替换最小值:

<template>
	<view class="charts-box">
		<u-charts type="demotype" :opts="config" :chartData="chartData" :errorShow="false" background="none" :animation="false"
			:tooltipShow="false" :ontap="false" :onmouse="false" />
		</u-charts>
	</view>
</template>

<script>
	import uCharts from '../echart/u-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			uCharts
		},
		props: {
			valueList: {
				type: Array,
				default: () => [],
			},
			xAxisList: {
				type: Array,
				default: () => [],
			},
			legendList: {
				type: Array,
				default: () => [],
			},
			leftYMax: {
				type: Number,
				default: 5.3
			},
			leftYMin: {
				type: Number,
				default: 3.8
			}
		},
		watch: {
			xAxisList: {
				handler() {
					this.change()
				},
				deep: true
			},
			valueList: {
				handler() {
					this.change()
				},
				deep: true
			},
			legendList: {
				handler() {
					this.change()
				},
				deep: true
			}
		},
		created() {
			this.change()
		},
		data() {
			return {
				chartData: {
					"categories": [
						"2016\n上学期",
						"2017\n上学期",
						"2018\n上学期",
						"2019\n上学期",
						"2020\n上学期",
						"2021\n上学期"
					],
					"series": [{
							"name": "成绩",
							"data": [
								40,
								30,
								55,
								110,
								24,
								58
							],
							"textColor": "#3BC2E4"
						},
						{
							"name": "分数",
							"data": [
								120,
								140,
								105,
								170,
								95,
								160
							],
							"textColor": "#FFA72C"
						}
					]
				},
				config: {}
			}
		},
		methods: {
			change() {
				if (this.valueList.length == 0 || this.legendList.length == 0 || this.xAxisList.length == 0) return
				let leftValue = []
				let rightValue = []
				this.valueList.forEach(e => {
					e.descCountVos.forEach(t => {
						if (t.desc === "左眼") {
							leftValue.push(t.value)
						} else if (t.desc === "右眼") {
							rightValue.push(t.value)
						}
					})
				})
				console.log( this.xAxisList)
				console.log(leftValue)
				console.log(rightValue)
				let min = Math.min(...leftValue, ...rightValue)
				if (min < 3.8) {
					this.config = {
						yAxis:{
							 data:[{min: min}]
						}
					}
				}
				this.chartData.categories = this.xAxisList
				this.chartData.series[0].data = leftValue
				this.chartData.series[1].data = rightValue
			}
		}
	}
</script>

<style scoped>
	.charts-box {
		width: 750rpx;
		height: 300px;
		position: relative;
	}
</style>

5.基本使用就是这样,ucharts也有不少不方便的地方。比如:横坐标的文字不支持换行,y轴的title没法改变位置,折线图的标记点没法自定义大小等。有问题可以加入官方的qq群,提问几乎都是秒回的。

你可能感兴趣的:(ucharts的使用)