uniapp在一个页面包含多个uCharts图表

---

前言

uCharts包含了很多非常实用的图表组件，为开发图表页面的前端省事了不少。uniapp在单页面添加单图表的源码，官方文档都已经非常完备了，就不在这里过多赘述。本文集中解决一个页面包含多个uCharts图表组件的问题。

---

一、案例描述

示例：有app页面，需要包含柱状图和环形图。原型效果图如下：

二、源码解析

1.在模板中引入柱形图和环形图组件

代码如下：

<template>
	<view>
		<view>
			<p>日收支统计</p>
			<qiun-data-charts 
		      type="column"
		      :opts="optsColumn"
		      :chartData="chartDataColumn"
			/>
		</view>
		<view>
			<p>分类统计</p>
			<qiun-data-charts 
		      type="ring"
		      :opts="optsRing"
		      :chartData="chartDataRing"
		    />
		</view>
	</view>
</template>

注意，2个图表组件使用到的opts和chartDate要区分命名。如，柱状图可以拼接column拼接，环形图可以拼接Ring，方便区分。

2.数据部分

代码如下：

<script>
	export default {
   
	  data() {
   
	    return {
   
	      chartDataColumn: {
   },
	      optsColumn: {
   
	        color: ["#1890FF"