From 4cbcb465ac0daff8305de5410116ed85fccb4650 Mon Sep 17 00:00:00 2001 From: yuzongping <835949940@qq.com> Date: Mon, 9 Jun 2025 15:24:39 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E9=87=91=E5=BE=80=E6=9D=A5=E4=B8=8D?= =?UTF-8?q?=E8=A7=84=E8=8C=83=E9=A2=84=E8=AD=A6=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/charts/bar-sign/icon.png | Bin 0 -> 630 bytes src/components/charts/bar-sign/index.html | 1 + src/components/charts/bar-sign/index.js | 249 ++++++++++++++++++ src/components/charts/bar-sign/index.scss | 6 + src/components/charts/bar-sign/index.vue | 3 + .../capital/comps/left/bottom/2/index.html | 11 +- .../capital/comps/left/bottom/2/index.js | 18 +- .../capital/comps/left/bottom/2/index.scss | 17 ++ .../capital/comps/left/middle/2/index.html | 3 +- .../capital/comps/left/middle/2/index.js | 10 + src/views/capital/data.js | 2 +- src/views/capital/index.html | 1 - src/views/capital/index.js | 2 + 13 files changed, 316 insertions(+), 7 deletions(-) create mode 100644 src/components/charts/bar-sign/icon.png create mode 100644 src/components/charts/bar-sign/index.html create mode 100644 src/components/charts/bar-sign/index.js create mode 100644 src/components/charts/bar-sign/index.scss create mode 100644 src/components/charts/bar-sign/index.vue diff --git a/src/components/charts/bar-sign/icon.png b/src/components/charts/bar-sign/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2736d31748412623e715a0005f3cde76253880 GIT binary patch literal 630 zcmV-+0*U>JP)Px%FiAu~R5(wilut;LaTv!x&sMovtu{*t49X-boOXyc=cR*?7}T*cvglyTOH#+K zU5n}<<{{9?>{w75bm-EiBcgnTBL4*rgW0xN%?)YqFWzmsz42;-@8LZ>&+qyCp6B^J z-$$_cJi&>RN>n>Y0My>X5t#!O5+#F)-ul=7hDo`hs&o91vdJTaCejO#n1XE5fPljd zo?6&i4T`Yn>Poz?;mdOT3TS6gJ7E)f&fr zHGWlH+F_*_B{}0l8-m=DHDuXp-vZuq1~estKi=d0oCkS=;~_HfCf@h`A5soG)(OsC z;Y6=DAVy;mHNwXMNY1QeqW0}UT|bX%ZY;F=-6!P15HdSo%GN0JXa^{1756o*U(&G- zB0VOE{^U07*k&#v61 z%hGN_i*J?EBG|j{Sd-qKWc4%&ZoPtpe+x@4jKYw8$wGf#f8ymd%6EzgZ$iR9>|3f=qlnUtgN0+(gZb_7pg)e(7-9 zB--VJ<~0&4Y=DfhMgXU0eQTur*5YEjfFb}C7aMa3A<^~0#KXpt42pq&0eZar^9W1J QGXMYp07*qoM6N<$g5xc~qF literal 0 HcmV?d00001 diff --git a/src/components/charts/bar-sign/index.html b/src/components/charts/bar-sign/index.html new file mode 100644 index 0000000..d60fced --- /dev/null +++ b/src/components/charts/bar-sign/index.html @@ -0,0 +1 @@ +
diff --git a/src/components/charts/bar-sign/index.js b/src/components/charts/bar-sign/index.js new file mode 100644 index 0000000..985236c --- /dev/null +++ b/src/components/charts/bar-sign/index.js @@ -0,0 +1,249 @@ +import * as echarts from 'echarts'; +import elementResizeDetectorMaker from 'element-resize-detector'; +export default { + props: { + id: { + type: String, + default: 'bar' + }, + data: { + type: Array, + default: function () { + return [ + { + name: '1月', + value: '10' + }, + { + name: '2月', + value: '19' + } + ]; + } + }, + + unit: { + type: String, + default: '单位：万元' + }, + color: { + type: Array, + default: function () { + return ['rgba(15, 252, 252, 1)', 'rgba(15, 252, 252, 0.04)'] + } + } + }, + data () { + return { + icon: require('./icon.png'), + chart: null + }; + }, + mounted () { + this.initChart(); + }, + computed: { + }, + methods: { + // 设置监听器 页面尺寸变化重新绘制图表 + initResizeCallBack () { + const erd = elementResizeDetectorMaker(); + erd.listenTo(document.getElementById(this.id), () => { + this.$nextTick(() => { + this.chart.resize(); + }); + }); + }, + initChart () { + this.chart = echarts.init(document.getElementById(this.id)); + this.chartSetOption(); + }, + chartSetOption () { + let xAxisData = []; + let data = []; + this.data.forEach(item => { + xAxisData.push(item.name) + data.push(item.value) + }); + const option = { + color: ["#3398DB"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "line", + lineStyle: { + opacity: 0, + }, + } + }, + legend: { + data: ["直接访问", "背景"], + show: false, + }, + grid: { + left: "0%", + right: "0%", + bottom: "5%", + top: "15%", + containLabel: true, + z: 22, + }, + xAxis: [ + { + splitArea: { + show: false, + areaStyle: { + color: ['RGBA(13, 31, 64, 1)'] + } + }, + splitLine: { + show: false, + lineStyle: { + color: ['rgba(18, 40, 83, 1)'], + width: 100 + } + }, + type: "category", + gridIndex: 0, + data: xAxisData, + axisTick: { + alignWithLabel: true, + }, + axisLine: { + lineStyle: { + color: "#0c3b71", + }, + }, + axisLabel: { + show: true, + color: 'rgba(185, 211, 235, 1)' + }, + }, + ], + yAxis: [ + { + type: "value", + name: this.unit, + nameTextStyle: { + color: 'rgba(185, 211, 235, 1)' + }, + axisLabel: { + formatter: "{value}", + textStyle: { + color: "rgba(185, 211, 235, 1)", + }, + }, + axisLine: { + lineStyle: { + color: "#27b4c2", + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: "#11366e", + }, + }, + }, + { + type: "value", + gridIndex: 0, + max: 100, + splitNumber: 12, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + } + }, + ], + series: [ + { + name: "合格率", + type: "bar", + barWidth: 2, + xAxisIndex: 0, + yAxisIndex: 0, + showBackground: false, + backgroundStyle: { + shadowBlur: 10, + color: 'rgba(18, 40, 83, 1)' + }, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: this.color[0], + }, + { + offset: 1, + color: this.color[1], + }, + ]), + }, + }, + data: data, + zlevel: 11, + }, + { + name: "合格率2", + type: "pictorialBar", + symbol: 'image://data:' + this.icon, + symbolSize: [20, 20], + symbolOffset: [0, -10], + barWidth: 20, + symbolPosition: 'end', + xAxisIndex: 0, + yAxisIndex: 0, + showBackground: false, + backgroundStyle: { + shadowBlur: 10, + color: 'rgba(18, 40, 83, 1)' + }, + data: data, + zlevel: 11, + }, + { + type: 'custom', + itemStyle: { + color: 'rgba(18, 40, 83, 0.4)' + }, + renderItem: function (params, api) { + //获取对应类目的axisTick中心点坐标 + var start = api.coord([api.value(0)]); + //通过坐标系的宽度和类目数，计算单个类目的背景 + var width = (params.coordSys.width / 7) * 0.6; + return { + type: 'rect', + shape: { + // 相对左上角坐标 + x: start[0] - width / 2, + y: params.coordSys.y, + width: width, + height: params.coordSys.height, + }, + style: api.style() + }; + }, + data: [100, 100, 100, 100, 100, 100, 100] + }, + + ], + };; + this.chart.setOption(option); + this.initResizeCallBack(); + + } + } +}; diff --git a/src/components/charts/bar-sign/index.scss b/src/components/charts/bar-sign/index.scss new file mode 100644 index 0000000..b89d9dc --- /dev/null +++ b/src/components/charts/bar-sign/index.scss @@ -0,0 +1,6 @@ +.chart { + overflow: visible; + width: 100%; + height: 100%; + z-index: 2; +} \ No newline at end of file diff --git a/src/components/charts/bar-sign/index.vue b/src/components/charts/bar-sign/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/charts/bar-sign/index.vue @@ -0,0 +1,3 @@ +