From 28177e5c0f74c2bcd04248dde751ab115622ba5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=88=B1=7E=E6=B5=B7=7E=E7=88=B1=E6=B5=B7=E7=88=B1?= =?UTF-8?q?=E6=B5=B7=7E=E5=8F=B3?= <1828712314@qq.com> Date: Fri, 28 Feb 2025 12:01:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/enterprise.vue | 7 +- pages/index.vue | 61 ++++++--- pages/task.vue | 2 +- static/scss/global.scss | 5 + .../js_sdk/u-charts/config-echarts.js | 123 +++++++++--------- 5 files changed, 115 insertions(+), 83 deletions(-) diff --git a/pages/enterprise.vue b/pages/enterprise.vue index 671aefe..de23a6f 100644 --- a/pages/enterprise.vue +++ b/pages/enterprise.vue @@ -116,7 +116,7 @@ :status="load" marginTop="12" marginBottom="12" - v-if="load !== 'nomore'" + v-if="load !== 'nomore' && list.length > 0" /> @@ -154,10 +154,11 @@ export default { }, async onLoad() { await this.getDict() - }, - onShow() { this.queryEnterprise() }, + // onShow() { + // this.queryEnterprise() + // }, onReady() { this.getPageHeight() }, diff --git a/pages/index.vue b/pages/index.vue index 84d70af..10240f0 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -47,6 +47,7 @@ bold font-size="24" color="#071437" + class="number" > 任务数量 @@ -82,31 +83,31 @@ :opts="opts" :chartData="chartData" :canvas2d="true" - style="height: 144px" + style="height: 288rpx" > - + - + @@ -120,7 +121,7 @@ font-size="16" color="#071437" > - % + % @@ -153,7 +154,11 @@ class="name" :style="{ color: - queryParams.type == item.type ? '#071437' : '#78829d' + queryParams.type == item.type + ? '#071437' + : '#78829d', + fontWeight: + queryParams.type == item.type ? '800' : 'normal' }" > {{ item.name }} @@ -169,14 +174,14 @@ style="justify-content: space-between; padding: 12px" > {{ item.name }} - + {{ queryParams.type == 1 ? '天' : '次' }} @@ -288,9 +293,11 @@ export default { this.detail = res.data let curIndex = 0 const colorMap = [] - const split = 1 / this.detail.completionRate.length const data = this.detail.completionRate.map((item, index) => { - const color = `rgba(4, 180, 64,${1 - split * (index + 1)})` + const color = this.getGradientColor( + index, + this.detail.completionRate.length + ) const res = { ...item, color @@ -335,7 +342,8 @@ export default { name: `${max}%`, fontSize: 24, color: '#071437', - fontWeight: 'bold' + fontWeight: 'bold', + fontFamily: 'Tahoma' }, subtitle: { name: '完成率', @@ -349,7 +357,8 @@ export default { offsetAngle: 90, labelWidth: 15, border: false, - borderColor: '#FFFFFF', + borderColor: '#F9F9F9', + borderWidth: 0.5, linearType: 'none' } } @@ -398,6 +407,10 @@ export default { // 然后截取前两位小数 let realVal = tempVal.substring(0, tempVal.length - 1) return realVal + }, + getGradientColor(index, total) { + const opacity = 1 - index / total + 0.1 + return `rgba(4, 180, 64, ${opacity})` } } } @@ -407,6 +420,13 @@ export default { .view-container { height: 100%; } +.number { + font-family: 'Tahoma'; +} + +::v-deep .u-count-num { + font-family: 'Tahoma'; +} .view { padding: 0 24rpx; padding-bottom: 24rpx; @@ -441,7 +461,6 @@ export default { .name { z-index: 2; position: inherit; - font-weight: bold; } &:first-child::before { content: ''; diff --git a/pages/task.vue b/pages/task.vue index c4b5201..c8adccf 100644 --- a/pages/task.vue +++ b/pages/task.vue @@ -133,7 +133,7 @@ marginBottom="12" v-if="load !== 'nomore'" /> - + diff --git a/static/scss/global.scss b/static/scss/global.scss index 4925e24..155f587 100644 --- a/static/scss/global.scss +++ b/static/scss/global.scss @@ -1,3 +1,8 @@ +@font-face { + font-family: 'Tahoma'; + src: url('https://hb.jzce.com/Tahoma.ttf') format('truetype'); +} + page { background-color: #f9f9f9; position: relative; diff --git a/uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js b/uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js index 7b8168f..22662a8 100644 --- a/uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js +++ b/uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js @@ -22,56 +22,57 @@ const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']; const cfe = { - //demotype为自定义图表类型 - "type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"], - //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype" - "categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"], - //instance为实例变量承载属性，option为eopts承载属性，不要删除 + //demotype为自定义图表类型 + "type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge", "candle", "demotype"], + //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype" + "categories": ["line", "column", "area", "radar", "gauge", "candle", "demotype"], + //instance为实例变量承载属性，option为eopts承载属性，不要删除 "instance": {}, "option": {}, - //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换 - "formatter":{ - "tooltipDemo1":function(res){ - let result = '' - for (let i in res) { - if (i == 0) { - result += res[i].axisValueLabel + '年销售额' - } - let value = '--' - if (res[i].data !== null) { - value = res[i].data - } - // #ifdef H5 - result += '\n' + res[i].seriesName + '：' + value + ' 万元' - // #endif - - // #ifdef APP-PLUS - result += '
' + res[i].marker + res[i].seriesName + '：' + value + ' 万元' - // #endif - } - return result; - }, - legendFormat:function(name){ - return "自定义图例+"+name; - }, - yAxisFormatDemo:function (value, index) { - return value + '元'; - }, - seriesFormatDemo:function(res){ - return res.name + '年' + res.value + '元'; - } - }, - //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。 - "demotype":{ - "color": color, - //在这里填写echarts的option即可 - - }, - //下面是自定义配置，请添加项目所需的通用配置 + //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换 + "formatter": { + "tooltipDemo1": function(res) { + let result = '' + for (let i in res) { + if (i == 0) { + result += res[i].axisValueLabel + '年销售额' + } + let value = '--' + if (res[i].data !== null) { + value = res[i].data + } + // #ifdef H5 + result += '\n' + res[i].seriesName + '：' + value + ' 万元' + // #endif + + // #ifdef APP-PLUS + result += '
' + res[i].marker + res[i].seriesName + '：' + value + ' 万元' + // #endif + } + return result; + }, + legendFormat: function(name) { + return "自定义图例+" + name; + }, + yAxisFormatDemo: function(value, index) { + return value + '元'; + }, + seriesFormatDemo: function(res) { + return res.name + '年' + res.value + '元'; + } + }, + //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。 + "demotype": { + "color": color, + //在这里填写echarts的option即可 + + }, + //下面是自定义配置，请添加项目所需的通用配置 "column": { "color": color, "title": { - "text": '' + "text": '', + "fontFamoly": 'Tahoma' }, "tooltip": { "trigger": 'axis' @@ -122,7 +123,7 @@ const cfe = { "barwidth": 20, "label": { "show": true, - "color": "#666666", + "color": "#666666", "position": 'top', }, }, @@ -181,7 +182,7 @@ const cfe = { "barwidth": 20, "label": { "show": true, - "color": "#666666", + "color": "#666666", "position": 'top', }, }, @@ -240,7 +241,7 @@ const cfe = { "areaStyle": {}, "label": { "show": true, - "color": "#666666", + "color": "#666666", "position": 'top', }, }, @@ -266,10 +267,10 @@ const cfe = { "name": '', "type": 'pie', "data": [], - "radius": '50%', + "radius": '100%', "label": { "show": true, - "color": "#666666", + "color": "#666666", "position": 'top', }, }, @@ -277,7 +278,8 @@ const cfe = { "ring": { "color": color, "title": { - "text": '' + "text": '', + "fontFamoly": 'Tahoma' }, "tooltip": { "trigger": 'item' @@ -295,11 +297,11 @@ const cfe = { "name": '', "type": 'pie', "data": [], - "radius": ['40%', '70%'], + "radius": ['40%', '100%'], "avoidLabelOverlap": false, "label": { "show": true, - "color": "#666666", + "color": "#666666", "position": 'top', }, "labelLine": { @@ -378,13 +380,18 @@ const cfe = { "gauge": { "color": color, "tooltip": { - "formatter": '{a}
{b} : {c}%' - }, + "formatter": '{a}
{b} : {c}%' + }, "seriesTemplate": { "name": '业务指标', - "type": 'gauge', - "detail": {"formatter": '{value}%'}, - "data": [{"value": 50, "name": '完成率'}] + "type": 'gauge', + "detail": { + "formatter": '{value}%' + }, + "data": [{ + "value": 50, + "name": '完成率' + }] }, }, "candle": {