opt_web/src/views/customers-voice/components/show-detail/components/LineChart.vue

<script lang="ts" setup>
/**
 * @Name: LineChart.vue
 * @Description: 买家之声-详情页-折线图
 * @Author: xinyan
 */

import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { getChartData } from '/@/views/customers-voice/api';

const props: any = defineProps({
	rowData: Object,
});
const { rowData } = props;

const week = ref('8');

let chartObj: any;
const chartRef = ref(null);
const loading = ref(false);

// 初始化 ECharts 图表
onMounted(() => {
	addResize();
	initLine();
});

// 组件卸载前清理
onBeforeUnmount(() => {
	if (chartObj) {
		chartObj.dispose();
		chartObj = null;
	}
	removeResize();
});

// ECharts 配置项
const option: any = {
	// dataset: {
	// 	dimensions: ['date', 'ncx_rate'],
	// 	source: chartData.value,
	// },
	// title: {
	// 	left: '-0.2%',
	// 	text: '每月平均评分',
	// 	textStyle: {
	// 		fontSize: '16px',
	// 		fontWeight: '500',
	// 	},
	// },
	tooltip: {
		trigger: 'axis',
		formatter: (params) => {
			// console.log(params);
			let relVal =  params[0].name;
			for (let i = 0, l = params.length; i < l; i++) {
				relVal += '<br/>' + params[i].marker + ' ' + params[i].seriesName + ' ' + (params[i].value * 100).toFixed(2) + ' %'; // 修正为 toFixed
			}
			return relVal;
		},
	},
	// legend: {
	// 	top: '10%',
	// 	align: 'right',
	// },
	grid: {
		top: '18%',
		left: '5%',
		right: '5%',
		bottom: '5%',
		containLabel: true,
	},
	xAxis: {
		type: 'category',
		data: [],
	},
	yAxis: [
		{
			type: 'value',
			name: 'NCX Rate',
			position: 'left',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#70b6e3',
				},
			},
			axisLabel: {
				formatter: function (value) {
					return (value * 100).toFixed(2)+  ' %'; // 将值乘以100并保留两位小数
				},
			},
		},
	],
	series: [
		{
			id: 0,
			name: '28 天平均值',
			type: 'line',
			yAxisIndex: 0,
			itemStyle: {
				color: '#70b6e3', //改变折线点的颜色
				lineStyle: {
					color: '#70b6e3', //改变折线颜色
				},
			},
			data: [],
		},
	],
};

// 初始化 ECharts 图表的函数
async function initLine() {
	await loadData();
	chartObj = echarts.init(chartRef.value);
	chartObj.setOption(option, true);
}

// 加载数据
async function loadData() {
	try {
		loading.value = true;
		const query = {
			asin: rowData.asin,
			week: week.value,
			sku: rowData.sku,
			channel: rowData.fulfillment_channel,
		};
		const res = await getChartData(query);
		if (res.code === 2000 && res.data) {
			option.xAxis.data = res.data.map((item) => item.date);
			option.series[0].data = res.data.map((item) => item.ncx_rate);
		}
	} catch (e) {
		ElMessage.error('加载数据失败，请稍后再试');
	} finally {
		loading.value = false;
	}
}

// 处理窗口大小变化
function resizeChart() {
	chartObj.resize();
}

// 添加窗口大小变化事件监听
function addResize() {
	window.addEventListener('resize', resizeChart);
}

// 移除窗口大小变化事件监听
function removeResize() {
	window.removeEventListener('resize', resizeChart);
}
</script>

<template>
	<el-card v-loading="loading" class="border-none mt-5" shadow="hover">
		<!--<div class=" flex items-center">-->
			<span class="font-semibold italic mr-2">时间范围:</span>
			<el-select v-model="week" style="width: 100px" @change="initLine">
				<el-option label="一周" value="1"></el-option>
				<el-option label="两周" value="2"></el-option>
				<el-option label="四周" value="4"></el-option>
				<el-option label="六周" value="6"></el-option>
				<el-option label="八周" value="8"></el-option>
				<el-option label="十二周" value="12"></el-option>
			</el-select>
		<!--</div>-->
		<!-- 图表区域 -->
		<div ref="chartRef" style="width: 100%; height: 500px; background: #fff"></div>
	</el-card>
</template>

<style scoped></style>