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就是界说这是什么图标，柱状图，条形图之类的。

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

复制代码

 

1. <template>
2.         <view>
3.                 <view class="chart">
4.                         <view class="chart-item">
5.                                 <view class="form-title">
6.                                         车间在制品
7.                                 </view>
8.                                 <!-- 车间在制品 -->
9.                                 <view class="board">
10.                                         <view style="width:100%; height:280rpx;">
11.                                                  <qiun-data-charts :chartData="chartData"
12.                                                         background="none" type="bar"
13.                                                         :opts="opts"/>
14.                                         </view>
15.                                 </view>
16.                         </view>
17.                         <view class="chart-item">
18.                                 <view class="form-title">
19.                                         各工步在制品
20.                                 </view>
21.                                 <!-- 各工步在制品 -->
22.                                 <view class="board">
23.                                         <view style="width:100%; height:520rpx;">
24.                                                 <qiun-data-charts :chartData="workData"
25.                                                         background="none" type="column"
26.                                                         :opts="workopt"/>
27.                                         </view>
28.                                 </view>
29.                         </view>
30.                 </view>
31.         </view>
32. </template>
34. <script>
35.         import qiunDataCharts from './components/qiun-data-charts/qiun-data-charts.vue';
36.         export default {
37.                 data() {
38.                         return {
39.                                 chartData: {},
40.                                 opts: {},
41.                                 workData: {},
42.                                 workopt: {}
43.                         };
44.                 },
45.                 components:{qiunDataCharts},
46.                 onShow() {
47.                         this.initWork()
48.                         this.initCar()
49.                 },
50.                 methods: {
51.                         // 工步
52.                         initWork(){
53.                                 this.workData = {
54.                                         categories: ["自动焊接","系统返修","层压","层压测试","层压外观检","包装","装机"],
55.                                         series: [
56.                                                 {
57.                                                         name: "1车间",
58.                                                         data: [35,36,31,33,13,34,14]
59.                                                 },
60.                                                 {
61.                                                         name: "2车间",
62.                                                         data: [18,27,21,24,6,28,37]
63.                                                 },
64.                                                 {
65.                                                         name: "3车间",
66.                                                         data: [18,27,21,24,6,28,23]
67.                                                 },
68.                                                 {
69.                                                         name: "4车间",
70.                                                         data: [18,27,21,24,6,28,19]
71.                                                 }
72.                                         ]
73.                                 },
74.                                 this.workopt = {
75.                                         color: ["#105fa3","#62bf8f","#c56d15","#c62d32","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
76.                                         padding: [15,15,0,5],
77.                                         enableScroll: false,
78.                                         legend: {
79.                                                 show: true,//显示说明文本块
80.                                                 fontColor: "#ffffff",//说明文本块颜色
81.                                         },
82.                                         dataLabel: false,//柱状体上方不显示数字
83.                                         xAxis: {
84.                                                 rotateLabel: true,
85.                                                 rotateAngle: 50,
86.                                                 lineHeight: 50,
87.                                                 axisLineColor: '#ffffff',//轴线颜色
88.                                                 fontColor: "#ffffff",//x轴刻字颜色
89.                                                 disableGrid: true,
90.                                                 // format: 'xAxisDemo3'
91.                                         },
92.                                         yAxis: {
93.                                                 gridColor: "#ffffff",//横向网格线颜色
94.                                                 data: [{
95.                                                         axisLineColor: "#ffffff",//轴线颜色
96.                                                         fontColor: "#ffffff",//y轴刻字颜色
97.                                                         min: 0
98.                                                 }]
99.                                         },
100.                                         extra: {
101.                                                 column: {
102.                                                         type: "group",
103.                                                         width: 6,
104.                                                         seriesGap: 2,//一个刻度中多个柱的间距
105.                                                         activeBgColor: "#000000",
106.                                                         activeBgOpacity: 0.08,
107.                                                 }
108.                                         }
109.                                 }
110.                         },
111.                         // 车间
112.                         initCar(){
113.                                 this.chartData = {
114.                                         categories: ["1车间","2车间","3车间","4车间"],
115.                                         series: [
116.                                                 {
117.                                                         name: "完成量",
118.                                                         data: [38,47,51,24]
119.                                                 }
120.                                         ]
121.                                 },
122.                                 this.opts = {
123.                                         color: ["#1890FF","#91CB74"],
124.                                         padding: [15,30,0,5],
125.                                         enableScroll: false,
126.                                         legend: {
127.                                                 fontColor: "#ffffff",//说明文本块颜色
128.                                         },
129.                                         dataLabel: false,//柱状体上方不显示数字
130.                                         xAxis: {
131.                                                 axisLineColor: "#ffffff",//轴线颜色
132.                                                 gridColor: "#ffffff",//纵坐标颜色
133.                                                 fontColor: "#ffffff",//x轴刻字颜色
134.                                                 boundaryGap: "justify",
135.                                                 disableGrid: false,
136.                                                 min: 0,
137.                                                 axisLine: false,
138.                                                 max: 80
139.                                         },
140.                                         yAxis: {
141.                                                 data: [{
142.                                                         type: 'categories',
143.                                                         axisLineColor: "#ffffff",//轴线颜色
144.                                                         fontColor: "#ffffff",//y轴刻字颜色
145.                                                 }]
146.                                         },
147.                                         extra: {
148.                                                 bar: {
149.                                                         type: "group",
150.                                                         width: 9,
151.                                                         meterBorde: 1,
152.                                                         meterFillColor: "#FFFFFF",
153.                                                         activeBgColor: "#000000",
154.                                                         activeBgOpacity: 0.08,
155.                                                         linearType: "custom",
156.                                                         barBorderCircle: true,
157.                                                         seriesGap: 2,
158.                                                         categoryGap: 2
159.                                                 }
160.                                         }
161.                                 }
162.                         },
163.                 },
164.         }
165. </script>
167. <style lang="scss">
168. .chart{
169.         padding: 0 10rpx;
170.         background: #3a3d5c;
171.         .chart-item{
172.                 margin: 8rpx 0;
173.                 padding: 20rpx;
174.                 background: #202437;
175.         }
176.         .form-title{
177.                 margin: 10rpx 0 26rpx;
178.                 font-size: 30rpx;
179.                 color: #fff;
180.                 text-align: center;
181.         }
182.        
183. }
184. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。