From 1645d0ac18013a34bbcf89ad71cfbfc57194b6f8 Mon Sep 17 00:00:00 2001 From: duanxiaohai <1812246227@qq.com> Date: Tue, 16 Apr 2024 13:30:03 +0800 Subject: [PATCH] gx --- src/view/echarts/ylXZZC.vue | 90 +++++++++++++++++++++++-------------- src/view/yl.vue | 12 +++-- 2 files changed, 62 insertions(+), 40 deletions(-) diff --git a/src/view/echarts/ylXZZC.vue b/src/view/echarts/ylXZZC.vue index e94853c..d0d60f7 100644 --- a/src/view/echarts/ylXZZC.vue +++ b/src/view/echarts/ylXZZC.vue @@ -13,7 +13,7 @@ import * as echarts from "echarts"; const chart = ref(null); // 创建DOM引用 const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"]; -const datas = ["2", "4", "7", " 23", "25", "250"]; +const datas = ["8", "10", "7", " 23", "25", "250"]; let zoomShow = true; // if (data.length > 7) { @@ -38,37 +38,56 @@ let option = { containLabel: true, color: "#ffffff", }, + // dataZoom: [ + // {//在内部可以纵向拖动 + // show: zoomShow, + // type: "inside", + // startValue: 0, + // endValue: 2, + // minValueSpan: 2, + // maxValueSpan: 2, + // yAxisIndex: [0], + // zoomOnMouseWheel: false, // 关闭滚轮缩放 + // moveOnMouseWheel: true, // 开启滚轮平移 + // moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移 + // }, + // { //纵向使用滚动条 + // show: zoomShow, + // type: "slider", + // realtime: true, + // startValue: 0, + // endValue: 2, + // width: "3.5", + // height: "80%", + // yAxisIndex: [0], // 控制y轴滚动 + // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色 + // borderColor: "rgba(17, 100, 210, 0.12)", + // backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色 + // handleSize: 0, // 两边手柄尺寸 + // showDataShadow: false, //是否显示数据阴影 默认auto + // showDetail: false, // 拖拽时是否展示滚动条两侧的文字 + // top: "1%", + // right: "5",//距离右侧的距离 + // }, + // ], dataZoom: [ - { - show: zoomShow, - type: "inside", - startValue: 0, - endValue: 2, - minValueSpan: 2, - maxValueSpan: 2, - yAxisIndex: [0], + {//纵向使用滚动条 + id: "dataZoomY", + type: "slider", + yAxisIndex: [0],// 控制y轴滚动 + filterMode: "empty",//数据过滤,只改变数轴范围。 + width: "10", + height: "100%", + right: "3%",//距离右侧的距离 + orient: "vertical" ,//布局方式是横还是竖 'horizontal'：水平。'vertical'：竖直。 + // zoomLock: true, //不能缩放 + start: 0,//开始 数据窗口范围的,范围是：0 ~ 100 + end: 70,//结束 + handleSize: 8, zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移 }, - { - show: zoomShow, - type: "slider", - realtime: true, - startValue: 0, - endValue: 2, - width: "3.5", - height: "80%", - yAxisIndex: [0], // 控制y轴滚动 - fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色 - borderColor: "rgba(17, 100, 210, 0.12)", - backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色 - handleSize: 0, // 两边手柄尺寸 - showDataShadow: false, //是否显示数据阴影 默认auto - showDetail: false, // 拖拽时是否展示滚动条两侧的文字 - top: "1%", - right: "5", - }, ], calculable: true, xAxis: { @@ -98,6 +117,11 @@ let option = { width: 1, }, }, + axisPointer: { + label: { + autoSplitNumber: 5, + }, + }, }, yAxis: { type: "category", //横向显示 @@ -106,7 +130,7 @@ let option = { //y轴文字的配置 axisLabel: { inside: false, - bargap: 0.5, // 设置固定的间隔 + // bargap: 0.5, // 设置固定的间隔 textStyle: { color: "#ffffff", }, @@ -121,11 +145,11 @@ let option = { }, }, // 开启滚动 - scrollbar: { - orient: "vertical", - // 设置滚动区域的高度 - height: 100, - }, + // scrollbar: { + // orient: "vertical", + // // 设置滚动区域的高度 + // height: 100, + // }, //分割线配置 splitLine: { show: false, diff --git a/src/view/yl.vue b/src/view/yl.vue index 50650a6..0f33691 100644 --- a/src/view/yl.vue +++ b/src/view/yl.vue @@ -31,8 +31,8 @@ -
-
+
+
-
+
- - -
@@ -474,9 +471,10 @@ const change = (name, index) => { } .history { - padding-top: 12px; + height: calc(100% - 36px); display: flex; justify-content: space-around; + align-items: center; .history1 { font-size: 26px; color: #ffffff;