ECharts 轮流高亮中国地图各个省份

ivan_qhz 发布于2019-08-21 16:47 / 1918人阅读

摘要：最早我是想通过方法去改变选中的省份，但是没有起作用，如果你知道这个方法怎么实现，麻烦你可以告诉我。指定图表的配置项和数据中国默认高亮安徽省安徽使用刚指定的配置项和数据显示图表。

最早我是想通过dispatchAction方法去改变选中的省份，但是没有起作用，如果你知道这个方法怎么实现，麻烦你可以告诉我。
我实现的方法是另外一种。

dispatchAction({
    type: "geoSelect",
    // 可选，系列 index，可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选，系列名称，可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选，数据名称，在有 dataIndex 的时候忽略
    name?: string
})

后来我改变了一个方法。这个方法的核心思路是定时获取图标的配置，然后更新配置，最后在设置配置。

var myChart = echarts.init(document.getElementById("china-map"));

var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: "item",
        formatter: "{b}"
    },
    series: [
        {
            name: "中国",
            type: "map",
            mapType: "china",
            selectedMode : "single",
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                // 默认高亮安徽省
                {name:"安徽", selected:true}
            ],
            itemStyle: {
                normal: {
                    areaColor: "rgba(255,255,255,0.5)",
                    color: "#000000",
                    shadowBlur: 200,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                },
                emphasis:{
                    areaColor: "#3be2fb",
                    color: "#000000",
                    shadowBlur: 200,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on("click", function(params) {
    console.log(params);
});

setInterval(function(){
    var op = myChart.getOption();
    var data = op.series[0].data;

    var length = data.length;

    data.some(function(item, index){
        if(item.selected){
            item.selected = false;
            var next = (index + 1)%length;
            data[next].selected = true;
            return true;
        }
    });

    myChart.setOption(op);

}, 3000);

后续补充

我从这里发现：https://github.com/ecomfe/ech...，选中地图的写法是这样的，而试了一下果然可以。主要是type要是mapSelect,而不是geoSelect

myChart.dispatchAction({
    type: "mapSelect",
    // 可选，系列 index，可以是一个数组指定多个系列
    // seriesIndex: 0,
    // 可选，系列名称，可以是一个数组指定多个系列
    // seriesName: string|Array,
    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
    // dataIndex: number,
    // 可选，数据名称，在有 dataIndex 的时候忽略
    name: "河北"
});

云服务器 GPU云服务器轮流播放拖动省份全国省份城市省份管理java

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88730.html

VUE 记一次高德地图和Echarts（中国地图）

摘要：效果图准备工作高德地图申请安装中国地图高德地图官方点我进入创建动态创建标签后的是需要的插件中国地图安装开始使用创建组件写入需要的分布指数高低写入高德地图需要的效果图 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 准备工作高德地图申请key 安装Echarts 中国地图高德地图官方API...

KoreyLee 2019-05-27 17:42 评论0 收藏0
前端模块化开发demo之攻击地图

摘要：最终自定义事件封装在上面的链接中看到，不仅应用层页面的按钮可以切换地图维度，直接点击地图里的中国区域也能切换地图，同时又能通知到应用层页面的按钮改变状态。前言很早以前写过一篇用RequireJS包装AjaxChart，当时用Highcharts做图表，在其上封装了一层ajax，最后只是简单套用了一下requireJS。由于当时自己才接触模块化，理解层面还太浅，后来经过其他项目的磨练...

xiaowugui666 2019-08-19 17:10 评论0 收藏0
两个echarts地图联动高亮区域

摘要：项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动，曾尝试了不好使，所以自己写了这段代码。遇见的坑使用引发，会发现只能显示很短的时间，所以我鼠标移入地图时，给另一个地图设置和。而获取的时候会成为数组，也许是为了满足多个的需求。项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动，曾尝试了connect不好使，所以自己写了这段代码。代码思路为：鼠标移入地图时，另一侧的地图根据鼠标...

mcterry 2019-08-21 18:21 评论0 收藏0
echarts实现省与中国地图之间的切换

摘要：实现省与中国地图之间的切换数据可视化这东西到处都需要使用或早或晚这东西都要接触到自然地图和可视化结合在一起也是早晚的需求虽然地图之间的切换只是一个很小的功能但说不定什么时候就要用到现在看一看里面的坑也是好的效果差不多就是这样点击省切换到省 echarts实现省与中国地图之间的切换数据可视化这东西到处都需要使用,或早或晚echats这东西都要接触到,自然地图和可视化结合在一起也是早晚的...

malakashi 2019-08-23 16:17 评论0 收藏0