可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据

可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据

公司大屏项目要求中间显示重庆几大区地图,并根据请求实时更新数据,并且每个区会根据数据人数多少改变颜色和浮动框的内容 实现效果如下
在这里插入图片描述

methods: {
    // 地图自定义 tooltip formatter
    tooltipDom(params) {
      let data = params.data;
      // var res ='<br/>环比:'+data.value +'C1'+ data.value2+'C2'+data.value3+'C3'+data.value4;
      let res = `<div class='titlebox' style='position: relative; width: 300px; height: 110px;background: rgba(5, 12, 15, 0.6);border: 1px solid rgba(4,242,161,0.46); border-radius:10px;'>
        <div class='tooltitle' style='margin:0 auto; width: 129px;height: 32px; line-height:32px;text-align:center; font-size:16px; text-shadow: 0px 0px 8px #d5ffe7; color: #d5ffe7; background: url("/images/echarttooltilte.png") no-repeat top center;'>
          <span>${data.name}<span>
        </div>
        <div class='contList' style='font-size:16px; margin-top:12px; display: flex; padding: 0 30px; justify-content: space-around;'>
          <div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>总学员数</div>${data.value}</div>
          <div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>C1数</div>${data.value1}</div>
          <div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>C2数</div>${data.value2}</div>
          <div><div style='color: #76c9ef; margin-bottom: 8px; font-size:12px;'>B2数</div>${data.value3}</div>
        </div>
        <div style='position: absolute; bottom: -20px; left:46%; width:27px ;height:20px; background: url("/images/tooltiparrow.png") no-repeat top center;'></div> 
        </div>`;
      return res;
    },
    // 初始化地图
    initMap() {
      let tooltipDom = this.tooltipDom;
      let myChart = this.$echart.init(document.getElementById("cq-map"));
      this.myChart = myChart;
      myChart.showLoading({
        text: "loading",
        color: "#c23531",
        textColor: "#fff",
        maskColor: "rgba(255, 255, 255, 0)",
        fontSize: "18px"
      });
      this.$http.get("/data/screen/mapDate").then(res => {
        if (res.success) {
          let data = res.data;
          let colorArr = [
            this.getAreaColor(data[0].totalNum), // 渝中区
            this.getAreaColor(data[1].totalNum), // 大渡口区
            this.getAreaColor(data[3].totalNum), // 沙坪坝区
            this.getAreaColor(data[2].totalNum), // 江北区
            this.getAreaColor(data[5].totalNum), // 南岸区
            this.getAreaColor(data[4].totalNum), // 九龙坡区
            this.getAreaColor(data[6].totalNum), // 北碚区
            this.getAreaColor(data[7].totalNum), // 渝北区
            this.getAreaColor(data[8].totalNum) // 巴南区
          ];
            myChart.hideLoading();
            this.$echart.registerMap("重庆", areaJson);
            let optionData = {
              tooltip: {
                trigger: "item",
                triggerOn: "mousemove", // 不在 'mousemove' 或 'click' 时触发,用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。
                appendToBody: true, //是否将 tooltip 的 DOM 节点添加为 HTML 的 <body> 的子节点
                padding: 0,
                formatter: function(params) {
                  return tooltipDom(params);
                }
              },
              series: [
                {
                  type: "map",
                  map: "重庆",
                  zoom: 1.2, // 缩放比例
                  aspectScale: 0.9, // 宽高比
                  itemStyle: {
                    areaColor: "rgba(5, 12, 15, 0.5)", // 全局显示区域背景色
                    borderWidth: 2 // 全局显示区域边线宽度
                  },
                  label: {
                    show: true, // 全局开启显示区域内文字
                    position: "inside", // 全局区域内文字位置
                    color: "#fff", // 全局区域内文字颜色
                    fontSize: 14
                  },
                  emphasis: {
                    label: {
                      color: "#fff" // 全局选中是区域内文字颜色
                    }
                  },
                  data: [
                    {
                      name: "渝中区", // 对应省市区json 地区properties.name
                      value: data[0].totalNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value
                      value1: data[0].coneNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value1
                      value2: data[0].ctwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value2
                      value3: data[0].btwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value3
                      itemStyle: {
                        borderColor: colorArr[0], // 该地区边线颜色
                        opacity: 1
                      },
                      tooltip: {
                        position: "top" // tooltip提示框的具体位置
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[0] // 该地区选中的颜色
                        }
                      }
                    },
                    {
                      name: "大渡口区",
                      value: data[1].totalNum,
                      value1: data[1].coneNum,
                      value2: data[1].ctwoNum,
                      value3: data[1].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[1],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["12%", "52%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[1]
                        }
                      }
                    },
                    {
                      name: "沙坪坝区",
                      value: data[3].totalNum,
                      value1: data[3].coneNum,
                      value2: data[3].ctwoNum,
                      value3: data[3].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[2],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["6%", "30%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[2]
                        }
                      }
                    },
                    {
                      name: "江北区",
                      value: data[2].totalNum,
                      value1: data[2].coneNum,
                      value2: data[2].ctwoNum,
                      value3: data[2].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[3],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["36%", "30%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[3]
                        }
                      }
                    },
                    {
                      name: "南岸区",
                      value: data[5].totalNum,
                      value1: data[5].coneNum,
                      value2: data[5].ctwoNum,
                      value3: data[5].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[4],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["32%", "40%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[4]
                        }
                      }
                    },
                    {
                      name: "九龙坡区",
                      value: data[4].totalNum,
                      value1: data[4].coneNum,
                      value2: data[4].ctwoNum,
                      value3: data[4].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[5],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["6%", "50%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[5]
                        }
                      }
                    },
                    {
                      name: "北碚区",
                      value: data[6].totalNum,
                      value1: data[6].coneNum,
                      value2: data[6].ctwoNum,
                      value3: data[6].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[6],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["16%", "10%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[6]
                        }
                      }
                    },
                    {
                      name: "渝北区",
                      value: data[7].totalNum,
                      value1: data[7].coneNum,
                      value2: data[7].ctwoNum,
                      value3: data[7].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[7],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["38%", "14%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[7]
                        }
                      }
                    },
                    {
                      name: "巴南区",
                      value: data[8].totalNum,
                      value1: data[8].coneNum,
                      value2: data[8].ctwoNum,
                      value3: data[8].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[8],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: "inside"
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[8]
                        }
                      }
                    }
                  ]
                }
              ]
            };
            myChart.setOption(optionData);
            // 地区区域自动切换
            let areaIndex = this.areaIndex;
            this.areaIndex++;
            // 显示选中区域学员信息
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0, // 显示第几个series
              dataIndex: areaIndex // 显示第几个数据
            });
            myChart.dispatchAction({
              type: "mapSelect",
              dataIndex: areaIndex // 显示第几个数据
            });
        }
      });
    },
    // 根据学员人数返回颜色
    getAreaColor(num) {
      let maplegendColors = this.maplegendColors;
      if (num >= 20000) {
        // 学员大于20000
        return maplegendColors[0];
      } else if (num >= 15000 && num < 20000) {
        // 学员大于等于15000小于20000
        return maplegendColors[1];
      } else if (num >= 10000 && num < 15000) {
        // 学员大于等于10000小于15000
        return maplegendColors[2];
      } else if (num >= 5000 && num < 10000) {
        // 学员大于等于5000小于10000
        return maplegendColors[3];
      } else if (num >= 2000 && num < 5000) {
        // 学员大于等于2000小于5000
        return maplegendColors[4];
      } else {
        return maplegendColors[5];
      }
    },
    // 刷新地图
    refreshMap() {
      let myChart = this.myChart;
      if (this.myChart) {
        this.$http.get("/data/screen/mapDate").then(res => {
          if (res.success) {
            let data = res.data;
            let selectAreaIndex = this.selectAreaIndex; // 选中地图的index
            let colorArr = [
              this.getAreaColor(data[0].totalNum), // 渝中区
              this.getAreaColor(data[1].totalNum), // 大渡口区
              this.getAreaColor(data[3].totalNum), // 沙坪坝区
              this.getAreaColor(data[2].totalNum), // 江北区
              this.getAreaColor(data[5].totalNum), // 南岸区
              this.getAreaColor(data[4].totalNum), // 九龙坡区
              this.getAreaColor(data[6].totalNum), // 北碚区
              this.getAreaColor(data[7].totalNum), // 渝北区
              this.getAreaColor(data[8].totalNum) // 巴南区
            ];
            let optionData = {
              series: [
                {
                  type: "map",
                  map: "重庆",
                  zoom: 1.2, // 缩放比例
                  aspectScale: 0.9, // 宽高比
                  itemStyle: {
                    areaColor: "rgba(5, 12, 15, 0.5)", // 全局显示区域背景色
                    borderWidth: 2 // 全局显示区域边线宽度
                  },
                  label: {
                    show: true, // 全局开启显示区域内文字
                    position: "inside", // 全局区域内文字位置
                    color: "#fff", // 全局区域内文字颜色
                    fontSize: 14
                  },
                  emphasis: {
                    label: {
                      color: "#fff" // 全局选中是区域内文字颜色
                    }
                  },
                  data: [
                    {
                      name: "渝中区", // 对应省市区json 地区properties.name
                      value: data[0].totalNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value
                      value1: data[0].coneNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value1
                      value2: data[0].ctwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value2
                      value3: data[0].btwoNum, // tooltip.formatter(parmas) 自定义parmas的参数parmas.data.value3
                      itemStyle: {
                        borderColor: colorArr[0], // 该地区边线颜色
                        opacity: 1
                      },
                      tooltip: {
                        position: "top" // tooltip提示框的具体位置
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[0] // 该地区选中的颜色
                        }
                      }
                    },
                    {
                      name: "大渡口区",
                      value: data[1].totalNum,
                      value1: data[1].coneNum,
                      value2: data[1].ctwoNum,
                      value3: data[1].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[1],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["12%", "52%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[1]
                        }
                      }
                    },
                    {
                      name: "沙坪坝区",
                      value: data[3].totalNum,
                      value1: data[3].coneNum,
                      value2: data[3].ctwoNum,
                      value3: data[3].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[2],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["6%", "30%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[2]
                        }
                      }
                    },
                    {
                      name: "江北区",
                      value: data[2].totalNum,
                      value1: data[2].coneNum,
                      value2: data[2].ctwoNum,
                      value3: data[2].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[3],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["36%", "30%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[3]
                        }
                      }
                    },
                    {
                      name: "南岸区",
                      value: data[5].totalNum,
                      value1: data[5].coneNum,
                      value2: data[5].ctwoNum,
                      value3: data[5].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[4],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["32%", "40%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[4]
                        }
                      }
                    },
                    {
                      name: "九龙坡区",
                      value: data[4].totalNum,
                      value1: data[4].coneNum,
                      value2: data[4].ctwoNum,
                      value3: data[4].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[5],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["6%", "50%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[5]
                        }
                      }
                    },
                    {
                      name: "北碚区",
                      value: data[6].totalNum,
                      value1: data[6].coneNum,
                      value2: data[6].ctwoNum,
                      value3: data[6].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[6],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["16%", "10%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[6]
                        }
                      }
                    },
                    {
                      name: "渝北区",
                      value: data[7].totalNum,
                      value1: data[7].coneNum,
                      value2: data[7].ctwoNum,
                      value3: data[7].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[7],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: ["38%", "14%"]
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[7]
                        }
                      }
                    },
                    {
                      name: "巴南区",
                      value: data[8].totalNum,
                      value1: data[8].coneNum,
                      value2: data[8].ctwoNum,
                      value3: data[8].btwoNum,
                      itemStyle: {
                        borderColor: colorArr[8],
                        opacity: 0.9
                      },
                      tooltip: {
                        position: "inside"
                      },
                      emphasis: {
                        itemStyle: {
                          areaColor: colorArr[8]
                        }
                      }
                    }
                  ]
                }
              ]
            };
            optionData.series[0].data[selectAreaIndex].selected = true;
            myChart.setOption(optionData);
              // 关闭上一个选中区域学员信息
              myChart.dispatchAction({
                type: "hideTip"
              });
              // 显示选中区域学员信息
              myChart.dispatchAction({
                type: "showTip",
                seriesIndex: 0, // 显示第几个series
                dataIndex: selectAreaIndex // 显示第几个数据
              });
          }
        });
      }
    },
    // 地区区域自动切换动画
    changeArea() {
      let myChart = this.myChart;

      if (this.myChart) {
        let areaIndex = this.areaIndex;
        let oldIndex = areaIndex - 1 < 0 ? 9 : areaIndex - 1;
        if (areaIndex > 8) {
          areaIndex = 0;
        }
        // 关闭上一个选中区域学员信息
        myChart.dispatchAction({
          type: "hideTip"
        });
        // 关闭上一个选中区域学员信息
        myChart.dispatchAction({
          type: "mapUnSelect",
          seriesIndex: 0, // 显示第几个series
          dataIndex: oldIndex // 显示第几个数据
        });
        // 显示选中区域学员信息
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0, // 显示第几个series
          dataIndex: areaIndex // 显示第几个数据
        });
        myChart.dispatchAction({
          type: "mapSelect",
          dataIndex: areaIndex // 显示第几个数据
        });
        this.selectAreaIndex = areaIndex;
        let index = areaIndex+1;
        this.areaIndex = index;
      }
    },
  }  

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页

打赏作者

艾路菲尔

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值