feat(sycm_store): 生意参谋-竞店完成

src/utils/color.js

 // 竞品店铺对应颜色
 const BRAND_COLOR = {
-  '三只松鼠': ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
-  '三只松鼠官方旗舰店直播间': ['#91cc75', '#fac858', '#5470c6', '#ee6666'],
-  '百草味坚果旗舰店': ['#ee6666', '#fac858', '#5470c6', '#91cc75'],
-  '百草味官方旗舰店': ['#73c0de', '#fac858', '#5470c6', '#91cc75'],
+  // #5470c6 #0099cc #0720F0 #0062EB
+  // #00EFDC #66ccff #00EF5A #00DDEB
+  // #91cc75 #3ba272 #00cc99 #A1EB00
+  // #fac858 #EBE098 #F0EA07 #EF8912
+  // #c23531 #fc8452 #ff6699 #cc0066 #ee6666
+  // #CE09EB #E7A2EB #8409EB #EB00B4
 
-  '三只松鼠旗舰店': ['#fac858', '#73c0de', '#91cc75', '#5470c6'],
-  '沃隆旗舰店': ['#3ba272', '#c23531', '#d15555', '#e69c9c'],
-  '盐津铺子食品旗舰店': ['#fc8452', '#5470c6', '#91cc75', '#5470c6'],
-  '藤桥官方旗舰店': ['#9a60b4', '#91cc75', '#5470c6', '#5470c6'],
-  '好利来官方旗舰店': ['#ea7ccc', '#91cc75', '#5470c6', '#5470c6'],
-  '炭食光食品旗舰店': ['#ff6699', '#91cc75', '#5470c6', '#5470c6'],
-  '周黑鸭食品旗舰店': ['#cc66cc', '#91cc75', '#5470c6', '#5470c6'],
-  '良品铺子旗舰店': ['#99cc00', '#91cc75', '#5470c6', '#5470c6'],
-  '德芙官方旗舰店': ['#00cc99', '#91cc75', '#5470c6', '#5470c6'],
-  '洽洽食品官方旗舰店': ['#cc0066', '#91cc75', '#5470c6', '#5470c6'],
-  '蒙都旗舰店': ['#66ccff', '#91cc75', '#5470c6', '#5470c6'],
-  '脱骨侠旗舰店': ['#ffcc00', '#91cc75', '#5470c6', '#5470c6'],
-  '比比赞旗舰店': ['#0099cc', '#91cc75', '#5470c6', '#5470c6'],
+  '三只松鼠': ['#5470c6', '#00EFDC', '#91cc75', '#fac858'],
+  '三只松鼠官方旗舰店直播间': ['#91cc75', '#c23531', '#CE09EB', '#0099cc'],
+  '百草味坚果旗舰店': ['#ee6666', '#66ccff', '#3ba272', '#EBE098'],
+  '百草味官方旗舰店': ['#00EFDC', '#E7A2EB', '#fc8452', '#0720F0'],
+
+  '三只松鼠旗舰店': ['#00EF5A', '#00cc99', '#F0EA07', '#ff6699'],
+  '沃隆旗舰店': ['#8409EB', '#0062EB', '#00DDEB', '#A1EB00'],
+  '盐津铺子食品旗舰店': ['#EF8912', '#cc0066', '#EB00B4', '#ee6666'],
+  '藤桥官方旗舰店': ['#CE09EB', '#5470c6', '#0099cc', '#66ccff'],
+
+  '好利来官方旗舰店': ['#E7A2EB', '#0720F0', '#00EF5A', '#F0EA07'],
+  '炭食光食品旗舰店': ['#ff6699', '#8409EB', '#0062EB', '#00DDEB'],
+  '周黑鸭食品旗舰店': ['#8409EB', '#A1EB00', '#EF8912', '#cc0066'],
+  '良品铺子旗舰店': ['#A1EB00', '#EB00B4', '#ee6666', '#5470c6'],
+  '德芙官方旗舰店': ['#00cc99', '#00EFDC', '#91cc75', '#c23531'],
+  '洽洽食品官方旗舰店': ['#cc0066', '#CE09EB', '#0099cc', '#3ba272'],
+  '蒙都旗舰店': ['#66ccff', '#EBE098', '#fc8452', '#5470c6'],
+  '脱骨侠旗舰店': ['#EBE098', '#91cc75', '#5470c6', '#E7A2EB'],
+  '比比赞旗舰店': ['#0099cc', '#ff6699', '#00EF5A', '#cc0066'],
 }
 /**
  * 通过直播间/店铺名字取出它的颜色数据

src/views/bi/competitor/cmm/LineAndBar.vue

@@ -133,7 +133,7 @@ const setOptions = () => {
           var color = item.color;
           // 拼接提示内容
           if (item.seriesName.split('-')[1] === '销售额') {
-            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand) + '<br>';
+            tooltip += '<span style="display:inline-block;margin-right:5px;width:12px;height:6px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand) + '<br>';
           } else if (item.seriesName.split('-')[1] === '观看人次') {
             tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '人', myThousand) + '<br>';
           }

src/views/bi/competitor/cmm/index.vue

@@ -216,7 +216,6 @@ const filterData = () => {
   // 最后赋予给要展示的部分
   chartData.legend = legend
   chartData.series = series
-  console.log(series)
   chartData.xAxis = allChartData.xAxis
 }
 

src/views/bi/competitor/sycm_store/GradientArea.vue

@@ -6,6 +6,7 @@
 
 <script setup>
 import * as echarts from 'echarts'
+import { formatNumberWithUnit } from '@/utils'
 const props = defineProps({
   className: {
     type: String,
@@ -41,11 +42,27 @@ const setOptions = () => {
         label: {
           backgroundColor: '#6a7985'
         }
+      },
+      formatter: function (params) {
+        let tooltip = '';
+        params.forEach((item) => {
+          // 获取系列颜色
+          var color = item.color;
+          // 拼接提示内容
+          if (item.seriesName.split('-')[1].includes('速')) {
+            tooltip += '<span style="display:inline-block;margin-right:5px;width:12px;height:6px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '%', false, false) + '<br>';
+          } else if (item.seriesName.split('-')[1] === '观看人次') {
+            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '人', myThousand) + '<br>';
+          } else {
+            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + item.value + '<br>';
+          }
+        });
+        return tooltip;
       }
     },
-    legend: {
-      data: props.chartData.legend
-    },
+    // legend: {
+    //   data: props.chartData.legend
+    // },
     toolbox: {
       feature: {
         saveAsImage: {},
@@ -95,6 +112,7 @@ const resize = () => {
 onMounted(() => {
   nextTick(() => {
     initChart()
+    window.addEventListener('resize', resize)
   })
 })
 

src/views/bi/competitor/sycm_store/index.vue

@@ -40,6 +40,8 @@
       </el-form-item>
     </el-form>
     <div class="chart_wrap">
+      <group-legend :legendData="chartData.legend"
+        @click-item="legendChangeFn"></group-legend>
       <gradient-area :chartData="chartData"></gradient-area>
     </div>
   </div>
@@ -167,8 +169,38 @@ const getList = async () => {
         zfmjObj.data.push(0)
       }
     })
-    allChartData.legend.push(zfmjObj.name, uvObj.name, llzsObj.name, jyzsObj.name)
-    allChartData.series.push(zfmjObj, uvObj, llzsObj, jyzsObj)
+
+    allChartData.legend.push({
+      data: [{
+        name: jyzsObj.name,
+        type: 'circle',
+        color: getBrandColor(list[0]?.platformStore, 0),
+        effective: true,
+        show: true,
+      }, {
+        name: llzsObj.name,
+        type: 'circle',
+        color: getBrandColor(list[0]?.platformStore, 1),
+        effective: true,
+        show: true
+      }, {
+        name: uvObj.name,
+        type: 'circle',
+        color: getBrandColor(list[0]?.platformStore, 2),
+        effective: true,
+        show: true
+      }, {
+        name: zfmjObj.name,
+        type: 'circle',
+        color: getBrandColor(list[0]?.platformStore, 3),
+        effective: true,
+        show: true
+      }],
+      orient: 'verticalAlign'
+    })
+
+    // allChartData.legend.push(zfmjObj.name, uvObj.name, llzsObj.name, jyzsObj.name)
+    allChartData.series.push(jyzsObj, llzsObj, uvObj, zfmjObj)
   })
   return data
 }
@@ -177,26 +209,53 @@ const getList = async () => {
 const filterData = () => {
   let legend = allChartData.legend
   let series = allChartData.series
-  
+
   if (queryParams.brandList.length > 0) {
     // 选择了店铺，筛选
     series = series.filter(item => {
       return queryParams.brandList.find(o => o === item.name.split('-')[0])
     })
-    legend = legend.filter(name => {
-      return queryParams.brandList.find(o => o === name.split('-')[0])
+    legend = legend.filter(obj => {
+      return queryParams.brandList.find(nameStr => obj.data.find(o => o.name.split('-')[0] === nameStr))
     })
   }
-  
+
   // 选择了数据类型，筛选
   if (queryParams.typeList.length > 0) {
     series = series.filter(item => {
       return queryParams.typeList.find(o => o === item.name.split('-')[1])
     })
-    legend = legend.filter(name => {
-      return queryParams.typeList.find(o => o === name.split('-')[1])
+    // 图例组件数据源不变，只是显示/隐藏
+    legend.filter(obj => {
+      obj.data.forEach((o, index) => {
+        const isHave = queryParams.typeList.includes(o.name.split('-')[1])
+        // 设置图例组件显示/隐藏
+        if (!isHave) o.show = false
+        else o.show = true
+      })
+    })
+  } else {
+    // 数据类型都没选
+    legend.forEach(obj => {
+      obj.data.forEach(o => {
+        o.show = true
+      })
     })
   }
+  // 据图例状态，筛选数据显示
+  series = series.filter(sObj => {
+    let nowSeries = true
+    legend.forEach(obj => {
+      const now = obj.data.find(o => {
+        return o.name === sObj.name
+      })
+      // now 图例对象无效，则当前 sObj 对象无效
+      if (now?.effective === false) {
+        nowSeries = false
+      }
+    })
+    return nowSeries
+  })
 
   chartData.legend = legend
   chartData.series = series
@@ -215,6 +274,10 @@ async function init() {
 };
 init()
 
+const legendChangeFn = () => {
+  filterData()
+}
+
 // 查询条件改变
 const queryChangeFn = async (arg) => {
   if (arg === 'date' && !queryParams.date) return