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>