uniapp使用ucharts组件

 1.ucharts准备

有两种使用方式：一种是在uni的插件市场下载（组件化开发）。一种是手动引入ucharts包。官方都封装好组件了，我们不用岂不是浪费。

直接去dcloud插件市场（DCloud 插件市场）找，第一个是ucharts，第二个是echarts。

不考虑小程序的话，echarts更好，功能丰富，文档工具免费。

ucharts体积要小非常多，但是工具要会员，差点意思，而且网传bug会多一点，但我没遇到。

ucharts文档：uCharts官网 - 秋云uCharts跨平台图表库

2.体积问题

ucharts的里static下放了echarts的文件，导致体积比较大，可以删了。忘了要不要改qiun-data-charts里的引入地址，如果要改的话项目会有报错提示。

以下酌情优化：

因为我的uni_modules里包比较多，导致主包体积有点大，所以我又将ucharts给提取到分包里，并且删除了不需要的文件。同时把qiun-data-charts里的引入地址改一下，注意有两处引入要改。

如果开发中不需要改u-charts源码的话，可以用u-charts.min.js，同样改一下上述引入地址，再把u-charts.js删了，体积会更小。

 3.使用

完整代码在下面，根据自己的理解写了点注释。

跟平常使用组件一样，如果没有像我一样把ucharts的提到分包，就不需要引入和定义，直接用。

ucharts把图表配置和渲染数据分开了，chartData里放渲染数据，opts里放图表配置。

type就是定义这是什么图标，柱状图，条形图之类的。

import qiunDataCharts from './components/qiun-data-charts/qiun-data-charts.vue';
components:{qiunDataCharts},
//==========================================
<view style="width:100%; height:280rpx;">
	<qiun-data-charts :chartData="chartData" 
		background="none" type="bar" 
		:opts="opts"/>
</view>

<template>
	<view>
		<view class="chart">
			<view class="chart-item">
				<view class="form-title">
					车间在制品
				</view>
				<!-- 车间在制品 -->
				<view class="board">
					<view style="width:100%; height:280rpx;">
						 <qiun-data-charts :chartData="chartData" 
							background="none" type="bar" 
							:opts="opts"/>
					</view>
				</view>
			</view>
			<view class="chart-item">
				<view class="form-title">
					各工步在制品
				</view>
				<!-- 各工步在制品 -->
				<view class="board">
					<view style="width:100%; height:520rpx;">
						<qiun-data-charts :chartData="workData"
							background="none" type="column" 
							:opts="workopt"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qiunDataCharts from './components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		data() {
			return {
				chartData: {},
				opts: {},
				workData: {},
				workopt: {}
			};
		},
		components:{qiunDataCharts},
		onShow() {
			this.initWork()
			this.initCar()
		},
		methods: {
			// 工步
			initWork(){
				this.workData = {
					categories: ["自动焊接","系统返修","层压","层压测试","层压外观检","包装","装机"],
					series: [
						{
							name: "1车间",
							data: [35,36,31,33,13,34,14]
						},
						{
							name: "2车间",
							data: [18,27,21,24,6,28,37]
						},
						{
							name: "3车间",
							data: [18,27,21,24,6,28,23]
						},
						{
							name: "4车间",
							data: [18,27,21,24,6,28,19]
						}
					]
				},
				this.workopt = {
					color: ["#105fa3","#62bf8f","#c56d15","#c62d32","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,0,5],
					enableScroll: false,
					legend: {
						show: true,//显示说明文本块
						fontColor: "#ffffff",//说明文本块颜色
					},
					dataLabel: false,//柱状体上方不显示数字
					xAxis: {
						rotateLabel: true,
						rotateAngle: 50,
						lineHeight: 50,
						axisLineColor: '#ffffff',//轴线颜色
						fontColor: "#ffffff",//x轴刻字颜色
						disableGrid: true,
						// format: 'xAxisDemo3'
					},
					yAxis: {
						gridColor: "#ffffff",//横向网格线颜色
						data: [{
							axisLineColor: "#ffffff",//轴线颜色
							fontColor: "#ffffff",//y轴刻字颜色
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 6,
							seriesGap: 2,//一个刻度中多个柱的间距
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
						}
					}
				}
			},
			// 车间
			initCar(){
				this.chartData = {
					categories: ["1车间","2车间","3车间","4车间"],
					series: [
						{
							name: "完成量",
							data: [38,47,51,24]
						}
					]
				},
				this.opts = {
					color: ["#1890FF","#91CB74"],
					padding: [15,30,0,5],
					enableScroll: false,
					legend: {
						fontColor: "#ffffff",//说明文本块颜色
					},
					dataLabel: false,//柱状体上方不显示数字
					xAxis: {
						axisLineColor: "#ffffff",//轴线颜色
						gridColor: "#ffffff",//纵坐标颜色
						fontColor: "#ffffff",//x轴刻字颜色
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 80
					},
					yAxis: {
						data: [{
							type: 'categories',
							axisLineColor: "#ffffff",//轴线颜色
							fontColor: "#ffffff",//y轴刻字颜色
						}]
					},
					extra: {
						bar: {
							type: "group",
							width: 9,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				}
			},
		},
	}
</script>

<style lang="scss">
.chart{
	padding: 0 10rpx;
	background: #3a3d5c;
	.chart-item{
		margin: 8rpx 0;
		padding: 20rpx;
		background: #202437;
	}
	.form-title{
		margin: 10rpx 0 26rpx;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}
	
}
</style>