From 81c1be1ce5f212f90017beaa20e96ef015463518 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=8A=B2=E9=BE=99?= <2860996570@qq.com> Date: Thu, 29 Aug 2024 20:02:01 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9Eecharts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/assets/styles/publicPro.scss | 12 +- .../components/AFuwufazhanzonglan/index.vue | 12 +- .../components/BJinsannianzijin/index.vue | 157 ++++++++++++------ .../BJinsannianzijin/mixins/resize.js | 56 +++++++ 5 files changed, 169 insertions(+), 70 deletions(-) create mode 100644 src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js diff --git a/package.json b/package.json index 02979ad..e3f8d83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ruoyi", - "version": "1.0.202408291813", + "version": "1.0.202408291841", "description": "金鸡湖现代服务业品牌管理系统", "author": "若依", "license": "MIT", diff --git a/src/assets/styles/publicPro.scss b/src/assets/styles/publicPro.scss index c86b599..f45eeed 100644 --- a/src/assets/styles/publicPro.scss +++ b/src/assets/styles/publicPro.scss @@ -355,9 +355,6 @@ } .AFuwufazhanzonglan-item-top { - div { - - } div:nth-child(1) { font-size: 20px; @@ -405,7 +402,14 @@ //近三年 .BJinsannianzijin-box { - .BJinsannianzijin {} + width: 100%; + .BJinsannianzijin { + width: 100%; + .BJinsannianzijinchart-left{ + width: 50%; + height: 25vh; + } + } } } diff --git a/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue b/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue index 1472e4b..7593164 100644 --- a/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue +++ b/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue @@ -93,20 +93,12 @@ export default { }, }, mounted() { - // this.cancalDebounce(); - window.addEventListener('resize', this.cancalDebounce); + }, methods: { // 获取top5列表 - // 屏幕尺寸变化 - cancalDebounce() { - const element = document.getElementById('zhijinbofu-qingkaung'); // 通过元素的 ID 获取元素 - const header = document.getElementById('zhijinbofu-header-id'); // 通过元素的 ID 获取元素 - const elementHeight = element.offsetHeight; - const headerHeight = header.offsetHeight; - this.tabHeader = elementHeight - headerHeight - 35; - } + }, } diff --git a/src/views/workbenchPro/components/BJinsannianzijin/index.vue b/src/views/workbenchPro/components/BJinsannianzijin/index.vue index 04e3456..e486645 100644 --- a/src/views/workbenchPro/components/BJinsannianzijin/index.vue +++ b/src/views/workbenchPro/components/BJinsannianzijin/index.vue @@ -1,60 +1,107 @@ - - - - - - \ No newline at end of file +} + diff --git a/src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js b/src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js new file mode 100644 index 0000000..b1e76e9 --- /dev/null +++ b/src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js @@ -0,0 +1,56 @@ +import { debounce } from '@/utils' + +export default { + data() { + return { + $_sidebarElm: null, + $_resizeHandler: null + } + }, + mounted() { + this.initListener() + }, + activated() { + if (!this.$_resizeHandler) { + // avoid duplication init + this.initListener() + } + + // when keep-alive chart activated, auto resize + this.resize() + }, + beforeDestroy() { + this.destroyListener() + }, + deactivated() { + this.destroyListener() + }, + methods: { + // use $_ for mixins properties + // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential + $_sidebarResizeHandler(e) { + if (e.propertyName === 'width') { + this.$_resizeHandler() + } + }, + initListener() { + this.$_resizeHandler = debounce(() => { + this.resize() + }, 100) + window.addEventListener('resize', this.$_resizeHandler) + + this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] + this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) + }, + destroyListener() { + window.removeEventListener('resize', this.$_resizeHandler) + this.$_resizeHandler = null + + this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) + }, + resize() { + const { chart } = this + chart && chart.resize() + } + } +} From bf790ba23447f6e0f879400de910796ce697eec2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=8A=B2=E9=BE=99?= <2860996570@qq.com> Date: Thu, 29 Aug 2024 21:22:01 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E9=A5=BC=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/BJinsannianzijin/index.vue | 80 ++++++++++++------- 1 file changed, 50 insertions(+), 30 deletions(-) diff --git a/src/views/workbenchPro/components/BJinsannianzijin/index.vue b/src/views/workbenchPro/components/BJinsannianzijin/index.vue index e486645..1e44216 100644 --- a/src/views/workbenchPro/components/BJinsannianzijin/index.vue +++ b/src/views/workbenchPro/components/BJinsannianzijin/index.vue @@ -46,58 +46,78 @@ export default { methods: { initChart() { this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left')) - const option = { + var value1 = Math.random() * 100; // 生成第一个随机值 + var value2 = 300 - value1; // 第二个随机值，保证总和为100 + + // 计算比例 + var minOffset = value1 / 100; // 第一个颜色的渐变比例 + var maxOffset = (value1 + value2) / 100; // 第二个颜色的渐变比例（这里总和为100，所以maxOffset等于1） + + let option = { series: [ { type: 'gauge', + splitNumber: 3, + radius: '93%', + center: ["50%", "70%"], startAngle: 180, endAngle: 0, - center: ['50%', '80%'], - radius: '100%', + min: 0, + max: 100, + pointer: { + show: true, + width: 7, + length: "60%", + borderColor: '#000', + borderWidth: '10', + }, axisLine: { + show: true, lineStyle: { - width: 30, + width: 35, color: [ - [0.298, '#2d99e2'], - [1, '#dce3ec'], + [0.5, '#7BB2FF'], // 第一个颜色 + [0.6, '#000'], + [1, '#4186FF'] // 第二个颜色 ], }, }, - axisTick: { show: false }, - axisLabel: { show: false }, - splitLine: { show: false }, - pointer: { - offsetCenter: [0, '10%'], - icon: 'path://M0,0 L0,-20 L5,-20 L5,-30 L15,-30 L15,-20 L20,-20 L20,0 Z', // 圆点 + 线 + 三角形 - length: '80%', // 调整长度 - itemStyle: { - color: '#000', - width: 2, // 设置指针粗细 + axisLabel: { + show: true, + color: "#666", + fontSize: 16, + formatter: function (value) { + return value.toFixed(0); }, }, - title: { - show: true, - offsetCenter: [0, '25%'], - textStyle: { - color: '#2d99e2', - fontSize: 15, - fontFamily: '微软雅黑', - fontWeight: 'bold', + axisTick: { + show: false, + }, + splitLine: { + show: false, + length: "28%", + lineStyle: { + color: "#fff", + width: 2, }, }, detail: { - show: false, + show: false + }, + title: { + show: false }, data: [ { - value: 29.8, - name: '你要的比例 29.8%', - }, + value: value1, + name: '决策层国际化导向' + } ], - }, - ], + } + ] }; + this.chart.setOption( option )