|
@@ -4,15 +4,210 @@
|
|
* @Description: 负面标签分类
|
|
* @Description: 负面标签分类
|
|
* @Author: Cheney
|
|
* @Author: Cheney
|
|
*/
|
|
*/
|
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
+import { useResponse } from '/@/utils/useResponse';
|
|
|
|
+import * as api from '/@/views/product-manage/comment-detail/api';
|
|
|
|
|
|
|
|
+
|
|
|
|
+const props = defineProps({
|
|
|
|
+ asin: String
|
|
|
|
+});
|
|
|
|
+const { asin } = props;
|
|
|
|
+
|
|
|
|
+let chartRef: any = useTemplateRef('chartRef');
|
|
|
|
+let chart: echarts.ECharts | null = null;
|
|
|
|
+let chartData: any = ref([]);
|
|
|
|
+
|
|
|
|
+let resizeObserver: ResizeObserver | null = null;
|
|
|
|
+
|
|
|
|
+let lineChartRef: any = useTemplateRef('lineChartRef');
|
|
|
|
+let lineChart: echarts.ECharts | null = null;
|
|
|
|
+let lineChartData: any = ref([]);
|
|
|
|
+
|
|
|
|
+onBeforeMount(() => {
|
|
|
|
+ fetchChartData();
|
|
|
|
+ fetchLineChartData();
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ initChart();
|
|
|
|
+ initLineChart();
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+onUnmounted(() => {
|
|
|
|
+ resizeObserver?.disconnect();
|
|
|
|
+ chart?.dispose();
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+function updateChart() {
|
|
|
|
+ if (!chart || chartData.value.length === 0) return;
|
|
|
|
+
|
|
|
|
+ // 排序 chartData
|
|
|
|
+ chartData.value.sort((a: any, b: any) => a.value - b.value);
|
|
|
|
+
|
|
|
|
+ const chartOptions = {
|
|
|
|
+ title: {
|
|
|
|
+ text: '负面标签分类'
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis'
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ top: '12%',
|
|
|
|
+ left: '20%',
|
|
|
|
+ right: '10%',
|
|
|
|
+ bottom: '10%'
|
|
|
|
+ },
|
|
|
|
+ dataset: {
|
|
|
|
+ dimensions: [ 'name', 'value' ],
|
|
|
|
+ source: chartData.value
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#3480CE',
|
|
|
|
+ width: 1
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ name: '名称',
|
|
|
|
+ nameGap: 16,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ interval: 0, // 确保所有标签都显示
|
|
|
|
+ rotate: 30, // 标签倾斜 30 度
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 12, // 设置字体大小,可根据需要调整
|
|
|
|
+ color: '#333' // 设置字体颜色
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ type: 'bar',
|
|
|
|
+ name: ' ',
|
|
|
|
+ color: '#3480CE',
|
|
|
|
+ barWidth: '18px'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ chart.setOption(chartOptions);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function updateLineChart() {
|
|
|
|
+ if (!lineChart || lineChartData.value.length === 0) return;
|
|
|
|
+
|
|
|
|
+ const lineChartOptions = {
|
|
|
|
+
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis'
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ top: '12%',
|
|
|
|
+ left: '5%',
|
|
|
|
+ right: '10%',
|
|
|
|
+ bottom: '10%'
|
|
|
|
+ },
|
|
|
|
+ dataset: {
|
|
|
|
+ dimensions: [ 'name', 'value' ],
|
|
|
|
+ source: lineChartData.value
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ name: '日期'
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#FF5733',
|
|
|
|
+ width: 1
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: 'all',
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: '#FF5733'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ lineChart.setOption(lineChartOptions);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function initChart() {
|
|
|
|
+ if (!chartRef.value) return;
|
|
|
|
+
|
|
|
|
+ chart = echarts.init(chartRef.value);
|
|
|
|
+ updateChart();
|
|
|
|
+
|
|
|
|
+ resizeObserver = new ResizeObserver(() => {
|
|
|
|
+ chart?.resize();
|
|
|
|
+ });
|
|
|
|
+ if (chartRef.value) {
|
|
|
|
+ resizeObserver.observe(chartRef.value);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function initLineChart() {
|
|
|
|
+ if (!lineChartRef.value) return;
|
|
|
|
+
|
|
|
|
+ lineChart = echarts.init(lineChartRef.value);
|
|
|
|
+ updateLineChart();
|
|
|
|
+
|
|
|
|
+ resizeObserver = new ResizeObserver(() => {
|
|
|
|
+ lineChart?.resize();
|
|
|
|
+ });
|
|
|
|
+ if (lineChartRef.value) {
|
|
|
|
+ resizeObserver.observe(lineChartRef.value);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+async function fetchChartData() {
|
|
|
|
+ const res = await useResponse(api.getBarChartData, { asin, agg_field: 'kind' });
|
|
|
|
+ if (res.code === 2000 && res.data) {
|
|
|
|
+ chartData.value = res.data;
|
|
|
|
+ updateChart();
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+async function fetchLineChartData() {
|
|
|
|
+ const res = await useResponse(api.getLineChartData, { asin, agg_field: 'review_date' });
|
|
|
|
+ if (res.code === 2000 && res.data) {
|
|
|
|
+ lineChartData.value = res.data;
|
|
|
|
+ updateLineChart();
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <el-card shadow="hover" class="border-none">
|
|
|
|
- 负面标签分类
|
|
|
|
|
|
+ <el-card class="border-none" shadow="hover">
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <div v-show="chartData.length > 0" ref="chartRef" class="chart"></div>
|
|
|
|
+ <el-empty v-if="chartData.length == 0" class="chart" description="暂无数据" />
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <div v-show="lineChartData.length > 0" ref="lineChartRef" class="chart"></div>
|
|
|
|
+ <el-empty v-if="lineChartData.length == 0" class="chart" description="暂无数据" />
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
</el-card>
|
|
</el-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-
|
|
|
|
|
|
+.chart {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 500px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|