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/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>