echarts数据地图自动轮播展示

最新推荐文章于 2024-04-07 17:13:33 发布

鱼小二

最新推荐文章于 2024-04-07 17:13:33 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：日常积累文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/yu_yuxiaoer/article/details/125603601

echarts数据地图（二）

1.业务需求

省份有无数据使用不同颜色区分
有数据省份鼠标操作显示小手样式，无数据省份鼠标操作显示箭头样式
有数据省份操作有选中颜色变化，无数据省份操作无变化

2.效果图示

在这里插入图片描述

3.相关代码

// 地图渲染方法
initPlaceOrderMap() {
      let vm = this;
      let mapName = "china";
      let data = [
        { name: "北京", value: 0 },
        { name: "天津", value: 0 },
        { name: "河北", value: 0 },
        { name: "山西", value: 0 },
        { name: "内蒙古", value: 0 },
        { name: "辽宁", value: 0 },
        { name: "吉林", value: 0 },
        { name: "黑龙江", value: 0 },
        { name: "上海", value: 0 },
        { name: "江苏", value: 0 },
        { name: "浙江", value: 0 },
        { name: "安徽", value: 0 },
        { name: "福建", value: 0 },
        { name: "江西", value: 0 },
        { name: "山东", value: 0 },
        { name: "河南", value: 0 },
        { name: "湖北", value: 0 },
        { name: "湖南", value: 0 },
        { name: "重庆", value: 0 },
        { name: "四川", value: 0 },
        { name: "贵州", value: 0 },
        { name: "云南", value: 0 },
        { name: "西藏", value: 0 },
        { name: "陕西", value: 0 },
        { name: "甘肃", value: 0 },
        { name: "青海", value: 0 },
        { name: "宁夏", value: 0 },
        { name: "新疆", value: 0 },
        { name: "广东", value: 0 },
        { name: "广西", value: 0 },
        { name: "海南", value: 0 },
      ];
      let toolTipData = this.mapTooltipData
      let aData=[]
      for(let index=0;index<data.length;index++){
        for(let i=0;i<toolTipData.length;i++){
          if(data[index].name.slice(0,2)==toolTipData[i].proName.slice(0,2)){
            data[index].value=toolTipData[i].roundMoneyUms;
            aData.push(data[index])
            break
          }
        }
      }
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          extraCssText: 'z-index: 2'
        },
        visualMap: {
          show:false,
          min: 0,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: false,
          orient: 'horizontal',
          inRange: {
              color: ['#B9D8F8', '#B9D8F8'],
              symbolSize: [30, 100]
          }
      },
        grid: {
          // show: true,
          right: "10%",
          top: 5,
          bottom: "10%",
          left: "10%",
        },
        geo: [
          {
            map: mapName,
            zlevel: -1,
            zoom: 1.2,
            silent: true,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            roam: false,