uniapp使用ucharts最新版本2.0

ucharts支持跨端渲染，解决了uniapp图表得痛点，
ucharts1版本复杂不友好，直接用ucharts2版本。

1. 用HBuilderX直接导入插件
   
   项目目录
   

2. 拷贝代码直接飞起来
   （自定义颜色等其他样式得代码）需要自定义图表得点击这里（在线生成）添加链接描述

<template>
	<view class="lookprice">
			<qiun-title-bar title="基本折线区域图"/>
			<view class="charts-box">
			   <qiun-data-charts type="tarea" :opts="areapotion"   :chartData="chartsDataArea1"/>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  chartsDataArea1:{},
			  areapotion:{},
			
			  
			}
		},
		
		onReady() {
		  //模拟从服务器获取数据
		  this.getServerData()
		},
		
		methods: {
		   getServerData() {
		   	setTimeout(()=>{
					this.chartsDataArea1 ={
					  categories:['2016','2017','2018','2019','2020','2021'],
					  series:[{name:"成交量",data:[35,32,36,34,38,30]}]
					}
					console.log(this.chartsDataArea1)
		   	},800)
			
			this.areapotion = {
				fontColor:"#ffffff",
				background:"#54a0ff",
				fontSize:11,
				grid: {
				  left: '1%',
				  right: '1%',
				  bottom: 30,
				  top:10,
				  containLabel: true
				},
				xAxis: {
				  type: 'value',
				  boundaryGap: [0, 0.01],
				  gridColor:"#ffffff",             //纵向网格颜色 
				  axisLineColor:"#ffffff",         //x轴颜色
				  calibration: true,               // 开启刻度
				  boundaryGap: "center",           // 剧中，俩边留空 
				  disableGrid: true,
				  axisLine: {
				    show: false
				  },
				  axisTick: {
				    show: false
				  }
				},
				yAxis: {
				  type: 'value',
				  dashLength: 8,
				  gridColor:"#ffffff",
				  axisLineColor:"#ffffff",
				  data: [
					{"min": 0,"max": 80}
				  ]
				},
				legend:{ show: false},
			}
			
			
			
		   }
			   
		}
	}
</script>

<style lang="scss">
	.lookprice{
		width: 100%;
		background: #3F536E;
		display: flex;
		flex-direction: column;
		flex: 1;
		.charts-box {
		  width: 100%;
		  height: 400rpx;
		}
		
		
	}

</style>

3. 更改过配置颜色后的折线图
   

（2）官方默认得更简单

<template>
	<view>
		<qiun-title-bar title="基本折线区域图"/>
		<view class="charts-box">
		  <qiun-data-charts type="area" :chartData="chartsDataArea1"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartsDataArea1:{}
			}
		},
		
		onReady() {
		  //模拟从服务器获取数据
		  this.getServerData()
		},
		
		methods: {
			
			getServerData() {
				setTimeout(()=>{
					this.chartsDataArea1 ={
					  categories:['2016','2017','2018','2019','2020','2021'],
					  series:[{name:"成交量",data:[35,32,36,34,38,30]}]
					}
				},800)
			}
			
			
		}
	}
</script>

<style>
.charts-box {
		width: 750rpx;
		height: 500rpx;
	}
</style>

默认显示得