89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<template>
|
|
<div ref="chartRef" class="my-chart" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import echarts from './echarts'
|
|
import 'echarts/lib/component/dataZoom'
|
|
|
|
const props = defineProps(['options'])
|
|
const chartRef = ref<HTMLDivElement>()
|
|
let chart: echarts.ECharts | null = null
|
|
const resizeHandler = () => {
|
|
chart?.resize()
|
|
}
|
|
const initChart = () => {
|
|
chart = echarts.init(chartRef.value as HTMLDivElement)
|
|
chart.setOption({
|
|
tooltip: {
|
|
showContent: true,
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(8,36,68,.7)',
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
color: '#ffff',
|
|
textStyle: {
|
|
color: '#ffff'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '30px',
|
|
left: '40px',
|
|
right: '40px',
|
|
bottom: '40px',
|
|
|
|
containLabel: true
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
height: 13,
|
|
start: 0,
|
|
bottom: '20px',
|
|
end: 100
|
|
},
|
|
{
|
|
start: 0,
|
|
height: 13,
|
|
bottom: '20px',
|
|
end: 100
|
|
}
|
|
],
|
|
color: [
|
|
'#07CCCA ',
|
|
'#00BFF5',
|
|
'#FFBF00',
|
|
'#77DA63',
|
|
'#D5FF6B',
|
|
'#Ff6600',
|
|
'#FF9100',
|
|
'#5B6E96',
|
|
'#66FFCC',
|
|
'#B3B3B3'
|
|
],
|
|
...props.options
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
initChart()
|
|
}, 20)
|
|
window.addEventListener('resize', resizeHandler)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', resizeHandler)
|
|
chart?.dispose()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-chart {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|