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 ,
这样子便可以实例化成功!