uniapp+ucharts画的几个图及v-for一个列表

<template>
	<view style="background-color: #F3F0F0;">
		<view class="container">
			<view v-for="(item,index) in lists" :key="index" class="items">
				<view class="item-top">
					{{item.type}}
				</view>
				<view class="item-content">
					<view class="text">
						<view class="text_one">
							<view class="value">
								{{item.value}}
							</view>
							<view class="unit">
								{{item.unit}}
							</view>
						</view>
						<view class="text_two">收入金额</view>
						<view class="text_three">
							<image src="../../static/previous_year.png" mode="" class="previous_logo"></image>
							<view>
								{{item.previous_year_value}}
							</view>
							<view>
								{{item.previous_year_unit}}
							</view>
							<!-- v-if判断与上一年同期增长率 -->
							<view v-if="item.value-item.previous_year_value<0" class="comparison down">
								<image src="../../static/down.png" mode=""></image>
								<view>{{(((item.value - item.previous_year_value)/item.previous_year_value)* 100).toFixed(2) + '%'}}</view>
							</view>
							<view v-else class="comparison up">
								<image src="../../static/up.png" mode=""></image>
								<view>{{(((item.value - item.previous_year_value)/item.previous_year_value)* 100).toFixed(2) + '%'}}</view>
							</view>
						</view>
					</view>
					<image src="../../static/notecase.png" class="notecase"></image>
				</view>
			</view>
		</view>
		<view class="canvas_wrapper">
			<view class="title">
				{{"每月收入"}}
			</view>
			<canvas canvas-id="canvas1" id="canvas1" class="charts" @touchstart="touchLineA"></canvas>
		</view>
		<view class="canvas_wrapper">
			<view class="title">
				{{"目的地城市收入"}}
			</view>
			<canvas canvas-id="canvas2" id="canvas2" class="charts" disable-scroll=true @touchstart="touchColumnA" @touchmove="moveColumnA" @touchend="touchEndColumnA"></canvas>
		</view>
		<view class="canvas_wrapper">
			<view class="title">
				{{"客源省份消费TOP10"}}
			</view>
			<canvas canvas-id="canvas3" id="canvas3" class="charts" @touchstart="touchColumnB"></canvas>
		</view>
		<view class="canvas_wrapper">
			<view class="title">
				{{"行业消费占比"}}
			</view>
			<view style="display: flex; position: relative;">
				<canvas canvas-id="canvas4" id="canvas4" class="charts" @touchstart="touchRingA"></canvas>
				<canvas canvas-id="canvas5" id="canvas5" class="charts" @touchstart="touchRingB"></canvas>
				<view class="ring_tag">
					<view class="ring_tag_row">
						<view class="rows row_1"></view><view class="tag_text">住</view>
						<view class="rows row_2"></view><view class="tag_text">其他</view>
						<view class="rows row_3"></view><view class="tag_text">吃</view>
						<view class="rows row_4"></view><view class="tag_text">娱</view>
					</view>
					<view class="ring_tag_row">
						<view class="rows row_5"></view><view class="tag_text">游</view>
						<view class="rows row_6"></view><view class="tag_text">综合</view>
						<view class="rows row_7"></view><view class="tag_text">行</view>
						<view class="rows row_8"></view><view class="tag_text">购</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from "../../common/u-charts/u-charts.js";
	import _source from "../../mock/source.js"
	var _self;
	var lineA = null;
	var columnA = null;
	var columnB = null;
	var ringA = null;
	var ringB = null;
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				chalfwidth: '',
				lists: [],
				canvasData1: {},
				canvasData2: {},
				canvasData3: {},
				canvasData4: {},
				canvasData5: {}
			};
		},
		onLoad() {
			// uni.request({
			// 	url: "",
			// 	success: res => {
			// 		console.log(res)
			// 	}
			// })
			//请求获得的list数据赋值给data里面的lists
			this.lists = _source.source.list
			//请求获得的canvas画布的参数
			this.canvasData1 = _source.source.canvas1_line
			this.canvasData2 = _source.source.canvas2_column
			this.canvasData3 = _source.source.canvas3_column
			this.canvasData4 = _source.source.canvas4_ring
			this.canvasData5 = _source.source.canvas5_ring
			
			_self = this;
			this.cWidth=uni.upx2px(650);
			this.cHeight=uni.upx2px(430);
			// this.chalfWidth=uni.upx2px(650/2);
			// this.chalfHeight=uni.upx2px(400/2);
			_self.showLine("canvas1", this.canvasData1);
			_self.showColumnA("canvas2", this.canvasData2);
			_self.showColumnB("canvas3", this.canvasData3);
			_self.showRingA("canvas4", this.canvasData4);
			_self.showRingB("canvas5", this.canvasData5);
		},
		methods: {
			//执行showCanva画图
			//画布1
			showLine(id, canvasData1) {//画布id以及画画的数据
				lineA = new uCharts({
					$this: _self,	//new的实例内使用图表，必须传入this实例
					canvasId: id,	//先拿静态的template里的一个canvas标签id试试，实际上用参数
					type: "line",	//图表类型（pie、line、column、area、ring、radar、arcbar、gauge、candle、bar、mix、rose、word）
					legend: canvasData1.legend,	//图例设置
					fontSize: canvasData1.fontSize,	//字体大小，默认13px
					// pixelRatio: 1,	//像素比，默认为1
					width: _self.cWidth,
					height: _self.cHeight,	//宽高，要与样式中的width和height相等，否则会造成大小与预期不符合
					animation: true,	//是否动画展示
					categories: canvasData1.categories,	//数据类别（饼图、圆环图不需要）
					series: canvasData1.series,	//数据列表
					dataLabel: false,//是否显示数据内容
					dataPointShape: false,	//是否显示数据点的标记
					enableScroll: false,	//图片可拖拽滚动
					xAxis: {
						disableGrid: true,	//是否绘制绘制x轴网格
						axisLine: false,	//是否显示坐标轴线
					},
					yAxis: {
						disableGrid: true,
						showTitle: true,
						data: [
							{
								axisLine: false,	//这个写法和文档有些不同，y轴去轴不去数
								title: canvasData1.yAxis.title
							}
						]
					},
					extra: {
						line: {
							type: "curve"
						}
					}
				})
			},
			//showshowToolTip方法（点击提示数值）
			touchLineA(e) {
				lineA.showToolTip(e, {
					format: function (i, category) {
						return i.name + "-" +category  + ':  ' + i.data 
					}
				});
			},
			//画布2
			showColumnA(id, canvasData2) {//画布id以及画画的数据
				columnA = new uCharts({
					$this: _self,
					canvasId: id,
					type: "column",
					legend: {
						show: false
					},
					enableScroll: true,
					fontSize: canvasData2.fontSize,
					width: _self.cWidth,
					height: _self.cHeight,
					animation: true,
					categories: canvasData2.categories,
					series: canvasData2.series,
					dataLabel: false,
					xAxis: {
						disableGrid: true,	//是否绘制绘制x轴网格
						axisLine: false,	//是否显示坐标轴线
						scrollShow: true,
						scrollAlign: canvasData2.xAxis.scrollAlign,
						itemCount: canvasData2.xAxis.itemCount
					},
					yAxis: {
						disableGrid: true,
						splitNumber: canvasData2.yAxis.splitNumber,
						showTitle: true,
						data: [
							{
								title: canvasData2.yAxis.title,
								min: canvasData2.yAxis.min,
								max: canvasData2.yAxis.max,
								axisLine: false,	//这个写法和文档有些不同，y轴去轴不去数
							}
						]
					},
					extra: {
						column: {
							width: 10
						}
					}
				})
			},
			//scrollStart...方法（滚动条）
			touchColumnA(e){
				columnA.scrollStart(e);
				columnA.showToolTip(e, {
					format: function (i, category) {
						return category  + ':  ' + i.data 
					}
				});
			},
			moveColumnA(e) {
				columnA.scroll(e);
			},
			touchEndColumnA(e) {
				columnA.scrollEnd(e);
			},
			//画布3
			showColumnB(id, canvasData3) {//画布id以及画画的数据
				columnB = new uCharts({
					$this: _self,
					canvasId: id,
					type: "column",
					legend: {
						show: false
					},
					enableScroll: false,
					fontSize: canvasData3.fontSize,
					width: _self.cWidth,
					height: _self.cHeight,
					animation: true,
					categories: canvasData3.categories,
					series: canvasData3.series,
					dataLabel: false,
					rotate:true,
					xAxis: {
						disableGrid: true,	//是否绘制绘制x轴网格
						axisLine: false,	//是否显示坐标轴线
						rotateLabel: true,	//x轴字体rota
						
					},
					yAxis: {
						disableGrid: true,
						data: [
							{
								disabled: true,	//去轴去数
								// axisLine: false,	//这个写法和文档有些不同，y轴去轴不去数	
							}
						]
					},
					extra: {
						column: {
							type: "group",
							width: 10
						}
					}
				})
			},
			touchColumnB(e) {
				columnB.showToolTip(e, {
					format: function (i, category) {
						return category  + ':  ' + (i.data.value?i.data.value:i.data) + '%'
					}
				});
			},
			//画布4
			showRingA(id, canvasData4) {//画布id以及画画的数据
				ringA = new uCharts({
					$this: _self,
					canvasId: id,
					type: "ring",
					legend: {
						show: false,
						// itemGap: 50,	//横向，控制图例“分几行”
						// padding: 1,
						// lineHeight: 30	//设置“行间距”
					},	//图例设置
					// fontSize: 7,	//字体大小，默认13px
					width: 170,
					height: 150,
					// width: _self.chalfWidth,
					// height: _self.chalfHeight,	//宽高，要与样式中的width和height相等，否则会造成大小与预期不符合
					animation: true,	//是否动画展示
					title: canvasData4.title,
					dataLabel: false,
					series: canvasData4.series,	//数据列表
					extra: {
						pie: {
						  offsetAngle: -45,
						  ringWidth: 10,
						  labelWidth:5
						}
					}
				})
			},
			showRingB(id, canvasData5) {//画布id以及画画的数据
				ringB = new uCharts({
					$this: _self,
					canvasId: id,
					type: "ring",
					legend: {
						show: false,
						// itemGap: 50,	//横向，控制图例“分几行”
						// padding: 1,
						// lineHeight: 30	//设置“行间距”
					},	//图例设置
					// fontSize: 7,	//字体大小，默认13px
					width: 170,
					height: 150,	//宽高，要与样式中的width和height相等，否则会造成大小与预期不符合
					// width: _self.chalfWidth,
					// height: _self.chalfHeight,	
					animation: true,	//是否动画展示
					title: canvasData5.title,
					dataLabel: false,
					series: canvasData5.series,	//数据列表
					extra: {
						pie: {
						  offsetAngle: -45,
						  ringWidth: 10,
						  labelWidth:5
						}
					}
				})
			},
			touchRingA(e){
				ringA.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data  + '%'
					}
				});
			},
			touchRingB(e){
				ringB.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data  + '%'
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
@import "./income.scss";
.charts{
	width: 650upx;
	height:430upx;
	position: relative;
	bottom: 0;
}
</style>

问题：主要是环形图的问题，环形图其实是两个canvas，（我觉得应该有其他的插件可以在一个canvas上画若干个图，uchart文档上有个混合图，混合的是柱形、折线等，没瞄到扇形的混合，就没细看）。

问题之一就是适配的问题，因为uchart需要注意canvas的宽高，一个canvas还好，通过这个插件自带的upx单位可以自适应，但因为这是两个canvas（圆环形）（flex布局排的），所以当手机特别小的时候，会出现不对称的情况（我已经尽可能的让他符合大部分屏幕了）（以前看视频，看到过media这个东西可以自适应屏幕，不知道管不管用，有机会专门去学一下）

第二个问题，还是环形图，因为他的标签只能展示在当前canvas上，所以我把这两个环形图的标签隐藏掉了，然后用绝对布局+view标签写的下方的标签，这样的问题就是，不能在json里面动颜色、数量了，否则会对应不上。

需求：
横向的柱状图，x轴的字不能横向（只能超范围让他倾斜（rotate）），y轴的数值也没法随着横向转过来。

环形图：里面的内容展示图片（title，subtitle（这两个是uchart的api，设置里面内容的））

折线图： 单条线加粗

等未来，当我厉害了，看看能不能改下源码实现需求