请教echarts地图自定义标点的问题

图片说明

想请教下各位大佬:
①echarts怎样才能将地图上原本的蓝色圆点替换成五角星?我搜索了很多文档说替换为star即可,但是我在地图实例里测试并没有用。。
②需求是当前数据若≤最低价才将五角星标上,这个有自定义方法吗?

求指教求代码示例。。。急在线等

0

1个回答

参考这个示例:http://www.echartsjs.com/gallery/editor.html?c=geo-map-scatter

坐标系改为geo,配置symbol为图片地址就行了,默认的配置没有星星的。。
http://echarts.baidu.com/option.html#series-scatter.symbol

显示不显示五角星自己整好数据,小于你的最低价才添加数据就行了

  symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',

你可以访问上面的地址,将下面的代码贴入左边的输入框运行下就看到效果了


var data = [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
];

var geoCoordMap = {
   '海门':[121.15,31.89],
   '鄂尔多斯':[109.781327,39.608266],
   '招远':[120.38,37.35],
   '舟山':[122.207216,29.985295],
   '齐齐哈尔':[123.97,47.33],
   '盐城':[120.13,33.38],
   '赤峰':[118.87,42.28],
   '青岛':[120.33,36.07],
   '乳山':[121.52,36.89],
   '金昌':[102.188043,38.520089],
   '泉州':[118.58,24.93],
   '莱西':[120.53,36.86],
   '日照':[119.46,35.42],
   '胶南':[119.97,35.88],
   '南通':[121.05,32.08],
   '拉萨':[91.11,29.97],
   '云浮':[112.02,22.93],
   '梅州':[116.1,24.55],
   '文登':[122.05,37.2],
   '上海':[121.48,31.22],
   '攀枝花':[101.718637,26.582347],
   '威海':[122.1,37.5],
   '承德':[117.93,40.97],
   '厦门':[118.1,24.46],
   '汕尾':[115.375279,22.786211],
   '潮州':[116.63,23.68],
   '丹东':[124.37,40.13],
   '太仓':[121.1,31.45],
   '曲靖':[103.79,25.51],
   '烟台':[121.39,37.52],
};

function convertData(data) {
   var res = [];
   for (var i = 0; i < data.length; i++) {
       var geoCoord = geoCoordMap[data[i].name];
       if (geoCoord) {
           res.push({
               name: data[i].name,
               value: geoCoord.concat(data[i].value)
           });
       }
   }
   return res;
}

function randomValue() {
    return Math.round(Math.random()*1000);
}



option = {
    tooltip: {},
    visualMap: {
        min: 0,
        max: 1500,
        left: 'left',
        top: 'bottom',
        text: ['High','Low'],
        seriesIndex: [1],
        inRange: {
            color: ['#e0ffff', '#006edd']
        },
        calculable : true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: 'rgba(0,0,0,0.4)'
                }
            }
        },
        itemStyle: {
            normal:{
                borderColor: 'rgba(0, 0, 0, 0.2)'
            }
        }
    },
    series : [
       {
           type: 'scatter',
           coordinateSystem: 'geo',
           data: convertData(data),
           symbolSize: 20,
           symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',

           label: {
               normal: {
                   formatter: '{b}',
                   position: 'right',
                   show: false
               },
               emphasis: {
                   show: true
               }
           },
           itemStyle: {
               normal: {
                    color: '#F06C00'
               }
           }
        }
    ]
};
1
caozhy
贵阳挖掘机马善福,自备车辆专业挖游泳池 又学习到了!
12 个月之前 回复
qianlingo
qianlingo 感谢!
12 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts中国地图3D各个城市标点demo
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;    &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EDGE&quot;&amp;gt;    &amp;lt;title&amp;gt;3D中国&amp;lt;/title&am
Echarts 地理信息可视化:基于地图显示坐标点信息
Ecahrts 基于地理信息的可视化 Echarts 是一款基于js的交互式图表工具 1、环境 在线调试echarts的功能可以在官网,选择实例下任意一个点开: 然后在左侧的编辑框中即可编辑(其中包含了自动渲染脚本,十分适合入门使用): 或者也可以下载到本地按照普通的js包调试, 这里是对应api教程。 2、地理信息绘制 首先需要明确要显示的地理位置和对应的物理量。 //显示地理...
地图上绘制点和连线
给出经纬度 在地图上绘制路线资源 下载可以直接用
vue echarts自定义地图
地理坐标组件自定义地图(eg:在吉林省地图上添加公主岭、梅河口) 1、不采用echarts 默认的js,json 数据2、使用 geojson(网址:http://geojson.io/#map=8/43.127/123.992)3、Geojson 数据格式:{  &quot;type&quot;: &quot;FeatureCollection&quot;,  &quot;features&quot;: [    {      &quot;type&quot;: &quot;Feat...
百度地图eCharts资源、eCharts 3.0地图Demo
百度地图已经禁止下载资源,2个资源分分享给大家。里面是json包,geometryCouties是市级,geometryProvince省级,大家可以看一下
处理echarts地图省份坐标重叠的方法
//修改地图省份重叠问题 var chinaEchartsObj = echarts.getMap('china'); var geoJSONChina = chinaEchartsObj.geoJson; var allDefProvince = geoJSONChina.features; for(var i=0,len=allDefProvince.length; i&amp;lt;len; i+...
ECharts绘制地图分布,可自定义城市散点
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;作业运行&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;js/echarts.min.js&quot;&amp;gt;&amp;
echarts中国地图坐标弹框
echarts链接:http://gallery.echartsjs.com/editor.html?c=xHkdOlpwWz 代码: tooltip: { trigger: 'item', formatter: function(obj) { var name = obj.name; var value = o...
echarts自定义地图绘制方法
文档介绍了绘制echarts地图的方法,需要自定义地图的同学可以参考
Echarts中自定义地图
在Echarts中,我们很多时候是只需要自己想要的几个区域的地图,这时候提供的地图就不能满足我们的需求,需要我们自己来构建自己想要的地图。 1、首先我们申明一个json对象 var myjson={"type": "FeatureCollection", "features": [ {"type": "Feature","properties":{"id":"11","name":"
android 实现仿Echarts百度地图散点图
 先上效果图。如下: 这个地图散点图的效果是在web端的,使用Echarts很好实现,但是在Android端要实现这个效果就有点困难了。  Web端(BS端)的echarts地址: http://echarts.baidu.com/option.html#geo  http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial...
echarts-map 地图打点小案例
背景:初用echarts看官网的实例,可能对初学者有难度,整理下,来个简单的打点实例。 //页面上给echarts一个容器var myChart0 = echarts.init(document.getElementById('map'));  var geoCoordMap = { //这里放你打点的坐标信息,虚拟信息     '青岛':[119.84348,35.819467,'青岛',12]...
echarts中国地图光点闪烁
echarts中国地图光点闪烁的案例,代码简单易懂,注释清晰,下载后直接可以点击运行
echarts.js图表插件带坐标点和放大缩小地图
基于ECharts 带坐标点和放大缩小的省级地图
echarts地图tooltip自动轮播
echarts的tooltip按数据轮播 核心代码 var mycharts = echarts.init(this.$refs.echartsMap); var option ={}; mycharts.setOption(option); var index = 0; //播放所在下标 this.mTime = setInterval(function() { ...
echarts 地图各省份区块自定义颜色、提示框格式化数据
一:页面初始化时加载echarts配置信息 var myChart = echarts.init(document.getElementById('chart4')); var tipDate = &quot;&quot;; //份额连续下降预警数据 var option3_2 = { title : { text: '', subtext: '', ...
echarts自作地图显示散点图 tooltip自定义内容
echarts自作地图高亮显示散点图 tooltip自定义内容。
geoJson随机点生成(echarts)
先放效果图 代码 https://gitee.com/hugo110/echarts_520/tree/master/fanfan_map 下载后打开 randomGeoJson.html 就可以看到 根据配置项输入就可以,有默认的地图和配置 主要利用了一个判断点是否在多边形内的算法 下边是代码贴图 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html...
echarts地图坐标数据+省份地图数据
echarts地图坐标数据+省份地图数据,用于切换点击切换省份的时候,里面需要用到的地图数据。和每个省份的坐标数据
Echarts3里的地图标记点事件效果实现
echarts官方api:http://echarts.baidu.com/index.html
echarts使用自定义地图移动文字与formatter失效解决
一、地图文字位置有偏移或需要进行移动 1. 直接修改JSON文件 打开自定义地图的JSON文件,可以看到内容为 其中的cp数据则为当前地图文字显示的坐标位置,与实际经纬度相同。可以通过经纬度查询查找相应地点的经纬度,并修改图中的cp数据,即可达到修改自定义地图文字位置的目的。但直接修改总归是不太合适,所以也可以采取第二种方法,在代码中修改。 2.获取地图JSON数据进行修改 直接上图...
echarts3.0 测试用例包括江苏省地图绘制
echarts3.0如何在myeclipse项目中使用,以及如何绘制江苏省地图和中国地图等等样例 echarts3.0如何在myeclipse项目中使用,以及如何绘制江苏省地图和中国地图等等样例
echarts 在中国地图上添加小旗标识
echarts在中国地图上面添加小旗标识,并用不同颜色进行呢分类区分。
echarts-地图添加悬浮文本标签
echarts2在地图上添加悬浮的文本标签
利用echarts highcharts 实现自定义地图 关系图效果 侧边3D柱形图饼图散点图
github 地址:  https://github.com/Gengshaoxuan/medataMapgithub 地址:  https://github.com/Gengshaoxuan/medataMap
使用echarts进行创建中国地图---根据经纬度标记点数过大时,点的位置出现卡顿不随地图移动、放大而变化的优化方案
在我的一个项目中,出现了需要定义5000个坐标的数据量的展示,但是当数据量达到3000后时,点位初始位置没问题,但是地图在拖动变化时点位就固定在一个地方不动,最后发现下面的方法,希望对大家有用。 ...
Echarts坐标轴中的打点图,根据值得大小改变点的大小
如果X轴刻度值不是数值,而是一些单位名称、时间、公司等,那么我们就要在xAxis中data中写出要展示的横坐标,纵坐标拷数据去获取一般情况下,如果纵坐标也不是数值,那么我们就可以和X轴刻度一样去在yAxis中设置一个data来接收这个值。 具体代码如下: option = { xAxis: { splitLine: { show: fal...
echarts地图svg拓展实例
开始在使用echarts地图的svg拓展的时候遇到required('echarts/util/mapData/params').params这里一直报错,在网上也没有很好的解释,然后就有了这个demo,给大家在学习echarts的时候提供一些方便
angular7+echarts实现地图缩放和切换
使用angular7+echarts实现地图滚轮缩放。中国地图默认展示省,放大后依次展示省会城市和全部城市。世界地图默认展示主要国家,放大后展示所有国家
在Echart的地图上增加新的位置
最近刚使用echart,遇到一个需求,需要在china.js显示的地图上增加地级市的坐标并显示出来。因为china.js里面包含的数据都是省级的,没有地级市或者更小的行政单位的位置,所以首先需要获取新增点的经纬度。 先下载地图js文件:github上的地图。该路径下有地图文件。如果不知道怎么下载的话,可以直接下载整个项目,再把项目下的map文件夹复制出来就行,china.js就在里面。echar...
echarts各省地图坐标数据
echarts各省地理数据,里面包含了全国各地的地图坐标信息数据
echarts 区域地图 添加标注
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&a
用于echarts地图的中国地县级市经纬度坐标
整理了一下,并特别将JSON文件格式化了,更便于使用.如有不足,希望大家能补充.
ECharts中国地图篇-名称经纬度调整
一、 网址: http://echarts.baidu.com/download.html 点击: 完整 下载文件: echarts.min.js网址: http://echarts.baidu.com/download-map.html 点击: 中国地图 - JS 下载文件:
ECharts的简单使用
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的...
echarts地图飞线实现
echarts地图展示、地图飞线,地图线行展示,大气、简洁、好看。
echarts自定义地图(想怎么画就怎么画)
echarts自定义地图,各区地图,街道地图,区县地图,详细地图,省市地图
echarts地图json实现
echarts3.0以后取消了内置地图,可以用百度地图或者json或者js。本文章用的json 首先导入jquery和echarts。 只要输入每个城市或者省份的json就行。 这个是全国各省市 json资源:https://download.csdn.net/download/weixin_38959210/10543965 因为用到了ajax,所以必须有服务才能运行。 &lt;!...
angular超好用百度地图组件库-[iwe7-map]
iwe7-map,百度地图组件,git地址 布局 selector 说明 map-outlet 地图布局 map-container 地图实例 定位 selector 说明 [mapContent] 地图内容区 [mapOptions] 地图参数调整 mapOptions // 当前城市 @Input() currentCity: str...
echarts 迁徙图+百度地图
echarts 迁徙图+百度地图