【ucharts】uniapp -- 使用秋云 ucharts echarts高性能跨全端图表组件

uCharts简介

uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。

效果展示：演示 - uCharts跨平台图表库

步骤一：下载uCharts组件库，秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

步骤二： 引入组件库

将下载的qiun-data-charts组件库直接引入uni_modules文件夹中，如图所示：

 步骤三：引用组件

属性 -- uCharts跨平台图表库

<qiun-data-charts class="charts" 
type="ring" //图表类型
:chartData="chartData" //图表数据
:echartsApp="true" //【仅uni-app】是否在APP端使用ECharts引擎渲染图表
background="none" //背景颜色，默认透明rgba(0,0,0,0)，开启滚动条后需要赋值为父元素的背景色
:tapLegend="false" //是否开启图例点击交互事件
:opts="opts" //uCharts图表配置参数
/>

 以圆环图 ring 为例：直接在页面引用即可。

<template>
	<view class="wrap">
		<view class="gzzl-wrap">
			<view class="title-content">
				<view class="word_1">上报事件统计</view>
				<view class="word_2">（xxx）</view>
			</view>
			<view v-if="show">
				<view class="data-wrap">
                    <!-- uCharts圆环图 ring  -->
					<qiun-data-charts class="charts" type="ring" :chartData="chartData" :echartsApp="true" background="none"
						:tapLegend="false" :opts="opts" />
				</view>
				<view class="task-content">
					<view class="item-task" v-for="(item, index) in menulist" :key="index">
						<view class="grid-sl">
							<u-input v-model="item.sl" border="none" inputAlign="center" readonly></u-input>
						</view>
						<text class="grid-text">{
   
   { item.text }}</text>
					</view>
				</view>
			</view>
			<view v-else style="margin-top: 128rpx;">
				<u-empty mode="data"></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: '',
	components: {},
	props: {},
	data () {
		return {
			show: false,
			formData: {},
			params: {},
			chartData: {
				"series": [
					{
						"data": [
							{
								"name": "已处置",
								"value": 0
							},
							{
								"name": "处置中",
								"value": 0
							},
							{
								"name": "待处置",
								"value": 0
							}
						]
					}
				]
			},
			menulist: [
				{
					text: '已处置',
					sl: 0
				},
				{
					text: '处置中',
					sl: 0
				},
				{
					text: '待处置',
					sl: 0
				},
			],
			opts: {
				title: {
					name: "总上报事件数量",
					fontSize: 14,
					color: "#333333"
				},
				subtitle: {
					name: "0",
					fontSize: 18,
					color: "#333333"
				},
			},
		}
	},
	mounted () {
		this.loadData()
	},
	methods: {
		loadData () {
			this.chartData.series[0].data[0].value = 16;
			this.menulist[0].sl = 16;
            this.chartData.series[0].data[1].value = 5;
			this.menulist[1].sl = 5;
            this.chartData.series[0].data[2].value = 4;
			this.menulist[2].sl = 4;
            this.opts.subtitle.name = Number(this.menulist[0].sl) + Number(this.menulist[1].sl) + Number(this.menulist[2].sl)
				if (this.opts.subtitle.name == '0') {
					this.show = false
				} else {
					this.show = true
				}
		},
	}
}
</script>

<style lang="scss" scoped>
.gzzl-wrap {
	position: relative;
	width: 100%;
	height: auto;
	padding: 24rpx;
	background-color: #FFFFFF;
	margin-top: 32rpx;

	.title-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		width: 100%;
		height: 64rpx;

		.word_1 {
			color: #333333;
			font-size: 34rpx;
		}

		.word_2 {
			color: #666666;
			font-size: 24rpx;
		}
	}

	.data-wrap {
		position: relative;
		width: 100%;
		height: 420rpx;
	}

	.charts {
		height: 420rpx;
	}

	.task-content {
		display: flex;
		flex-direction: row;
		position: relative;
		width: 100%;
		height: auto;
		padding: 24rpx 0;
		background-color: #FFFFFF;

		.item-task {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			line-height: 52rpx;

			.grid-text {
				color: #999999;
				font-size: 28rpx;
			}

			.grid-sl {
				font-size: 40rpx;
				color: #333333;
				width: 56%;
			}
		}

		.item-task:nth-child(1):before {
			content: '';
			position: absolute;
			left: 30rpx;
			width: 20rpx;
			height: 20rpx;
			background-color: #00B38A;
		}

		.item-task:nth-child(3):after {
			content: '';
			position: absolute;
			left: 30rpx;
			width: 20rpx;
			height: 20rpx;
			background-color: #FF8F17;
		}

		.item-task:nth-child(2):after {
			content: '';
			position: absolute;
			left: 30rpx;
			width: 20rpx;
			height: 20rpx;
			background-color: #FFD800;
		}
	}
}
</style>