Vue3.0按需引入vue-echarts6.x版本—0.3-Echarts5.x地图自动轮播数据

前两篇回顾：

第一篇：Vue3.0按需引入vue-echarts6.x版本—0.1-绘制中国地图

第二篇：Vue3.0按需引入vue-echarts6.x版本—0.2-Echarts5.x地图点击选中样式修改

通过前两篇文章的讲解，目前我们已经可以绘制地图，至于是省级地图或者全国地图或者实际地图都不在话下，地图有了，那接着来给地图加上数据吧。

正文 - 本篇知识点：

今天来分享“Echarts5.x下的地图数据自动轮播”，先来关注几个小的知识点：

Echarts5.x - visualMap

地图数据的渲染需要用到这个配置项，那这个配置项是干嘛的呢？先来看下官方给的说明：

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。

视觉映射组件？这句话好像是用一个名词去解释另一个名词。

说人话：地图的数据渲染需要这玩意儿，不给地图设置这个，数据渲染就没得搞(在本文的情况下是这样，在不一定的情况下，我们另当别论哈~) 。

visualMap 有两个type，区别如下：

	type="continuous"	type="piecewise"
定义	连续型视觉映射组件	分段型视觉映射组件
视觉表现

其他的属性大差不大，可以查阅官方文档

Echarts5.x - tooltip

提示框组件。Echarts@5.0.0新增了一些配置项及属性，具体如下：

本次暂时没有使用这些配置项及属性，这些会在之后“大屏”的系列中进行详细讲解示例。

tooltip. className

string

指定 tooltip 的 DOM 节点的 CSS 类。（只在 renderMode=‘html’ 模式下生效）。

例如:

className: 'echarts-tooltip echarts-tooltip-dark'

tooltip. renderMode

string

浮层的渲染模式，默认以 html 即额外的 DOM 节点展示 tooltip；此外还可以设置为 'richText' 表示以富文本的形式渲染，渲染的结果在图表对应的 Canvas 中（目前 SVG 尚未支持富文本），这对于一些没有 DOM 的环境（如微信小程序）有更好的支持。

tooltip.textStyle. textBorderType 

string / number / Array

文字本身的描边类型。

可选：

• 'solid'
• 'dashed'
• 'dotted'

自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如：

{
    textBorderType: [5, 10],
    textBorderDashOffset: 5
}

tooltip.textStyle. textBorderDashOffset

number

用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset。

                                                ——引自Echarts 官网 

Echarts5.x - echartsInstance. dispatchAction、actions

触发图表行为，可查阅dispatchAction - 官方文档；actions - 官方文档

---------接下来，进入代码吧------

正文 - 代码片段：

定义模拟数据

mapData: [
   ……
    { name: "天津市", value: 924},
    { name: "黑龙江省", value: 824},
    { name: "四川省", value: 724},
    { name: "陕西省", value: 624},
    { name: "安徽省", value: 624},
    { name: "宁夏回族自治区", value: 824},
    ……
],

Vue3.0 watch

在 about.vue(父组件) 定义数据，通过props进行父子数据传输。

 <china-map :mapData="mapData" />

子组件在接收时，需要watch进行监听。

props: {
  mapData: {
    type: Array,
  },
},
setup(props) {
  watch(
    () => props.mapData,
    (val) => {},
    {
      deep: true,
    }
  );
},

Echarts5.x - 本次地图绘制新增的配置项

visualMap: {
    show: true,
    type: "piecewise",
    min: 0,
    max: 1000,
    realtime: false,
    calculable: false,
    inRange: {
      color: [
            "#012a77",
            "#45A5F8"
        ],
    },
    textStyle: {
      color: "#fff",
    },
},
tooltip: {
    trigger: "item",
    backgroundColor: "rgb(71,166,248,0.8)",
    borderWidth: 1,
    borderColor: "#a2b9e5",
    padding: 10,
    confine: true,
    textStyle: {
      color: "#fff",
      fontSize: 20,
      fontFamily: "Microsoft YaHei",
    },
    formatter: function (params) {
      return `${params.name}：${params.value}`;
    },
},

 Echarts5.x - 自动轮播

本次实现自动轮播的主要逻辑，如下：

1. 取得当前series[0].data.length，为了在轮播index时可以通过取余的方式避免index轮空；
2. 设置 定时器setInterval 触发自动轮播；
   1. 取消目前地图上所有的高亮：type: "downplay"；
   2. 高亮当前index的地图区域：type: "highlight"；
   3. 显示当前index地图区域的tooltip：type: "showTip"。

/**
 * 赋值定时器轮播
 * @domChart  当前echarts对象
 * @dataIndex 当前index值
*/
const setTimeData = (domChart, dataIndex) => {
    domChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
    });
    domChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: dataIndex,
    });
    domChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: dataIndex,
    });
};

要特别说明下：自动轮播呢，有几个需要注意的点：

1. 当鼠标悬浮在地图区域的时候，需要清除定时器；
2. 在鼠标离开后，可以再开始进行自动轮播；
3. 在离开页面时，要注销掉定时器，不然可能会造成内存溢出。

----------------

那讲到这里呢，关键代码都讲到了，希望大家多多关注呀，一起进步，谢谢。

至此，在vue3.0中使用vue-echarts6.x版本 - Echarts5.x地图自动轮播数据完成。

后续会接着深入，在全部更新完成后，会整理成一个系列。

文章会同步更新到微信公众号 “DataShow Charts”，可以扫码关注下，源码的链接会发在公众号的文章里，希望多多关注，谢谢你呀~。