From dd17c0f4d7e28d52d5809f9a90c4c7b3113e689f Mon Sep 17 00:00:00 2001 From: jinna Date: Sun, 4 Feb 2024 17:48:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/HomeView.vue | 206 ++++++++++++++++++++++++----------------- vue.config.js | 4 +- 2 files changed, 121 insertions(+), 89 deletions(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 58e3255..ade45a5 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1897,7 +1897,7 @@ export default { top: "5%", left: "22%", // left: '30%', - right: this.isShowSubmit ? "15%" : "25%", + right: this.isShowSubmit ? "15%" : "24%", bottom: "3%", }, xAxis: { @@ -1953,52 +1953,52 @@ export default { }, }, }, - // { - // type: 'category', - // inverse: true, - // axisTick: { - // show: false - // }, - // axisLine: { - // show: false - // }, - // axisLabel: { - // show: true, - // inside: false, - // fontSize: 16, - // align:"right", - // color:"#fff", - // padding:this.isShowSubmit ? [50, -52, 0, 0] : [50, -40, 0, 0], - // formatter: function (value, index) { - // return value + '件' - // }, - // }, - // data: this.deptPh.map((item) => item.value), - // }, - // { - // type: 'category', - // inverse: true, - // axisTick: { - // show: false - // }, - // axisLine: { - // show: false - // }, - // axisLabel: { - // show: true, - // inside: false, - // formatter: function (value, index) { - // return '{b|' + value + '}'; - // }, - // rich: { - // b: { - // padding: [0, 0, 0, 50], fontSize: 16, - // color: "#33cdfb", - // } - // } - // }, - // data: this.deptPh.map((item) => item.resolveRate), - // }, + { + type: 'category', + inverse: true, + axisTick: { + show: false + }, + axisLine: { + show: false + }, + axisLabel: { + show: true, + inside: false, + fontSize: 16, + align:"right", + color:"#fff", + padding:this.isShowSubmit ? [50, -52, 0, 0] : [50, -40, 0, 0], + formatter: function (value, index) { + return value + '件' + }, + }, + data: this.deptPh.map((item) => item.value), + }, + { + type: 'category', + inverse: true, + axisTick: { + show: false + }, + axisLine: { + show: false + }, + axisLabel: { + show: true, + inside: false, + formatter: function (value, index) { + return '{b|' + value + '}'; + }, + rich: { + b: { + padding: [0, 0, 0, 50], fontSize: 16, + color: "#33cdfb", + } + } + }, + data: this.deptPh.map((item) => item.resolveRate), + }, ], dataZoom: [ //滑动条 @@ -2009,6 +2009,20 @@ export default { startValue: 0, // 从头开始。 endValue: 4, // 一次性展示6个。 }, + { + yAxisIndex: 1, //这里是从X轴的0刻度开始 + show: false, //是否显示滑动条，不影响使用 + type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 4, // 一次性展示6个。 + }, + { + yAxisIndex: 2, //这里是从X轴的0刻度开始 + show: false, //是否显示滑动条，不影响使用 + type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 + startValue: 0, // 从头开始。 + endValue: 4, // 一次性展示6个。 + }, ], series: [ { @@ -2044,47 +2058,47 @@ export default { barBorderRadius: [15, 15, 15, 15], }, }, - { - type: "bar", - barWidth: "13px", - barGap: "-113%", - itemStyle: { - normal: { - color: "transparent", - }, - }, - label: { - normal: { - show: true, - padding:this.isShowSubmit ? [0,0,0,-8] : [0, 0, 0, -15], - formatter: (series) => { - const item = series.data; - return `{num|${item.num > 10000 ? (item.num / 10000) + '万' : item.num}件}{per| ${item.per ? item.per : ''}}`; - }, - rich: { - num: { - width:60, - fontSize: 16, - color: "#FFFFFFFF", - align:'right', - // padding:[0, -20,0, 0] - // backgroundColor:'red' + // { + // type: "bar", + // barWidth: "13px", + // barGap: "-113%", + // itemStyle: { + // normal: { + // color: "transparent", + // }, + // }, + // label: { + // normal: { + // show: true, + // // padding:this.isShowSubmit ? [0,0,0,-5] : [0, 0, 0, -8], + // formatter: (series) => { + // const item = series.data; + // return `{num|${item.num > 10000 ? (item.num / 10000) + '万' : item.num}件}{per| ${item.per ? item.per : ''}}`; + // }, + // rich: { + // num: { + // width:45, + // fontSize: 16, + // color: "#FFFFFFFF", + // align:'right', + // // padding:this.isShowSubmit ? [0,-25,0,0] : [0, -20,0, 0], + // backgroundColor:'red' - }, - per: { - // width:45, - fontSize: 16, - color: "#33cdfb", - align:'right', - // backgroundColor:'green', - // padding:[0, 18,0, 3] - }, - }, - position: "right", - }, - }, - data: maxData, - }, + // }, + // per: { + // // width:45, + // fontSize: 16, + // color: "#33cdfb", + // align:'right', + // // backgroundColor:'green', + // // padding:[0, 18,0, 18] + // }, + // }, + // position: "right", + // }, + // }, + // data: maxData, + // }, // { // name: "外圆", // type: "scatter", @@ -2135,6 +2149,24 @@ export default { this.option.dataZoom[0].endValue + 1; this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1; + } + if (this.option.dataZoom[1].endValue == this.deptPh.length) { + this.option.dataZoom[1].endValue = 3; + this.option.dataZoom[1].startValue = 0; + } else { + this.option.dataZoom[1].endValue = + this.option.dataZoom[1].endValue + 1; + this.option.dataZoom[1].startValue = + this.option.dataZoom[1].startValue + 1; + } + if (this.option.dataZoom[2].endValue == this.deptPh.length) { + this.option.dataZoom[2].endValue = 3; + this.option.dataZoom[2].startValue = 0; + } else { + this.option.dataZoom[2].endValue = + this.option.dataZoom[2].endValue + 1; + this.option.dataZoom[2].startValue = + this.option.dataZoom[2].startValue + 1; } this.deptChart.setOption(this.option); }, 2000); diff --git a/vue.config.js b/vue.config.js index c40867d..e3759a9 100644 --- a/vue.config.js +++ b/vue.config.js @@ -12,9 +12,9 @@ module.exports = defineConfig({ "/api": { //本地服务接口地址 // target: 'http://localhost', - target: "http://192.168.1.106:80", // target: "http://192.168.1.106:80", - // target: "http://127.0.0.1:10000", + // target: "http://192.168.1.106:80", + target: "http://127.0.0.1:10000", // target: "http://tmpshop.cas-air.cn", //远程演示服务地址,可用于直接启动项目 //target: 'https://saber.bladex.vip/api',