/* 数据格式以及调用案例
http://doc.ucharts.cn/1172183
： */

template

<view class="qiun-charts">
        <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
</view>
import => u-chart.js

data:
cWidth:'',
cHeight:'',
pixelRatio:1,


methods:
getServerData(){
									
					let LineA={
						categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
						series: [{
							name: '成交量A',
							data: [35, 20, 25, 37, 4, 20],
							color: '#000000'
						}, {
							name: '成交量B',
							data: [70, 40, 65, 100, 44, 68]
						}, {
							name: '成交量C',
							data: [100, 80, 95, 150, 112, 132]
						}]
					};
					//LineA.categories=res.data.data.LineA.categories;
					// LineA.series=res.data.data.LineA.series;
					
					this.showLineA("canvasLineA",LineA);
					
				
			},
			showLineA(canvasId,chartData){
				var _self = this;
				var canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show: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
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)+'元'}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				console.log(canvaLineA.categories);
			}



onLoad() {
			this.cWidth=uni.upx2px(1500);
			this.cHeight=uni.upx2px(500);
			this.getServerData();			
		}




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