u-chart图表使用记录（折线图）

uni-app小程序项目

要有一个折线图数据展示，查找了很多博客，一直没法显示在小程序模拟器上，终于好了！！！记录一下

实现的效果（数据都还为0），尽力了TAT

官网http://www.mianshigee.com/tutorial/ucharts/ed9cb2b78f4d6c47.md

首先创建一个hello uni-app项目

从这个项目中可以跑起来看看图表可不可以在电脑上正常显示

按照它的路径把这个组件拷贝到自己的项目中，导入。

import uCharts from '@/components/u-charts/u-charts.js';

view层

<view class="qiun-charts">
    <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
</view>

CSS样式

.qiun-charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
}
.charts {
	width: 750upx;
	height: 500upx;
	background-color: #FFFFFF;
}

script

<script>
	//引入接口方法
    import {
		myBusinessCard,
		scholar,
		statistics
	} from '../../models/user.js';
	import app from '@/App.vue';
	import uCharts from '@/components/u-charts/u-charts.js';    
    var _self;
	var canvaLineA = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
        methods: {
			getServerData() {
                let type = (this.show == true ? 1 : 2);
				let day = 7;
				let name = "";
				console.log(type);
				statistics(type, day).then(res => {
					if (res.Success) {
						if (res.Data != null) {
							this.serverData = data;
							console.log(res.Data);
							var shuju = res.Data;
							var d = shuju.map(a => a.Date).reverse();
							var data = shuju.map(a => a.Total).reverse(); //人数数组
							var dd = d.map(a => a.substring(a.lastIndexOf("-") + 1, a.length)); //获取日期
							var categories = dd.map(a => a.substring(a.indexOf("0") == 0 ? 1 : 0, a.length)); //去掉04日期的0，最终日期数组 
							if (type == 1) {
								this.name = "访问人数"
							} else {
								this.name = "收藏人数"
							}
							let LineA = {
								categories: [],
								series: [{
									data: [],
									name: this.name,
								}]
							}
							for (let i = 0; i < categories.length; i++) {
								let day = new Date().getDate();
								if (categories[i] == day) {
									LineA.categories.push('今日');
								} else {
									LineA.categories.push(categories[i]);
								}
								LineA.series[0].data.push(data[i]);
							}
							console.log(LineA);
							this.serverData = LineA;
							_self.showLineA("canvasLineA", LineA);
						}
						if (res.Data == null) {}
					} else {
						console.log("数据获取失败");
					}
				});
                //写的假数据，测试一下能否显示
				/* let LineA = {
					categories: ["5", "6", "7", "8", "9", "10", "11"],
					series: [{
						data: ["77", "88", "10", "0", "16", "8", "66"],
						name: "数据"
					}]
				}
				this.serverData = LineA;
				_self.showLineA("canvasLineA", LineA); */
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						disableGrid:true,    //不显示横坐标网格
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 80,
						disabled:true, //纵坐标不显示
						disableGrid:true,    //不显示纵坐标网格
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
            //点击显示数据
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return item.data + '人'
					}
				});
			}
		}

	}

踩坑：

后台接口获取到的数据格式要转换成所需要的格式（可以去官网看一下）

LineA.series中的name需要定义