1

src/views/home/data.js

@@ -139,7 +139,7 @@ export const preOption = (
   labelPosition = 'outside'
 ) => {
   return {
-    color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
+    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
     tooltip: {
       formatter: '{b}：{c}' + '%',
       trigger: 'item'
@@ -187,7 +187,7 @@ export const preOptions = (
   labelPosition = 'outside'
 ) => {
   return {
-    color: ['#398f4e', '#458ef7'],
+    color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
     tooltip: {
       formatter: function (params) {
         return `${params.name}<br/>次数: ${params.value}<br/>占比: ${params.percent}%`;
@@ -277,7 +277,7 @@ export const preOptions1 = (
   labelPosition = 'outside'
 ) => {
   return {
-    color: ['#398f4e', '#458ef7'],
+    color: ['#fc8452', '#9a60b4', '#ea7ccc', '#48b8d0', '#a3d2ca'],
     tooltip: {
       // formatter: function (params) {
       //   return `${params.name}<br/>次数: ${params.value}<br/>占比: ${params.percent}%`;
@@ -286,7 +286,7 @@ export const preOptions1 = (
       trigger: 'item'
     },
     legend: {
-      orient: 'horizontal',
+      orient: 'vertical',
       left: 'center', // 水平居中
       top: 0, // 置于顶部
       itemGap: window.innerHeight * 0.018,
@@ -362,6 +362,7 @@ export const lineOption = (data, type) => {
       ? getDatesInMonth()
       : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
   return {
+    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
     tooltip: {
       formatter: (item) => {
         return (
@@ -372,7 +373,71 @@ export const lineOption = (data, type) => {
     },
     legend: {
       orient: 'vertical',
+      right: '10%',
+      top: '35%',
+      itemGap: window.innerHeight * 0.018,
+      formatter: function (name) {
+        let value = data.find((item) => item.name === name);
+        let total = (data || []).reduce(
+          (sum, item) => sum + (Number(item.value) || 0),
+          0
+        );
+        let percent = total
+          ? (((Number(value?.value) || 0) / total) * 100).toFixed(2)
+          : 0;
+        console.log(value);
+        return `${name}  |  ${value?.value || 0}  (${percent}%)`;
+      },
+      textStyle: {
+        fontSize: window.innerHeight * 0.014
+      }
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel: {
+        fontSize: window.innerHeight * 0.012
+      },
+      data: timeData
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: data
+  };
+};
 
+export const lineOption1 = (data, type) => {
+  let timeData =
+    type == 1
+      ? [
+          '一月',
+          '二月',
+          '三月',
+          '四月',
+          '五月',
+          '六月',
+          '七月',
+          '八月',
+          '九月',
+          '十月',
+          '十一月',
+          '十二月'
+        ]
+      : type == 2
+      ? getDatesInMonth()
+      : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+  return {
+    color: ['#fc8452', '#9a60b4', '#ea7ccc', '#48b8d0', '#a3d2ca'],
+    tooltip: {
+      formatter: (item) => {
+        return (
+          item.seriesName + ' ' + item.name + '时率：' + item.value + '%'
+        );
+      },
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'horizontal',
       itemGap: window.innerHeight * 0.018,
       textStyle: {
         fontSize: window.innerHeight * 0.014

src/views/home/yuxin.vue

@@ -116,7 +116,7 @@
     queryFrequencyMonthlyYx
   } from '@/api/main';
   import dictMixins from '@/mixins/dictMixins';
-  import { barOption, preOptions, lineOption, preOptions1 } from './data';
+  import { barOption, preOptions, lineOption, preOptions1, lineOption1 } from './data';
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
   import { BarChart, PieChart, LineChart } from 'echarts/charts';
@@ -250,7 +250,7 @@
         const data = await queryFrequencyAnnualYx({
           date: this.value3
         });
-        this.lineOption1 = lineOption(
+        this.lineOption1 = lineOption1(
           data.map((item) => {
             return {
               name: item.name,