fuguobin
1 year ago
@ -0,0 +1,136 @@ |
|||
<template> |
|||
<div id="demo"></div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import * as echart from 'echarts'; |
|||
import { onMounted, ref } from 'vue'; |
|||
|
|||
const start = ref(7); |
|||
const end = ref(9); |
|||
|
|||
onMounted(() => { |
|||
const myChart = echart.init(document.getElementById('demo')); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid: { |
|||
top: 50, |
|||
bottom: 50, |
|||
right: 30 |
|||
}, |
|||
toolbox: { |
|||
show: true, // 是否显示 |
|||
orient: 'horizontal', // 方向 |
|||
itemSize: 15, // 图标大小 |
|||
itemGap: 8, // 间隔 |
|||
showTitle: true, // 鼠标悬浮时是否显示标题 |
|||
feature: { |
|||
// 工具配置 |
|||
myLeft: { |
|||
show: true, |
|||
title: '上一个', |
|||
icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z', |
|||
onclick: () => { |
|||
if (end.value < 9) { |
|||
start.value += 1; |
|||
end.value += 1; |
|||
} |
|||
myChart.dispatchAction({ |
|||
type: 'dataZoom', |
|||
// 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0 |
|||
dataZoomIndex: 0, |
|||
// 开始位置的数值 |
|||
startValue: start.value, |
|||
// 结束位置的数值 |
|||
endValue: end.value |
|||
}); |
|||
} |
|||
}, |
|||
myRight: { |
|||
show: true, |
|||
title: '下一个', |
|||
icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z', |
|||
onclick: () => { |
|||
if (start.value > 0) { |
|||
start.value -= 1; |
|||
end.value -= 1; |
|||
} |
|||
myChart.dispatchAction({ |
|||
type: 'dataZoom', |
|||
// 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0 |
|||
dataZoomIndex: 0, |
|||
// 开始位置的数值 |
|||
startValue: start.value, |
|||
// 结束位置的数值 |
|||
endValue: end.value |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
iconStyle: { |
|||
// 图标样式 |
|||
color: '#869AD7' |
|||
}, |
|||
right: 3 |
|||
}, |
|||
xAxis: { |
|||
type: 'value', |
|||
splitLine: { |
|||
lineStyle: { |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one'] |
|||
}, |
|||
// 设置滑块 |
|||
dataZoom: [ |
|||
{ |
|||
// 是否显示滑块 |
|||
show: true, |
|||
// 那一条y轴的滑块 |
|||
yAxisIndex: 0, |
|||
// 当前数据窗口外的数据，被 设置为空 |
|||
filterMode: 'empty', |
|||
// 滑块的宽高 |
|||
width: 15, |
|||
height: '70%', |
|||
// 滚动条內空白显示 |
|||
showDataShadow: false, |
|||
// 滑块的位置 |
|||
left: '95%', |
|||
// 起始位置 类目轴表示下标 |
|||
startValue: 10, |
|||
// 结束位置 |
|||
endValue: 8, |
|||
// 锁定选择区域的大小 最多显示3个类目 |
|||
zoomLock: true |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: 'Cost', |
|||
type: 'bar', |
|||
data: [12, 23, 34, 56, 43, 67, 89, 90, 76, 29] |
|||
} |
|||
] |
|||
}; |
|||
myChart.setOption(option); |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
#demo { |
|||
width: 600px; |
|||
height: 300px; |
|||
border: 1px solid red; |
|||
padding-right: 30px; |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 6.1 MiB |
|
After Width: | Height: | Size: 6.3 MiB |
|
After Width: | Height: | Size: 6.4 MiB |
|
After Width: | Height: | Size: 5.7 MiB |
|
After Width: | Height: | Size: 6.1 MiB |
|
After Width: | Height: | Size: 6.6 MiB |
|
After Width: | Height: | Size: 947 KiB |
|
After Width: | Height: | Size: 948 KiB |
|
After Width: | Height: | Size: 6.6 MiB |