添加：点击销售国家，弹框显示其销售趋势图

src/views/dashboard/global/index2.vue

@@ -63,6 +63,12 @@
           </div>
         </div>
       </div> 
+      <div v-if="isShowMapTrend" class="trendOpen" :style="{'left':salesTrendList.x+'px','top':salesTrendList.y+'px'}">
+        <div><span class="trendTitle">{{ salesTrendList.title }}</span>
+            <span class="trendClose_icon" @click="isShowMapTrend=false"></span>
+        </div>
+        <div class="trend_echarts" ref="trend_echarts"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -96,6 +102,9 @@
           const loading=ref(true);
           const qushiEchats=ref(null);
           const channelList = ref (null);
+          const isShowMapTrend = ref(false);
+          const salesTrendList = ref({});
+          const trend_echarts = ref(null);
           // 对世界地图的json文件中的经纬度坐标进行处理
         const processLng = lng => {
           if (lng > -30) {
@@ -354,8 +363,8 @@
             }
 
             let series = [];
-    [
-        ["", BJData]
+            [
+            ["", BJData]
             ].forEach(function (item, i) {
                 series.push({
                     type: 'map',
@@ -415,7 +424,7 @@
                         triggerOn: 'mousemove',
                         formatter: function (params, ticket, callback) {
                             //console.log(params)
-                            return "<div style='width:150px;background:#666666;color:#fff;border-radius:5px;padding:3px'><div style='background:#00000070;width:100%;border-radius:5px 5px 0 0;margin-top:-3px;margin-left:-3px;width:104%'>&nbsp;&nbsp;"+params.name+"</div><div>订单："+params.value[2]+"</div><div>营收："+params.value[4]+"</div><div>利润："+params.value[3]+"</div><div>";
+                            return "<div style='width:150px;background:#666666;color:#fff;border-radius:5px;padding:3px'><div style='background:#00000070;width:100%;border-radius:5px 5px 0 0;margin-top:-3px;margin-left:-3px;width:104%'>&nbsp;&nbsp;"+params.name+"</div><div>总量："+params.value[2]+"</div><div>";
                         }
                     },
                     label: {
@@ -444,7 +453,7 @@
                     data: item[1].map(function (dataItem) {
                         return {
                             name: dataItem[0].name,
-                            value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value,dataItem[0].rev,dataItem[0].gp])
+                            value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value,dataItem[0].trend])
                         };
                     })
                 },            
@@ -519,6 +528,19 @@
                 series: [...series],
             }
             myChart.setOption(option);
+            myChart.on('click',function(params){
+                var trend=params.value[3];
+                if(trend==null || trend.length==0) return;                
+                isShowMapTrend.value = true;
+                var xValue = params.value[0]; // x轴值，根据series的数据格式而定
+                var yValue = params.value[1];
+                var pointInPixel = myChart.convertToPixel({seriesIndex: params.seriesIndex}, [xValue, yValue]); // 获取点击点在画布上的像素坐标
+                //console.log(pointInPixel)
+                salesTrendList.value = {"title":params.name,"list":trend,"x":pointInPixel[0]<300?300:pointInPixel[0],"y":pointInPixel[1]<170?170:pointInPixel[1]};
+                setTimeout(() => {
+                    showTrendEcharts();
+                }, 200);                
+            });
           }
           function showBottomRight(data){
             let xdata=[];
@@ -1051,6 +1073,126 @@
             var mychat = echarts.init(rightbottom_echarts.value);
             mychat.setOption(option);
           }       
+          function showTrendEcharts(){
+              const xAxisData = [];
+              const data = [
+                {
+                  label: '销售',
+                  arr: [],
+                }
+              ];
+              salesTrendList.value.list.forEach(item=>{
+                xAxisData.push(item.month);
+                data[0].arr.push(item.amount);
+              })
+              const color = ['#5ea9e8'];
+              const seriesData = [];
+              const legendData = [];
+              data.forEach((item, index) => {
+                seriesData.push({
+                  name: item.label,
+                  type: 'line',
+                  symbol: 'circle', // 设定为实心点
+                  showAllSymbol: true,
+                  symbolSize: 7,
+                  smooth: false,
+                  itemStyle: {
+                    normal: {
+                      color: color[index],
+                      lineStyle: {
+                        // 线的颜色
+                        color: color[index],
+                        width: 1.5,
+                      },
+                      shadowColor: color[index],
+                      shadowBlur: index === 0 ? 10 : 0,
+                    },
+                  },
+                  data: item.arr,
+                });
+                legendData.push({
+                  name: item.label,
+                  icon:
+                    index > 2
+                      ? 'path://m0.010277,5.945418l24.979446,0l0,2.109164l-24.979446,0l0,-2.109164z'
+                      : 'circle',
+                  textStyle: {},
+                  itemStyle: {
+                    shadowColor: color[index],
+                    shadowBlur: index === 0 ? 10 : 0,
+                  },
+                });
+              });
+              var option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                  show: true,
+                },
+                grid: {
+                  top: '10%',
+                  left: '2%',
+                  right: '2%',
+                  bottom: '10%',
+                  containLabel: true,
+                },
+                // legend: {
+                //   show: true,
+                //   right: '0%',
+                //   top: '2%',
+                //   itemWidth: 7, // 设置宽度
+                //   itemHeight: 7, // 设置高度
+                //   itemGap: 15, // 设置间距
+                //   textStyle: {
+                //     // 图例文字的样式
+                //     color: '#000',
+                //     fontSize: 12,
+                //   },
+                //   data: legendData,
+                // },
+                xAxis: {
+                  boundaryGap: true,
+                  data: xAxisData,
+                  axisLine: {
+                    lineStyle: {
+                      color: '#fff',
+                    },
+                  },
+                  axisTick: {
+                    show: false,
+                  },
+                  axisLabel: {
+                    color: '#fff',
+                  },
+                },
+                yAxis: [
+                  {
+                    name: '',
+                    type: 'value',
+                    inverse: false,
+                    splitLine: {
+                      show: true,
+                      lineStyle: {
+                        color: '#04c3eb',
+                        type: 'dashed',
+                      },
+                    },
+                    axisLabel: {
+                      formatter: '{value}',
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 14,
+                      },
+                    },
+                    axisTick: {
+                      show: false,
+                    },
+                  },
+                ],
+                series: seriesData,
+              };    
+              var mychat = echarts.init(trend_echarts.value) ;   
+              mychat.setOption(option)   
+          }
           onMounted(()=>{
               impquery();
           })
@@ -1073,6 +1215,9 @@
               qushiSwitchBtn,
               qushiEchats,
               channelList,
+              isShowMapTrend,
+              salesTrendList,
+              trend_echarts,
           }
       }
   }
@@ -1087,6 +1232,45 @@
     font-size: 18px;
 
 }
+.trendOpen{
+    width: 450px;
+    height: 300px;
+    position: absolute;
+    background-color: #0000009e;
+    color: #fff;
+    font-size: 14px;
+    left: 50%;
+    top:50%;
+    margin-left: -225px;
+    margin-top: -150px;
+    border-radius: 10px;
+}
+.trendTitle{
+    font-size: 16px;
+    height: 30px;
+    line-height: 30px;
+    margin-left: 10px;
+}
+.trendClose_icon{
+    display: block;
+    cursor: pointer;
+    width: 20px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 26px;
+    color: #fff;
+    float: right;
+    margin-right: 10px;
+}
+ 
+.trendClose_icon::before {
+  content: '×'; /* 使用Unicode字符 */
+}
+.trend_echarts{
+    width: 100%;
+    height: 270px;
+}
 .line{
     height: 60%;
     width: 5px;