209 lines
4.8 KiB
Vue
209 lines
4.8 KiB
Vue
<template>
|
|
<div ref="chartRef" class="my-chart" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
|
|
// import echarts from './echarts'
|
|
import * as echarts from 'echarts'; // 全引入
|
|
|
|
import 'echarts/lib/component/dataZoom'
|
|
|
|
const chartRef = ref<HTMLDivElement>()
|
|
|
|
const props = defineProps(['options'])
|
|
let chart: echarts.ECharts | any = null
|
|
const resizeHandler = () => {
|
|
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
|
requestAnimationFrame(() => {
|
|
chart.resize()
|
|
chart.getZr().painter.getViewportRoot().style.display = ''
|
|
})
|
|
}
|
|
const initChart = () => {
|
|
chart?.dispose()
|
|
|
|
chart = echarts.init(chartRef.value as HTMLDivElement)
|
|
chart.setOption({
|
|
title: {
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#000',
|
|
fontSize: 18
|
|
},
|
|
...(props.options.title || null)
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontStyle: 'normal',
|
|
opacity: 0.35,
|
|
fontSize: 14
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
borderWidth: 0,
|
|
...(props.options.tooltip || null)
|
|
},
|
|
legend: {
|
|
right: 20,
|
|
top: 0,
|
|
itemGap: 10,
|
|
itemStyle: {},
|
|
textStyle: {
|
|
fontSize: 12,
|
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 10,
|
|
...(props.options.legend || null)
|
|
},
|
|
|
|
grid: {
|
|
top: '50px',
|
|
left: '10px',
|
|
right: '60px',
|
|
bottom: '40px',
|
|
containLabel: true
|
|
},
|
|
xAxis: handlerXAxis(),
|
|
yAxis: handlerYAxis(),
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
height: 13,
|
|
start: 0,
|
|
bottom: '20px',
|
|
end: 100,
|
|
...(props.options.dataZoom || null)
|
|
},
|
|
{
|
|
start: 0,
|
|
height: 13,
|
|
bottom: '20px',
|
|
end: 100,
|
|
...(props.options.dataZoom || null)
|
|
}
|
|
],
|
|
color: [
|
|
...(props.options.color || ''),
|
|
'#07CCCA ',
|
|
'#00BFF5',
|
|
'#FFBF00',
|
|
'#77DA63',
|
|
'#D5FF6B',
|
|
'#Ff6600',
|
|
'#FF9100',
|
|
'#5B6E96',
|
|
'#66FFCC',
|
|
'#B3B3B3'
|
|
],
|
|
...props.options.options
|
|
})
|
|
}
|
|
const handlerYAxis = () => {
|
|
let temp = {
|
|
type: 'value',
|
|
|
|
nameTextStyle: {
|
|
color: '#000'
|
|
},
|
|
minInterval: 1,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#000'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#000',
|
|
fontSize: 14
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: ['#000'],
|
|
type: 'dashed',
|
|
opacity: 0.5
|
|
}
|
|
}
|
|
}
|
|
// props.options.xAxis 是数组还是对象
|
|
if (Array.isArray(props.options.yAxis)) {
|
|
return props.options.yAxis.map((item: any) => {
|
|
return {
|
|
...item,
|
|
...temp
|
|
}
|
|
})
|
|
} else {
|
|
return {
|
|
...props.options.yAxis,
|
|
...temp
|
|
}
|
|
}
|
|
}
|
|
const handlerXAxis = () => {
|
|
let temp = {
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontFamily: 'dinproRegular',
|
|
color: '#000',
|
|
fontSize: '12'
|
|
}
|
|
}
|
|
}
|
|
// props.options.xAxis 是数组还是对象
|
|
if (Array.isArray(props.options.xAxis)) {
|
|
return props.options.xAxis.map((item: any) => {
|
|
return {
|
|
...item,
|
|
...temp
|
|
}
|
|
})
|
|
} else {
|
|
return {
|
|
...props.options.xAxis,
|
|
...temp
|
|
}
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
initChart()
|
|
window.addEventListener('resize', resizeHandler)
|
|
})
|
|
defineExpose({ initChart })
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', resizeHandler)
|
|
chart?.dispose()
|
|
})
|
|
watch(
|
|
() => props.options,
|
|
(newVal, oldVal) => {
|
|
initChart()
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-chart {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|