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

最新推荐文章于 2024-08-16 14:30:31 发布
最新推荐文章于 2024-08-16 14:30:31 发布
阅读量2.9k 收藏 14
点赞数 6
分类专栏： 数据大屏 ercharts地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38566069/article/details/107417396
版权

可视化数据大屏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;
      }
    },
  }
艾路菲尔
关注
专栏目录
html实现数据分布,【数据可视化】项目分布地图设计之显示省份地图
weixin_39906245的博客
06-05 1141
实现效果项目分布地图效果鼠标悬停效果需求分析显示陕西省省份地图显示地市的名称根据项目数量，动态调整气球浮标的大小准备步骤下载echarts，官网下载下载echarts中的省份信息，可以通过 npm i echarts 或者 cnpm i echarts下载整个echarts的资源包。京省份数据的具体路径node_modules\_echarts@4.9.0@echarts\map\js\provi...
酷炫的可视化数据地图都是咋做的？10分钟学会
永洪科技的博客
11-24 5122
*全文干货较多，建议收藏 相信不少小伙伴都看到过大佬做的可视化大屏中有地图呈现，将数据情况结合地图共同展现，既有观赏性，又更加直观。 其实想要完成一个可视化的地图，乃至多层地图展现并不难，五分钟永洪君包你学会！ 想要完成一个酷炫的可视化地图，需要借助永洪科技的免费BI产品——Yonghong Desktop。 桌面智能数据分析工具_Yonghong Desktop数据分析软件-永洪科技 首先，我们可以制作一个比较基础的可视化数据地图↓ 实现方法 在Yonghong Desktop导入数据后
绘制炫酷的地图，不只是pyecharts.map！
lsxxx2011的专栏
04-10 833
导读：地图可视化是一种非常直观的数据分析结果展现形式，python有很多可视化库可以实现，pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一。不可否认，pyech...
FineBI制作可视化大屏-区域地图（4）
最新发布
Pangaoyang_的博客
08-16 1220
使用FineBI快速绘制区域地图。
echarts地图 可视化大屏使用echarts-map实现地图轮播效果
qq_45630675的博客
12-09 6994
echarts-map 地图实现轮播效果
基于echarts 数据可视化大屏展示全国热点分布高亮地图特效
qq_365392777
10-23 2475
前言???? 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，...
vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况
周凡的博客
01-16 1776
实现中国地图的省份切换
echarts 图表轮播（pie图数据轮播）
qq_33404590的博客
02-14 607
echarts图表中pie图轮播，
Vue + Echarts 实现中国地图的绘制
B1ackZz的博客
11-25 1226
Vue + Echarts 实现中国地图的绘制
帆软数据可视化：BI区域地图制作
m0_66248387的博客
10-10 5694
区域地图是指系统反映某一地区的自然、经济基本情况和区域特点的地图。前面，我用为大家展示了流向地图和热力地图的制作。现在也到了分析中地图制作更为重要的图表制作---。下面，我将以销售区域地图为例，展示数据可视化中的制作流程。
GIS地图怎么做？看这篇就够了
热门推荐
Wudixiaochi的博客
11-30 1万+
今日使用产品 Yonghong Desktop 01场景 1多层地图展现 在分析产品全国的销售数据情况时，期望在地图上既展示各大区的销售总额，同时又能展示各省份自己的销售情况。 在以往我们只能通过地图下钻，来分别展现不同地理层级的数据指标。现在除了下钻逐层显示，您还可以将所需要展示的数据以不同渲染方式同时在一个地图上查看。 实现方法 1.多层数据绑定 根据数据情况，将其按照匹配的地理级别进行地图列转换，将转换后的地图列（大区、省）分别绑入到地标栏内，形成多层数据。 2.地图样式...
django报表系统_django使用echarts
weixin_36325338的博客
12-23 1381
项目采用vue+echarts+datav开发的大屏数据展示及实现中国地图省市县下钻，数据图形可视化，数据间的相互联动。 ...»学习目录 1.可视化面板介绍 1.1技术要点 1.2案例适配方案 1.3页面主体布局2.Echarts(重点) 2.1echarts介绍 2.2echarts体验 2.3echarts基础配置3.Echarts快速使用 3.1官网实例 3.2.社区Gallery 废话少...
Echarts-自动轮播数据
weixin_44131302的博客
06-13 1999
工作的时候遇到一个需要用echarts自动轮播全国地图数据的tooltip，并且鼠标放上去不影响操作的需求，感觉这个功能写出来应该会经常使用，所以来记录一下这部分的代码。 //自动轮播tooltip var currentIndex = -1; var tooltip_timer = null; tooltip_timer = setInterval(function() { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.d
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
weixin_29923451的博客
12-24 1085
前言此系列共分为以下几篇《vue中高德地图的使用》《vue中基于高德的多行政区域覆盖》《vue中高德搭配echarts做数据迁徙流线图》(本篇)本篇效果 实现步骤1. 思路分析第一篇的基础讲解，加上上一片的行政区域行政区域展示(描边及背景)，其实可以完成很多炫酷效果了。本篇讲述系列篇的最后一篇：vue中高德搭配echarts做数据迁徙流线图。由于流线图使用的曲线是贝塞尔曲线，而在高德中无法直接简...
Echarts-中国大地图
weixin_57246351的博客
04-22 481
<template> <div class="map"> <div id="map" ref="chart1" style="width:777px;height:527px"></div> </div> </template> <script> import * as echarts from 'echarts' // import jsonp from 'jsonp' import 'e
Vue使用echarts动态渲染地图，点击某省切换展示成此省的下级市
xzy__007的博客
03-28 1922
默认展示主地图，点击某个省市区根据地区编码展示对应的省市区地图，当匹配不到对应的省市区编码则展示主地图。根据地理位置坐标加标记。
[前端技巧]基于 Echarts+AMap 点击地图级联下钻
iChangebaobao的博客
10-22 1001
基于 Echarts+AMap 点击地图级联下钻 原文链接： 基于 Echarts+AMap 点击地图级联下钻 echarts-map 基于echarts+amap获取地图行政区边界实现下钻。提供了常见的分布图、热力图、散点图及综合地图。可应用于一些可视化大数据 平台。 快速安装 克隆项目 git clone https://github.com/biubiubiu01/EchartsMap.git 进入目录 cd EchartsMap 安装依赖 npm install 本地构建 npm run
echars实现中国地图 省级自动切换
luer_LJS的博客
08-24 665
最终实现结果 安装 echars npm install echarts --save 在 main.js 中 引入 import echarts from ‘echarts’ //引入 echars Vue.prototype.$echarts = echarts // 全局化 import “echarts/lib/chart/map”; import ‘echarts/map/js/china.js’ // 引入 中国地图的包(大概) 在页面 直接把 代码 拷贝 进去就可以了 <temp
echarts地图轮播功能+鼠标事件
奔跑的五花肉
05-21 2205
准备个div放map 地图的展示 /* echarts地图和折线图的展示 */ //地图展示 var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/361000_full.json"; var mapChart = echarts.init(document.getElementById('container1')); function showMap(seriesCheckin, seriesDemandSq
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值