From c16845a79f194979caf31786d963edb2bb4ff9ce Mon Sep 17 00:00:00 2001 From: yuzongping <835949940@qq.com> Date: Mon, 9 Jun 2025 15:05:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E9=87=91=E5=BE=80=E6=9D=A5=E6=95=8F?= =?UTF-8?q?=E6=84=9F=E8=AF=8D=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/index.html | 1 + src/components/charts/bar/index.js | 229 ++++++++++++++++++ src/components/charts/bar/index.scss | 6 + src/components/charts/bar/index.vue | 3 + .../capital/comps/left/middle/2/index.html | 12 +- .../capital/comps/left/middle/2/index.js | 8 +- .../capital/comps/left/middle/2/index.scss | 17 ++ src/views/capital/comps/left/top/2/index.html | 4 +- src/views/capital/comps/left/top/2/index.js | 2 + src/views/capital/data.js | 4 +- src/views/capital/index.js | 4 + 11 files changed, 283 insertions(+), 7 deletions(-) create mode 100644 src/components/charts/bar/index.html create mode 100644 src/components/charts/bar/index.js create mode 100644 src/components/charts/bar/index.scss create mode 100644 src/components/charts/bar/index.vue diff --git a/src/components/charts/bar/index.html b/src/components/charts/bar/index.html new file mode 100644 index 0000000..d60fced --- /dev/null +++ b/src/components/charts/bar/index.html @@ -0,0 +1 @@ +
diff --git a/src/components/charts/bar/index.js b/src/components/charts/bar/index.js new file mode 100644 index 0000000..cf4da97 --- /dev/null +++ b/src/components/charts/bar/index.js @@ -0,0 +1,229 @@ +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(53, 197, 124, 1)'] + } + } + }, + data () { + return { + 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: 15, + 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, + }, + { + 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/index.scss b/src/components/charts/bar/index.scss new file mode 100644 index 0000000..b89d9dc --- /dev/null +++ b/src/components/charts/bar/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/index.vue b/src/components/charts/bar/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/charts/bar/index.vue @@ -0,0 +1,3 @@ +