ucharts的使用

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

2.与echarts不同，ucharts的配置非常的人性化，在线配置网址：https://www.ucharts.cn/
进入首页后，点击‘在线工具’，然后点击‘在线生成工具’，如图:

左边是常用配置，右边是效果
chartData是存放数据的地方，
右下方的‘配置代码config-ucharts.js’，是你的配置转换成代码的结果，如图：

3.配置完成后，打开目录的‘config-ucharts.js’文件，复制上面‘配置代码config-ucharts.js’的代码粘贴进js文件中，如图：


可以自定义名称，如代码中的‘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群，提问几乎都是秒回的。