huanzi-vue/src/components/chart/LineMulti.vue

137 lines
4.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
name: 'LineMulti',
props: {
chartData: {
type: Array,
default: () => [],
required: true,
},
option: {
type: Object,
default: () => ({}),
},
type: {
type: String as PropType<string>,
default: 'line',
},
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: 'calc(100vh - 78px)',
},
seriesLabel: {
type: Object,
default: () => ({show: false, position: 'top'}),
},
seriesName: {
type: String as PropType<string>,
default: 'bar',
},
grid: {
type: Object,
default: () => ({
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}),
},
seriesLabel: {
type: Object,
default: () => ({show: false, position: 'top'}),
},
},
emits: ['click'],
setup(props, { emit }) {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
const option = reactive({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333',
},
},
},
legend: {
top: 30,
},
grid: props.grid,
xAxis: {
type: 'category',
data: [],
},
yAxis: {
type: 'value',
},
series: [],
});
watchEffect(() => {
props.chartData && initCharts();
});
function initCharts() {
if (props.option) {
Object.assign(option, cloneDeep(props.option));
}
//图例类型
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
//轴数据
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
let seriesData = [];
typeArr.forEach((type) => {
let obj: any = { name: type, type: props.type };
// update-begin--author:liaozhiyang---date:20240407---for【QQYUN-8762】首页默认及echars颜色调整
const findItem: any = props.chartData.find((item: any) => item.type == type);
if (findItem && findItem.color) {
obj.color = findItem.color;
}
obj.label = props.seriesLabel;
// update-end--author:liaozhiyang---date:20240407---for【QQYUN-8762】首页默认及echars颜色调整
// update-begin-author:liusq date:2023-7-12 for: [issues/613] LineMulti 在数据不对齐时,横坐标计算错误
let data = [];
xAxisData.forEach((x) => {
let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
if (dataArr && dataArr.length > 0) {
data.push(dataArr[0].value);
} else {
data.push(null);
}
});
// update-end-author:liusq date:2023-7-12 for: [issues/613] LineMulti 在数据不对齐时,横坐标计算错误
//data数据
obj['data'] = data;
seriesData.push(obj);
});
option.series = seriesData;
option.xAxis.data = xAxisData;
console.log('option', option);
setOptions(option);
getInstance()?.off('click', onClick);
getInstance()?.on('click', onClick);
}
function onClick(params) {
emit('click', params);
}
return { chartRef };
},
});
</script>