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 |