uni-app项目中使用uCharts2.0

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

1.相关网址
ucharts官方网站
码云平台开方地址gitee
DCloud插件市场
uCharts v2.0版本官方文档及在线工具地址
v1.0文档

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

也可通过组件上:opts传递不同属性即可覆盖默认配置，参考：https://blog.csdn.net/qq_42957741/article/details/116717465
如果有些配置在这里找不到，可以去gitee的源码里看

注意：config-ucharts.js部分无法修改

3.ucharts2.0实例
效果：

3.1下载插件
去DCloud插件市场下载插件，放在默认路径即可。

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
			},
		}
	},