fuguobin
1 year ago
8 changed files with 1606 additions and 234 deletions
File diff suppressed because it is too large
@ -1,136 +0,0 @@ |
|||||
<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> |
|
||||
Loading…
Reference in new issue