Uni-app_uChart 初步上手及多个利用

uCharts 快速上手 http://doc.ucharts.cn/1074673

（1） 下载组件，在页面中进行引入。

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

（2） Html     Id 注意冲突问题

<view class="qiun-charts">
            <!--#ifdef MP-ALIPAY -->
            <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
            <!--#endif-->
</view>

（3） css 这里的宽度代表图标区域的大小

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

(4)  实例化uCharts （根据官方进行操作） 单个

 

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;    // 引入变量 _self  <==>  this
	var canvaColumn=null;   // canvaColumn 千万不要与html_id混淆，创建实例的变量
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:''
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();     // 页面加载，调用获取数据方法
		},
		methods: {
			getServerData(){
				// 这里就是调取接口，对数据进行处理
                                let LineA={categories:[],series:[]};   //创建数组
				LineA.categories= ["2012", "2013", "2014", "2015", "2016", "2017"]  
				LineA.series=[
					{
						"name":"成交量A",
						"data":[35,8,25,37,4,20],
					},
					{
						"name": "成交量B",
						"data": [70, 40, 65, 100, 44, 68],
					},
					{
						"name": "成交量C",
						"data": [100, 80, 95, 150, 112, 132],
					}
				];
				_self.showColumn("canvasColumn",LineA);  // 调用实例化uChart方法，进行传值
                                  // html_id , chartData

			},
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,    // html_id
					type: 'line ',    
					legend:true,
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
						  width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					  }
				});
			},
			changeData(){
				canvaColumn.updateData({
					series: _self.serverData.ColumnB.series,
					categories: _self.serverData.ColumnB.categories
				});
			}
		}
	}
</script>

多个利用 ，在这里就是一线多图形式（效果图）

首先需要准备数据  this.chartData  格式如下，通过各种方法进行数据的取值，自己定义假数据也可以

HTML
    <view class="qiun-charts" >
                <-  进行对数据的循环展示  ->
                <view class="chartsCont" v-for="i in chartDatas">
                    <view style="flex: 2;line-height: 150upx;"> {{i.name}}</view>
                    <canvas :canvas-id="i.name" :id="i.name" class="charts" style="flex: 5;line-height: 150upx;"></canvas>
                </view>
    </view>



Script
//    这里是写在getServerData()方法内，调取接口异步等问题自行解决。解决办法请私聊
            for(var i=0 ; i<this.chartDatas.length;i++){
					
		let LineA={categories:[],series:[]};   
		LineA.categories= ["2012", "2013", "2014", "2015", "2016", ""2017","2017","2017","2017","2017"]
		LineA.series=[this.chartDatas[i]];       // []
		_self.showColumn(this.chartDatas[i].name,LineA);   //调用实例化uCharts方法 
           }

JS 实现对数据的遍历，创建变量，在这里注意ID的取值，HTML绑定数据  :canvas-id="i.name " === this.chartData[i].name ,

这样子便可以实例化成功！