echarts动态地图与柱状图一起轮播设置

已于 2023-12-27 16:37:13 修改
阅读量996 收藏 13
点赞数 8
文章标签： echarts 前端 javascript
于 2023-12-27 13:54:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52544526/article/details/135241550
版权

先看效果样式

一、整体设置

1.建议使用series是map的设置

分别设置柱状图与地图的内容与样式

series: [
    {
      type: "bar",
      emphasis: {
        focus: "self",
      },
      data: wuhanqx.value.number,
      barWidth: 20,
      itemStyle: {
        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
        normal: {
          //柱形图圆角，初始化效果
          barBorderRadius: [0, 15, 15, 0],
        },
      },
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "rgb(55,66,219)", // 100% 处的颜色
          },
          {
            offset: 1,
            color: "rgb(76,160,202)", // 0% 处的颜色
          },
        ],
        global: false,
      },
      label: {
        show: true,
        position: "right",
        color: "#fff",
      },
    },
    {
      type: "map",
      // emphasis: {
      //   focus: "self",
      // },
      map: "wuhanmap",
      zoom: 1.2,
      emphasis: {
        itemStyle: {
          areaColor: "#4da9e1",
        },
        label: {
          color: "#020f4a",
        },
      },
      left: "30%",
      data: wuhanqx.value.number,
      itemStyle: {
        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
        normal: {
          areaColor: "#020f4a",
          borderColor: "#2256dd",
        },
      },
      label: {
        show: true,
        position: "right",
        color: "#bbdaff",
      },
      tooltip: {
        show: true,
        formatter: (params) => {
          return `${params.value}<br />工会数`;
        },
        position: function (point, params, dom, rect, size) {
          return point;
        },
        extraCssText: `
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1471d6;
    border: 2px solid #59caef;
    color: #fff;
    text-align: center;
    color:#a8f6ff;
    font-size:12px;`,
      },
    },
  ],

2.分别设置其他配置项

grid: {
    left: "8%",
    top: "12%",
    bottom: "5%",
    right: "75%",
  },
  tooltip: {},
  xAxis: {
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false, //隐藏x轴显示内容
    },
  },
  yAxis: [
    {
      data: wuhanqx.value.name,
      name: "{icon|}工会分布",
      nameTextStyle: {
        color: "#c4d7fb",
        fontWeight: "bold",
        fontSize: 16,

        rich: {
          icon: {
            width: 16,
            height: 16,
            color: "#c4d7fb",
            backgroundColor: {
              image: iconTitle,
            },
          },
        },
      },
      // inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false, //是否显示刻度
      },
      axisLabel: {
        show: false,
      },
      offset: -24,
    },
    {
      //名称
      type: "category",
      offset: -10,
      position: "left",
      axisLine: {
        show: false,
      },
      inverse: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#bbdaff",
        align: "left",
        verticalAlign: "bottom",
        lineHeight: 40,
        fontSize: 14,
      },
      data: wuhanqx.value.name,
    },
  ],

3.设置定时器让地图与柱状图一起轮播显示

let loopTimer = null;
  let loopIndex = 0;
  let oldIndex = 0;
  let overIndex = 0;
  loopTimer = setInterval(() => {
    myChart.dispatchAction({
      type: "hideTip",
      seriesIndex: [0, 1],
      dataIndex: loopIndex - 1,
    });
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: [0, 1],
      dataIndex: loopIndex - 1,
    });
    if (loopIndex >= wuhanqx.value.number.length) {
      loopIndex = 0;
    }
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 1,
      dataIndex: loopIndex,
    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: [0, 1],
      dataIndex: loopIndex,
    });
    oldIndex = loopIndex;
    loopIndex += 1;
  }, 2600);

  myChart.on("mouseover", function (params) {
    clearInterval(loopTimer);
    if (params.seriesType == "map") {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: [0, 1],
        dataIndex: params.dataIndex,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: [0, 1],
        dataIndex: params.dataIndex,
      });
    } else {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 1,
      });
      // myChart.dispatchAction({
      //   type: "hideTip",
      //   seriesIndex: [0, 1],
      //   dataIndex: [0, 14],
      // });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: params.dataIndex,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 1,
        dataIndex: params.dataIndex,
      });
    }
    overIndex = loopIndex;
    loopIndex = params.dataIndex;
  });
  myChart.on("mouseout", function (params) {
    clearInterval(loopTimer);
    loopTimer = setInterval(() => {
      myChart.dispatchAction({
        type: "hideTip",
        seriesIndex: [0, 1],
        dataIndex: oldIndex,
      });
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
        dataIndex: oldIndex,
      });
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
        dataIndex: overIndex,
      });
      if (loopIndex >= wuhanqx.value.number.length) {
        loopIndex = 0;
      }
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 1,
        dataIndex: loopIndex,
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: [0, 1],
        dataIndex: loopIndex,
      });
      oldIndex = loopIndex;
      loopIndex += 1;
    }, 2600);
  });

4.鼠标移入或者移出时，去掉活加上定时器

  myChart.on("mouseover", function (params) {
    clearInterval(loopTimer);
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: [0, 1],
    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: [0, 1],
      dataIndex: params.dataIndex,
    });
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: [0, 1],
      dataIndex: params.dataIndex,
    });
    loopIndex = params.dataIndex;
  });
  myChart.on("mouseout", function (params) {
    clearInterval(loopTimer);
    loopTimer = setInterval(() => {
      myChart.dispatchAction({
        type: "hideTip",
        seriesIndex: [0, 1],
        dataIndex: loopIndex - 1,
      });
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
        dataIndex: loopIndex - 1,
      });
      if (loopIndex >= wuhanqx.value.number.length) {
        loopIndex = 0;
      }
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 1,
        dataIndex: loopIndex,
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: [0, 1],
        dataIndex: loopIndex,
      });
      loopIndex += 1;
    }, 2600);
  });

二、细节样式改变

1.改变tooltip的样式

formatter:对显示框内容的设置

        可以对函数里面进行渲染调整

position:显示框显示的位置

        默认是根据鼠标显示的，设置成数组的话分表表示x，y两轴对应的值，可以是数字，也可以是百分比都是对应地图的，例如[10,23]或[10%,20%]

extraCssText:对显示框样式进行更改

        与css写法一致

tooltip: {
        show: true,
        formatter: (params) => {
          return `${params.value}<br />工会数`;
        },
        position: function (point, params, dom, rect, size) {
          return point;
        },
        extraCssText: `
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1471d6;
    border: 2px solid #59caef;
    color: #fff;
    text-align: center;
    color:#a8f6ff;
    font-size:12px;`,
      },

2.富文本样式，添加小图标图片

{icon| }:富文本标签

        对样式进行跳转，引入图片。iconTitle是我引入的图片地址

yAxis: [
    {
      data: wuhanqx.value.name,
      name: "{icon|}分布",
      nameTextStyle: {
        color: "#c4d7fb",
        fontWeight: "bold",
        fontSize: 16,
        rich: {
          icon: {
            width: 16,
            height: 16,
            color: "#c4d7fb",
            backgroundColor: {
              image: iconTitle,
            },
          },
        },
      },
      // inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false, //是否显示刻度
      },
      axisLabel: {
        show: false,
      },
      offset: -24,
    },]

三、完整代码

<template>
  <div class="map">
    <div class="tbia">
      <div class="allbiao">
        <p>截止今日工会总数为：</p>
        <div>2</div>
        <div>0</div>
        <div>5</div>
        <div>3</div>
        <div>5</div>
      </div>
    </div>
    <div id="wuhanmap"></div>
  </div>
</template>

<script setup>
import whmap from "./json/wuh.js";
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import iconTitle from "../../assets/dsj.png";
let top = {
  label: { color: "#fff" },
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "rgb(236,111,58)", // 100% 处的颜色
        },
        {
          offset: 1,
          color: "rgb(246,201,148)", // 0% 处的颜色
        },
      ],
      global: false,
    },
  },
};
let wuhanqx = ref({
  name: [
    "汉南区",
    "硚口区",
    "黄陂区",
    "东西湖区",
    "汉阳区",
    "江汉区",
    "江夏区",
    "蔡甸区",
    "武昌区",
    "青山区",
    "新洲区",
    "江岸区",
    "洪山区",
  ],
  number: [
    { name: "汉南区", value: "12" },
    { name: "硚口区", value: "42" },
    { name: "黄陂区", value: "49" },
    { name: "东西湖区", value: "79" },
    { name: "汉阳区", value: "85" },
    { name: "江汉区", value: "93" },
    { name: "江夏区", value: "97" },
    { name: "蔡甸区", value: "109" },
    { name: "武昌区", value: "109" },
    { name: "青山区", value: "113" },
    { name: "新洲区", value: "155", ...top },
    { name: "江岸区", value: "260", ...top },
    { name: "洪山区", value: "756", ...top },
  ],
});

let option = {
  grid: {
    left: "8%",
    top: "12%",
    bottom: "5%",
    right: "75%",
  },
  tooltip: {},
  xAxis: {
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false, //隐藏x轴显示内容
    },
  },
  yAxis: [
    {
      data: wuhanqx.value.name,
      name: "{icon|}分布",
      nameTextStyle: {
        color: "#c4d7fb",
        fontWeight: "bold",
        fontSize: 16,

        rich: {
          icon: {
            width: 16,
            height: 16,
            color: "#c4d7fb",
            backgroundColor: {
              image: iconTitle,
            },
          },
        },
      },
      // inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false, //是否显示刻度
      },
      axisLabel: {
        show: false,
      },
      offset: -24,
    },
    {
      //名称
      type: "category",
      offset: -10,
      position: "left",
      axisLine: {
        show: false,
      },
      inverse: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#bbdaff",
        align: "left",
        verticalAlign: "bottom",
        lineHeight: 40,
        fontSize: 14,
      },
      data: wuhanqx.value.name,
    },
  ],
  series: [
    {
      type: "bar",
      emphasis: {
        focus: "self",
      },
      data: wuhanqx.value.number,
      barWidth: 20,
      itemStyle: {
        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
        normal: {
          //柱形图圆角，初始化效果
          barBorderRadius: [0, 15, 15, 0],
        },
      },
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "rgb(55,66,219)", // 100% 处的颜色
          },
          {
            offset: 1,
            color: "rgb(76,160,202)", // 0% 处的颜色
          },
        ],
        global: false,
      },
      label: {
        show: true,
        position: "right",
        color: "#fff",
      },
    },
    {
      type: "map",
      // emphasis: {
      //   focus: "self",
      // },
      map: "wuhanmap",
      zoom: 1.2,
      emphasis: {
        itemStyle: {
          areaColor: "#4da9e1",
        },
        label: {
          color: "#020f4a",
        },
      },
      left: "30%",
      data: wuhanqx.value.number,
      itemStyle: {
        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
        normal: {
          areaColor: "#020f4a",
          borderColor: "#2256dd",
        },
      },
      label: {
        show: true,
        position: "right",
        color: "#bbdaff",
      },
      tooltip: {
        show: true,
        formatter: (params) => {
          return `${params.value}<br />数`;
        },
        position: function (point, params, dom, rect, size) {
          return point;
        },
        extraCssText: `
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1471d6;
    border: 2px solid #59caef;
    color: #fff;
    text-align: center;
    color:#a8f6ff;
    font-size:12px;`,
      },
    },
  ],
};
onMounted(() => {
  var myChart = echarts.init(document.getElementById("wuhanmap"));
  echarts.registerMap("wuhanmap", whmap);

  myChart.setOption(option);
  let loopTimer = null;
  let loopIndex = 0;
  let oldIndex = 0;
  let overIndex = 0;
  loopTimer = setInterval(() => {
    myChart.dispatchAction({
      type: "hideTip",
      seriesIndex: [0, 1],
      dataIndex: loopIndex - 1,
    });
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: [0, 1],
      dataIndex: loopIndex - 1,
    });
    if (loopIndex >= wuhanqx.value.number.length) {
      loopIndex = 0;
    }
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 1,
      dataIndex: loopIndex,
    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: [0, 1],
      dataIndex: loopIndex,
    });
    oldIndex = loopIndex;
    loopIndex += 1;
  }, 2600);

  myChart.on("mouseover", function (params) {
    clearInterval(loopTimer);
    if (params.seriesType == "map") {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: [0, 1],
        dataIndex: params.dataIndex,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: [0, 1],
        dataIndex: params.dataIndex,
      });
    } else {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 1,
      });
      // myChart.dispatchAction({
      //   type: "hideTip",
      //   seriesIndex: [0, 1],
      //   dataIndex: [0, 14],
      // });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: params.dataIndex,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 1,
        dataIndex: params.dataIndex,
      });
    }
    overIndex = loopIndex;
    loopIndex = params.dataIndex;
  });
  myChart.on("mouseout", function (params) {
    clearInterval(loopTimer);
    loopTimer = setInterval(() => {
      myChart.dispatchAction({
        type: "hideTip",
        seriesIndex: [0, 1],
        dataIndex: oldIndex,
      });
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
        dataIndex: oldIndex,
      });
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: [0, 1],
        dataIndex: overIndex,
      });
      if (loopIndex >= wuhanqx.value.number.length) {
        loopIndex = 0;
      }
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 1,
        dataIndex: loopIndex,
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: [0, 1],
        dataIndex: loopIndex,
      });
      oldIndex = loopIndex;
      loopIndex += 1;
    }, 2600);
  });
});
</script>

<style lang="scss" scoped>
.map {
  color: #fff;
  position: relative;

  .tbia {
    width: 100%;
    height: 10%;
    margin-top: 12px;
    // border: 1px solid springgreen;
    position: relative;

    .allbiao {
      position: absolute;
      left: 36%;

      p {
        color: #00a1fe;
        text-align: center;
        margin-bottom: 12px;
      }

      div {
        float: left;
        border: 2px solid #3b77dd;
        font-weight: bolder;
        font-size: 34px;
        color: #66efff;
        padding: 10px;
        margin-right: 10px;
        background: linear-gradient(
          to bottom,
          rgba(44, 91, 213, 0) 50%,
          rgba(44, 91, 213, 0.5) 50%
        );
        border-radius: 4px;
      }
    }
  }

  #wuhanmap {
    width: calc(100%);
    height: calc(90%);
    // border: 1px solid springgreen;
  }
}

.custom-tooltip {
  position: absolute;
  pointer-events: none;
  /* 防止tooltip遮挡数据点 */
}

.tooltip-content {
  padding: 4px;
}
</style>

四、引入的地图json数据

可以在阿里云下载地图json数据，我下载的数武汉的数据，地址在下方

https://datav.aliyun.com/portal/school/atlas/area_selector
 

花落若№相随
关注
Echarts柱状图和折线图动态轮播展示
shaoxianlu0818的博客
01-21 2702
想通过Echarts实现动态轮播功能，代码如下 原创不易，转载请附上原创谢谢， 以下代码复制可用 var dateCity = [ "北京", "上海", "广东", "浙江", "江苏", "山东", "河南", "福建", "安徽", "湖北", "湖南", "辽宁", "吉林",
Echarts柱状图的相关设置
memoryI的博客
07-04 1517
第一步：基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('插入图表的id名')); 第二步：制定图表的配置项和数据 var option = { //设置图表的标题 title: [{ //设置标题的内容 text: '年龄比...
Echarts地图tips轮播.rar
06-06
实现了echart地图上tips的轮播。点击点图跳转到当前tips，鼠标经过停止轮播的功能
Echarts地图+覆盖物提示框轮播效果
02-18
提示：springboot项目，下载之后需要运行该项目，然后才能访问看到效果。代码不多，谨慎下载。 主要功能：地图缩放拖动、区域点击往返市区地图、双击地图全屏放大、轮播带图片提示框 需要的快去下载吧！！！
vue2.0+echarts实现多省份地图加双柱状图展示（保姆级教程）
最新发布
simpleMan8023的博客
07-25 467
首先放效果图 开始之前我默认您已成功下载和导入相关插件打开 http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6 鼠标点击你想要的省份 然后在右边根据需要看是否勾选（包含子区域），如果勾选了就会有市地区级的坐标，我这个项目是不需要的，所以不勾选，然后根据需要点击第三行------其他类型 点击下载保存 你会得到该省份的 文件 ，然后依次下载需
echarts开发的自动旋转map3D下钻和柱图地图
09-18
代码分析见：https://lockdatav.blog.csdn.net/article/details/120369570 1.地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问; 2.目录说明 ├─index.html ........默认启动页 ├─map ........geojson地理数据 │ ├─chongqing.json ........重庆市地理数据 │ ├─city........各区县地理数据 ├─js ........JS封装库 │ ├─app.js ........下钻核心库，具体见文件注释
echarts地图 可视化大屏使用echarts-map实现地图轮播效果
qq_45630675的博客
12-09 6826
echarts-map 地图实现轮播效果
Echarts实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
echarts地图自动轮播
yu_yuxiaoer的博客
01-18 1432
地图自动轮播 需求：地图有数据的置灰并且不轮播，有数据的轮播展示数据 /* 请勿在原图上直接修改保存 */ function mapTooltipClick(name) { alert(name) } function tooltipCharts() { console.log(arguments[0]); var myChart1 = echarts.init(document.getElementById('tooltipBarId')); var option =
Echarts实现的地图关联柱状图Demo
07-15
Echarts实现的地图关联柱状图效果，大屏展示和大数据分析可以参考的DEMO
echarts数据地图自动轮播展示
yu_yuxiaoer的博客
07-04 2134
地图
Echarts 地图+散点图结合 +闪点+轮播
12-18
Echarts 实现地图+散点图结合 +闪点+轮播 资源最好在工程里运行 要不然地图json文件加载不到
在Echarts 地图上画柱状图
06-26
根据省份位置，在Echarts 地图上画柱状图， 可点击放大单个柱状图
echarts-5.1.2世界地图demo
12-07
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及地图等。在“echarts-5.1.2世界地图demo”这个项目中，重点是利用 ECharts 的地图功能来实现一个世界...
基于Echarts2.2.7的带时间轴地图展示源码（Html5+JavaScript）极简版
06-28
这是一份基于Echarts2.2.7开发的带时间轴的echarts地图和柱状图综合展示Html页面的源码极简版，其中包含了如何在Html中集成Echarts组件，同时集成了相关的时时间轴组件，源码中涉及的组件已经打包到一起，比如...
动态排序柱状图
月满闲庭的博客
06-25 1791
动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。 动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。 yAxis.realtimeSort 设为 true，表示开启 Y 轴的动态排序效果 yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列 yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长 yAxis.animationDuratio
echarts堆叠立体柱状图+混合折线+轮播
weixin_72552407的博客
05-08 876
堆叠 立体 柱状图
【Echarts】二维地图叠加柱状图
心生的小鱼专栏
06-25 1114
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts 地图</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src..
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值