echarts的滑块
This commit is contained in:
张宁
parent
228fd0a5c6
commit
4933e4b52d
|
|
@ -1,84 +1,97 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
const xData:Ref<any> = ref([])
|
||||
const yData:Ref<any> = ref([])
|
||||
const xData: Ref<any> = ref([])
|
||||
const yData: Ref<any> = ref([])
|
||||
const zoomIndex = computed(() => {
|
||||
return (7 / xData.value.length)?.toFixed(1) as any * 100 || 0
|
||||
})
|
||||
const showZoom = computed(() => {
|
||||
return xData.value.length > 7
|
||||
})
|
||||
const option = reactive({
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: true, // 是否留白，从原点开始
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontWeight: "500",
|
||||
formatter: function (value:any) {
|
||||
return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
|
||||
},
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: true, // 是否留白，从原点开始
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontWeight: "500",
|
||||
formatter: function (value: any) {
|
||||
return value.substring(0, 3) + '..'; // 取每个字符串的前三个字符
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: false,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "0px",
|
||||
top: "20px",
|
||||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
// 添加 dataZoom 组件来启用滚动条
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider', // 这里是滑块型数据区域缩放组件
|
||||
show: true, // 是否显示滑块
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 100, // 数据窗口范围的结束百分比
|
||||
handleSize: 10, // 滑块的大小
|
||||
height: 10, // 滑块组件的高度
|
||||
xAxisIndex: [0], // 控制哪个x轴
|
||||
filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
|
||||
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "bar",
|
||||
smooth: false,
|
||||
name: "已报到人数",
|
||||
color: "#2265ff",
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
color: '#999',
|
||||
fontSize: 12,
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: false,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "0px",
|
||||
top: "20px",
|
||||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
// 添加 dataZoom 组件来启用滚动条
|
||||
/* dataZoom: [
|
||||
{
|
||||
type: 'slider', // 这里是滑块型数据区域缩放组件
|
||||
show: true, // 是否显示滑块
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 50, // 数据窗口范围的结束百分比
|
||||
handleSize: 10, // 滑块的大小
|
||||
height: 10, // 滑块组件的高度
|
||||
xAxisIndex: [0], // 控制哪个x轴
|
||||
filterMode: 'empty', // 数据过滤模式，'empty'表示空数据不显示
|
||||
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
], */
|
||||
// 只有当数据超过七条时才添加 dataZoom 配置
|
||||
dataZoom: [{
|
||||
show: showZoom,
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: zoomIndex
|
||||
}], // 如果不需要 dataZoom，则设置为 null
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "bar",
|
||||
smooth: false,
|
||||
name: "已报到人数",
|
||||
color: "#2265ff",
|
||||
label: {
|
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
color: '#999',
|
||||
fontSize: 12,
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
}
|
||||
],
|
||||
});
|
||||
const getData = (params: any) => {
|
||||
let dateList = params.map((el: any) => el.professionalName)
|
||||
let numList = params.map((el: any) => el.reportNumber)
|
||||
setOption(dateList, numList)
|
||||
|
||||
};
|
||||
const setOption = async (x: any[], y: any[]) => {
|
||||
const setOption = (x: any[], y: any[]) => {
|
||||
// console.log(x, y);
|
||||
xData.value = x
|
||||
yData.value = y
|
||||
|
|
|
|||
|
|
@ -36,6 +36,12 @@ const getData = () => {
|
|||
setOption(tabs.value[0].dateList, tabs.value[0].numList)
|
||||
};
|
||||
const setOption = async (xData: any[], yData: any[]) => {
|
||||
const zoomIndex = computed(() => {
|
||||
return (12 / xData.length)?.toFixed(1) as any * 100 || 0
|
||||
})
|
||||
const showZoom = computed(() => {
|
||||
return xData.length > 12
|
||||
})
|
||||
option.value = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
|
|
@ -111,24 +117,31 @@ const setOption = async (xData: any[], yData: any[]) => {
|
|||
containLabel: true,
|
||||
// borderColor: "#1F63A3",
|
||||
},
|
||||
// 添加 dataZoom 组件来启用滚动条
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider', // 这里是滑块型数据区域缩放组件
|
||||
show: true, // 是否显示滑块
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 100, // 数据窗口范围的结束百分比
|
||||
handleSize: 10, // 滑块的大小
|
||||
height: 15, // 滑块组件的高度
|
||||
xAxisIndex: [0], // 控制哪个x轴
|
||||
filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
// 添加 dataZoom 组件来启用滚动条
|
||||
/* dataZoom: [
|
||||
{
|
||||
type: 'slider', // 这里是滑块型数据区域缩放组件
|
||||
show: true, // 是否显示滑块
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 100, // 数据窗口范围的结束百分比
|
||||
handleSize: 10, // 滑块的大小
|
||||
height: 15, // 滑块组件的高度
|
||||
xAxisIndex: [0], // 控制哪个x轴
|
||||
filterMode: 'empty' // 数据过滤模式，'empty'表示空数据不显示
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型数据区域缩放，即鼠标滚轮缩放
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
], */
|
||||
// 只有当数据超过七条时才添加 dataZoom 配置
|
||||
dataZoom: [{
|
||||
show: showZoom,
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: zoomIndex
|
||||
}], // 如果不需要 dataZoom，则设置为 null
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
|
|
|
|||
Loading…
Reference in New Issue