|
|
@@ -2,14 +2,25 @@
|
|
|
* @Author: PoJun
|
|
|
* @Date: 2023-12-19 14:57:48
|
|
|
* @LastEditors: XuanJi
|
|
|
- * @LastEditTime: 2024-05-22 16:40:41
|
|
|
+ * @LastEditTime: 2024-05-25 23:20:58
|
|
|
* @Message: 柱形图
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="data-charts">
|
|
|
<view class="uv-font-md uv-weight-700 uv-m-25">产品-供应商数量</view>
|
|
|
- <view v-show="showChart" class="charts-box">
|
|
|
- <qiun-data-charts type="column" :ontouch="true" :opts="opts" :chartData="chartData" :reshow="showChart" />
|
|
|
+ <view class="charts-content">
|
|
|
+ <view v-show="showChart" class="charts-box">
|
|
|
+ <qiun-data-charts
|
|
|
+ type="column"
|
|
|
+ :ontouch="true"
|
|
|
+ :opts="opts"
|
|
|
+ :chartData="chartData"
|
|
|
+ :reshow="showChart"
|
|
|
+ @complete="chartComplete = true"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <!-- 由于组件的bug，x轴滚动时，x轴标题显示有问题，自行模拟实现 -->
|
|
|
+ <!-- <view v-if="chartComplete" class="imitate-xAxis-title">产品</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -17,9 +28,6 @@
|
|
|
<script>
|
|
|
import { getHomeChartData } from "@/config/http.js";
|
|
|
export default {
|
|
|
- // components: {
|
|
|
- // QiunDataCharts: () => import("@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"),
|
|
|
- // },
|
|
|
props: {
|
|
|
times: {
|
|
|
type: Number,
|
|
|
@@ -32,9 +40,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ chartComplete: false,
|
|
|
chartData: {},
|
|
|
opts: {
|
|
|
- padding: [15, 15, 5, 15],
|
|
|
+ padding: [15, 30, 10, 15],
|
|
|
fontSize: 12,
|
|
|
touchMoveLimit: 24,
|
|
|
enableScroll: true,
|
|
|
@@ -44,12 +53,21 @@ export default {
|
|
|
xAxis: {
|
|
|
disableGrid: true,
|
|
|
scrollShow: false,
|
|
|
- itemCount: 5,
|
|
|
+ itemCount: 5, //单屏幕数据点数量
|
|
|
+ rotateLabel: true,
|
|
|
+ marginTop: 4,
|
|
|
+ title: "产品",
|
|
|
+ titleOffsetY: -8,
|
|
|
+ titleOffsetX: 0,
|
|
|
},
|
|
|
yAxis: {
|
|
|
+ showTitle: true,
|
|
|
data: [
|
|
|
{
|
|
|
min: 0,
|
|
|
+ title: "数量",
|
|
|
+ titleOffsetY: -7,
|
|
|
+ titleOffsetX: -8,
|
|
|
},
|
|
|
],
|
|
|
splitNumber: 5,
|
|
|
@@ -62,6 +80,17 @@ export default {
|
|
|
activeBgOpacity: 0.08,
|
|
|
width: 20,
|
|
|
},
|
|
|
+ tooltip: {
|
|
|
+ showBox: true,
|
|
|
+ showArrow: true,
|
|
|
+ showCategory: false,
|
|
|
+ legendShow: false,
|
|
|
+ legendShape: "auto",
|
|
|
+ splitLine: false,
|
|
|
+ horizentalLine: false,
|
|
|
+ xAxisLabel: true,
|
|
|
+ yAxisLabel: false,
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -73,12 +102,17 @@ export default {
|
|
|
const categories = data.map(item => item.name);
|
|
|
const series = [
|
|
|
{
|
|
|
- name: "供应商数量",
|
|
|
+ name: "数量",
|
|
|
data: data.map(item => item.c),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
+ if (categories.length > 5) {
|
|
|
+ this.opts.xAxis.scrollShow = true;
|
|
|
+ } else {
|
|
|
+ this.opts.xAxis.scrollShow = false;
|
|
|
+ }
|
|
|
this.chartData = JSON.parse(JSON.stringify({ categories, series }));
|
|
|
});
|
|
|
} catch (error) {
|
|
|
@@ -104,9 +138,20 @@ export default {
|
|
|
.data-charts {
|
|
|
width: 100%;
|
|
|
height: 340px;
|
|
|
- .charts-box {
|
|
|
- width: 750rpx;
|
|
|
- height: 300px;
|
|
|
+ .charts-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .charts-box {
|
|
|
+ width: 710rpx;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ .imitate-xAxis-title {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666666;
|
|
|
+ position: relative;
|
|
|
+ top: -11px;
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
