uni-app项目中使用uCharts2.0

今天必须写一个ucharts2.0的总结！ 当我知道ucharts的时候，它已经更新到2.0了，虽然它的上说2.0版本更好用，但是对于一个从来没有接触过ucharts的人来说，实在是摸不着头绪。内心OS：这是什么垃圾，官方文档的写的也太简单了，我连怎么引入都找不到。看懂之后：我是什么垃圾！下面就介绍一下ucharts2.0的用法，大型真香现场。

1.相关网址

2.ucharts2.0在线工具介绍 v1.0请参考：https://blog..net/m0_49529959/article/details/107770498 这次只介绍ucharts2.0的在线工具，我的开发工具是HBuilderX，创建的uni-app项目，注意使用场景。

3.ucharts2.0实例 效果： 3.1下载插件 去下载插件，放在默认路径即可。 3.2代码 .vue文件：

<template  >
	<view class="container" style="background-image: url();">
		<!-- 线图 -->
		<view class="charts-box" >
		  <qiun-data-charts
			type="line"
			:chartData="chartsDataArea1"
			background="none"
			:animation="true"
		  />
		</view>
		
		<!-- 带面积的线图 -->
		<view class="charts-box">
		  <qiun-data-charts
			type="area"
			:chartData="chartsDataArea2"
			background="none"
			:animation="true"
		  />
		</view>
	</view>
</template>

<script>

	export default {
          
   
		data() {
          
   
			return {
          
   
				chartsDataArea1:{
          
   },
				chartsDataArea2:{
          
   },
			}
		},
		onReady() {
          
   
			//模拟从服务器获取数据
			this.getServerData()
		},
		methods: {
          
   
			getServerData() {
          
   
				setTimeout(()=>{
          
   
					this.chartsDataArea1 = {
          
   
						categories:[2016,2017,2018,2019,2020,2021],
						series: [
						  {
          
   
							  "name": "地质风险",
							  "color": "#0dc59f",
							  "legendShape": "rect",
							  "data": [35,4,24,10,25,16]
						  }
						]
					},
					this.chartsDataArea2 = {
          
   
					  categories:[2016,2017,2018,2019,2020,2021],
					  series: [
						  {
          
   
							  "name": "地质风险",
							  "color": "#0dc59f",
							  "legendShape": "rect",
							  "data": [35,4,24,10,25,16]
						  }
					  ]
					}
				},800)
			}	   
		}
	}
</script>

<style>
	.container{
          
   
		width: 100%;
		height: 1400rpx;
	}
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box{
          
   
	  width: 100%;
	  height:300px;
	}
</style>

其中，背景图片生成base64格式

config-ucharts.js文件：

"line":{
          
   
		"type": "line",
		"color": color,
		"padding": [15,10,0,15],
		"fontColor": "#fff",  
		"dataLabel": false,
		"dataPointShape": false,
		"xAxis": {
          
   
			"disableGrid": true,
		},
		"yAxis": {
          
   
			"gridType": "dash",
			"dashLength": 2,
		},
		"legend": {
          
   
		},
		"extra": {
          
   
			"line": {
          
   
				"type": "straight",
				"width": 2
			},
		}
	},
	"area":{
          
   
		"type": "area",
		"color": color,
		"padding": [15,15,0,15],
		"dataLabel": false,
		"dataPointShape": false,
		"fontColor": "#fff",
		"xAxis": {
          
   
			"fontColor": "#fff",
			"disableGrid": true,
		},
		"yAxis": {
          
   
			"gridType": "dash",
			"dashLength": 2,
			"data": [
				{
          
   
					"fontColor": "#fff"
				}
			]
		},
		"legend": {
          
   
			"fontColor": "#fff",
		},
		"extra": {
          
   
			"area": {
          
   
				"type": "straight",
				"opacity": 0.2,
				"addLine": true,
				"width": 2,
				"gradient": false
			},
		}
	},