uniapp使用echart实现数据可视化
- H5端流行的echart报表因为涉及大量dom操作，无法跨端使用，而wx-chart在跨端和更新方面都不足，如果要做小程序，
小编推荐使用全端可用的uCharts - 如只考虑H5端，也可以继续使用echart、f2等常规web图表。
- 如不考虑小程序，那么App端和H5，还可以通过renderjs技术来使用echart、f2等web图表，功能性能比uchart更好。什么是renderjs、基于renderjs使用echart的示例
效果图
下面是使用uCharts 实现uniapp小程序的demo教程
首先去gitee下载文件
使用里面的u-charts.js文件 另一个也行
保存到你项目的目录下，我这里保存在until下
全部代码：
<template>
<view>
<view class="qiun-columns">
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"><view class="qiun-title-dot-light">柱状图</view></view>
<view class="qiun-charts">
<!--#ifdef MP-ALIPAY -->
<canvas
canvas-id="canvasColumn"
id="canvasColumn"
class="charts"
:style="{
width: cWidth * pixelRatio + 'px',
height: cHeight * pixelRatio + 'px',
transform: 'scale(' + 1 / pixelRatio + ')',
'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px'
}"
></canvas>
<!--#endif-->
<!--#ifndef MP-ALIPAY -->
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
<!--#endif-->
</view>
</view>
</view>
</template>
<script>
import uCharts from '../../util/u-charts.js';
var _self;
var canvaColumn = null;
export default {
data() {
return {
cWidth: '',
cHeight: '',
pixelRatio: 1,
serverData: '',
current: 0,
};
},
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();
},
mounted() {
},
// mounted() {
// this.$nextTick(function() {
// });
// },
methods: {
getServerData(){
uni.request({
url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
data:{
},
success: function(res) {
console.log(res.data.data)
//下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
_self.serverData=res.data.data;
let Column={
categories:[],series:[]};
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
// Column.categories=res.data.data.Column.categories;
Column.categories=[1,24,455,555,555];
//这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据
// Column.series=res.data.data.Column.series;
Column.series=[{
"name":"新成交量3","data":[35,36,31,33,13,34]},{
"name":"新成交量4","data":[18,27,21,24,6,28]}];
_self.showColumn("canvasColumn",Column);
},
fail: () => {
console.log("网络错误，小程序端请检查合法域名");
},
});
},
showColumn(canvasId,chartData){
canvaColumn=new uCharts({
$this:_self,
canvasId: canvasId,
type: 'column',
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>
<style>
page{
background:#F2F2F2;width: 750upx;overflow-x: hidden;}
.qiun-padding{
padding:2%; width:96%;}
.qiun-wrap{
display:flex; flex-wrap:wrap;}
.qiun-rows{
display:flex; flex-direction:row !important;}
.qiun-columns{
display:flex; flex-direction:column !important;}
.qiun-common-mt{
margin-top:10upx;}
.qiun-bg-white{
background:#FFFFFF;}
.qiun-title-bar{
width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{
border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
/* 通用样式 */
.qiun-charts{
width: 750upx; height:500upx;background-color: #FFFFFF;}
.charts{
width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>
更多配置请移步官网教程文档 http://doc.ucharts.cn
如果觉得有节约时间，卑微的小编，希望你能一箭三连。Thanks♪(･ω･)ﾉ