• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    jsp使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的。

    首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标.

    地图类型的图表需要关注的元素

    title:标题,显示这个地图所表示的名称

    title: {
              text: '清大云点亮中国',
              subtext: 'Tsingda.Cloud',
              sublink: 'http://www.eee114.com',
              x: 'center',
              y: 'top',
              textStyle: {
                color: '#fff'
              }
            }
    

    toolbox:工具栏,显示一些显示的工具,放大,缩小,查看数据集,下载图像等。

    toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            }
    

    egend:图标显示,当series有多个地图时,这个值用到显示多个地图的图标,可以是横向显示和纵向显示

    legend: {
              x: 'left',
              y: 'top',
              data: ['在线', '离线'],//在线和离线对应的是series的名字
              selectedMode: false,//选中悬浮
              textStyle: {
                color: '#fff'
              }
            }
    

    series:地图显示,用来叠放显示地图,你可以定义多个,它们之间的关系是第一个在最上面,以此类推.

    series: [
              //默认
              {
                name: '底层模版',
                type: 'map',
                mapType: 'china',
                data: provinceMap,
                geoCoord: source,
                itemStyle: {
                  normal: {
                    color: bgColor,
                    borderColor: "#eee",
                    label: {
                      show: true,
                      textStyle: {
                        color: "#fff"
                      }
                    }
                  }, emphasis: { color: "rgba(128, 128, 128, 0.5)" }
                },
              }
    

    markPoint:点标识,用来标识地图上的后,这些点通常是被存储在一个geoCoord对象上,这个对象是一个字典,这在文章开头已经介绍过.

    markPoint: {//动态标记
              large: true,//这个选项,悬浮自动失效
              symbolSize: 2,
              itemStyle: {
                normal: {
                  shadowBlur: 2,
                  shadowColor: 'rgba(37, 140, 249, 0.8)',
                  color: onColor
                }
              },
              data: []
            }
    

    markPoint里的data对象是这个地图上需要显示的点,它是一个字符型数组,用来存储geoCoord里的键!

    setOption:将地图对象添加到指定的地图对象上

     var myChart = echarts.init(document.getElementById('main'));
     var option={};
     myChart.setOption(option);

    动态构建地图上的点标识markPoint

    大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上,这样就可以动态在地图上标示点了

    $.get("/map/GetOffMap", function (data) {
             
              for (var i in data) {
                option.series[0].geoCoord[data[i].longitude + "_" + data[i].latitude] = [parseFloat(data[i].longitude), parseFloat(data[i].latitude)];
                option.series[1].markPoint.data.push({ name: data[i].longitude + "_" + data[i].latitude });
              }
    
              myChart.setOption(option);
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • vue.js中使用echarts实现数据动态刷新功能
    • 详解vue文件中使用echarts.js的两种方式
    • echarts同一页面中四个图表切换的js数据交互方法示例
    • 利用ECharts.js画K线图的方法示例
    • HTML5+JS+JQuery+ECharts实现异步加载问题
    • vue.js如何将echarts封装为组件一键使用详解
    • vue.js+Echarts开发图表放大缩小功能实例
    • jsp利用echarts实现报表统计的实例
    • Echarts.js无法引入问题解决方案
    上一篇:基于jsp的井字游戏实例
    下一篇:jsp利用echarts实现报表统计的实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    jsp使用ECharts动态在地图上标识点 jsp,使用,ECharts,动态,在,