323 lines
9.5 KiB
Vue
323 lines
9.5 KiB
Vue
<template>
|
||
<div class="chart">
|
||
<div ref="chartRef" class="my-chart" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||
// import echarts from './echarts'
|
||
import * as echarts from 'echarts' // 全引入
|
||
import 'echarts-gl'
|
||
import 'echarts-liquidfill'
|
||
import 'echarts/lib/component/dataZoom'
|
||
import { color, gradeColor3 } from './color'
|
||
import { useConfig } from '@/stores/config'
|
||
const config = useConfig()
|
||
// import { nextTick } from 'process'
|
||
const emit = defineEmits(['triggerPoint', 'group'])
|
||
color[0] = config.layout.elementUiPrimary[0]
|
||
const chartRef = ref<HTMLDivElement>()
|
||
|
||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||
let chart: echarts.ECharts | any = null
|
||
const resizeHandler = () => {
|
||
// 不在视野中的时候不进行resize
|
||
if (!chartRef.value) return
|
||
if (chartRef.value.offsetHeight == 0) return
|
||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||
requestAnimationFrame(() => {
|
||
chart.resize()
|
||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||
})
|
||
}
|
||
const initChart = () => {
|
||
if (!props.isInterVal && !props.pieInterVal) {
|
||
chart?.dispose()
|
||
}
|
||
// chart?.dispose()
|
||
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
||
const options = {
|
||
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.55)',
|
||
borderWidth: 0,
|
||
confine: true,
|
||
formatter: function (params: any) {
|
||
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
|
||
params?.forEach((item: any) => {
|
||
const value =
|
||
item.value === 3.14159 || item.value === 0.14159
|
||
? '暂无数据'
|
||
: Math.round(item.value * 100) / 100 // 处理特殊值
|
||
tips += `<div style=" display: flex;justify-content: space-between;">
|
||
<span>${item.marker}
|
||
${item.seriesName}:
|
||
</span> ${value}
|
||
</div>` // 统一格式
|
||
})
|
||
return tips
|
||
},
|
||
...(props.options?.tooltip || null)
|
||
},
|
||
toolbox: {
|
||
right: 20,
|
||
top: 15,
|
||
feature: {
|
||
saveAsImage: {
|
||
title: '', // 按钮标题
|
||
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
|
||
},
|
||
|
||
...(props.options?.toolbox?.featureProps || null)
|
||
},
|
||
emphasis: {
|
||
iconStyle: {
|
||
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
||
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
||
}
|
||
},
|
||
// },
|
||
...(props.options?.toolbox || null)
|
||
},
|
||
legend: {
|
||
right: 50,
|
||
top: 25,
|
||
itemGap: 10,
|
||
itemStyle: {},
|
||
// textStyle: {
|
||
fontSize: 12,
|
||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||
// },
|
||
itemWidth: 15,
|
||
itemHeight: 10,
|
||
...(props.options?.legend || null)
|
||
},
|
||
grid: {
|
||
top: '50px',
|
||
left: '30px',
|
||
right: '70px',
|
||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||
containLabel: true,
|
||
...(props.options?.grid || null)
|
||
},
|
||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||
dataZoom: props.options?.dataZoom || [
|
||
{
|
||
type: 'inside',
|
||
height: 13,
|
||
start: 0,
|
||
bottom: '20px',
|
||
end: 100
|
||
},
|
||
{
|
||
start: 0,
|
||
height: 13,
|
||
bottom: '20px',
|
||
end: 100
|
||
}
|
||
],
|
||
color: props.options?.color || color,
|
||
series: props.options?.series,
|
||
...props.options?.options
|
||
}
|
||
// console.log(options.series,"获取x轴");
|
||
handlerBar(options)
|
||
// 处理柱状图
|
||
chart.setOption(options, true)
|
||
// chart.group = 'group'
|
||
emit('group', chart, chartRef.value)
|
||
// 添加点击事件
|
||
chart.on('click', function (params) {
|
||
if (params.seriesName == '暂态触发点') {
|
||
emit('triggerPoint', params.data)
|
||
}
|
||
})
|
||
|
||
setTimeout(() => {
|
||
chart.resize()
|
||
}, 0)
|
||
}
|
||
const handlerBar = (options: any) => {
|
||
if (Array.isArray(options.series)) {
|
||
options.series.forEach((item: any) => {
|
||
if (item.type === 'bar') {
|
||
item.barMinHeight = 10
|
||
item.barMaxWidth = 20
|
||
item.itemStyle = Object.assign(
|
||
{
|
||
color: (params: any) => {
|
||
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
||
return '#ccc'
|
||
} else {
|
||
return props.options?.color
|
||
? props.options?.color[params.seriesIndex]
|
||
: color[params.seriesIndex]
|
||
}
|
||
}
|
||
},
|
||
item.itemStyle
|
||
)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
const handlerYAxis = () => {
|
||
let temp = {
|
||
type: 'value',
|
||
nameGap: 15,
|
||
nameTextStyle: {
|
||
color: '#000'
|
||
},
|
||
splitNumber: 5,
|
||
minInterval: 1,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#000'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#000',
|
||
fontSize: 14,
|
||
formatter: function (value) {
|
||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ['#ccc'],
|
||
type: 'dashed',
|
||
opacity: 0.5
|
||
}
|
||
}
|
||
}
|
||
// props.options?.xAxis 是数组还是对象
|
||
if (Array.isArray(props.options?.yAxis)) {
|
||
return props.options?.yAxis.map((item: any) => {
|
||
return {
|
||
...temp,
|
||
...item
|
||
}
|
||
})
|
||
} else {
|
||
return {
|
||
...temp,
|
||
...props.options?.yAxis
|
||
}
|
||
}
|
||
}
|
||
const handlerXAxis = () => {
|
||
let temp = {
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
nameTextStyle: {
|
||
color: '#000'
|
||
},
|
||
axisLine: {
|
||
// lineStyle: {
|
||
color: '#000'
|
||
// }
|
||
},
|
||
axisLabel: {
|
||
// textStyle: {
|
||
fontFamily: 'dinproRegular',
|
||
color: '#000',
|
||
fontSize: '12'
|
||
// }
|
||
}
|
||
// boundaryGap: false,
|
||
}
|
||
// props.options?.xAxis 是数组还是对象
|
||
if (Array.isArray(props.options?.xAxis)) {
|
||
return props.options?.xAxis.map((item: any) => {
|
||
return {
|
||
...temp,
|
||
...item
|
||
}
|
||
})
|
||
} else {
|
||
return {
|
||
...temp,
|
||
...props.options?.xAxis
|
||
}
|
||
}
|
||
}
|
||
|
||
let throttle: ReturnType<typeof setTimeout>
|
||
// 动态计算table高度
|
||
const resizeObserver = new ResizeObserver(entries => {
|
||
for (const entry of entries) {
|
||
if (throttle) {
|
||
clearTimeout(throttle)
|
||
}
|
||
throttle = setTimeout(() => {
|
||
resizeHandler()
|
||
}, 100)
|
||
}
|
||
})
|
||
const setOptions = (options: any) => {
|
||
chart.setOption(options)
|
||
}
|
||
const getChart = () => {
|
||
return chart
|
||
}
|
||
onMounted(() => {
|
||
initChart()
|
||
resizeObserver.observe(chartRef.value!)
|
||
})
|
||
defineExpose({ initChart, setOptions, getChart })
|
||
onBeforeUnmount(() => {
|
||
resizeObserver.unobserve(chartRef.value!)
|
||
chart?.dispose()
|
||
})
|
||
watch(
|
||
() => props.options,
|
||
(newVal, oldVal) => {
|
||
initChart()
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
.el-button {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: -60px;
|
||
}
|
||
|
||
.my-chart {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|