先看一段关于初始化Echart   js的使用 

myChart = echarts.init(document.getElementById('mainChart'));

        var option;
        option = {
           title : {
               text: '全国主要城市空气质量(pm2.5)',
               subtext: 'data from PM25.in',
               sublink: 'http://www.pm25.in',
               x:'center'
           },
           tooltip : {
               trigger: 'item'
           },
           legend: {
               orient: 'vertical',
               x:'left',
               data:['pm2.5']
           },
           dataRange: {
               min : 0,
               max : 500,
               calculable : true,
               color: ['maroon','purple','red','orange','yellow','lightgreen']
           },
           toolbox: {
               show : true,
               orient : 'vertical',
               x: 'right',
               y: 'center',
               feature : {
                   mark : {show: true},
                   dataView : {show: true, readOnly: false},
                   restore : {show: true},
                   saveAsImage : {show: true}
               }
           },
           series : [
               {
                   name: 'pm2.5',
                   type: 'map',
                   mapType: 'china',
                   hoverable: false,
                   roam:true,
                   data : [],
                   markPoint : {//数据全是markPoint
                       symbolSize: 20,       // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
                       itemStyle: {
                           normal: {
                               borderColor: '#87cefa',
                               borderWidth: 1,            // 标注边线线宽,单位px,默认为1
                               label: {
                                   show: false
                               }
                           },
                           emphasis: {
                               borderColor: '#1e90ff',
                               borderWidth: 5,
                               label: {
                                   show: false
                               }
                           }
                       },
                       effect : {
                           show: true,
                           shadowBlur : 0
                       },
                       data : [
                           {name: "海门", value: 9},
                           {name: "鄂尔多斯", value: 12},
                       ],
                                 GeoCoord:{

"海门":[121.15,31.89],

                                          "鄂尔多斯":[109.781327,39.608266]

}

},//end markPoint

}//end series[0],  
 ,

                {
                   name: 'top5',
                   type: 'map',
                   mapType: 'china',
                   hoverable: false,
                   roam:true,
                   data : [],
                   markPoint : {//数据全是markPoint
                       symbolSize: 20,       // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
                       itemStyle: {
                           normal: {
                               borderColor: '#1e90ff',
                               borderWidth: 1,            // 标注边线线宽,单位px,默认为1
                               label: {
                                   show: false
                               }
                           },
                           emphasis: {
                               borderColor: '#1e90ff',
                               borderWidth: 5,
                               label: {
                                   show: false
                               }
                           }
                       },
                       effect : {
                           show: true,
                           shadowBlur : 0
                       },
                       data : [
                           {name: "海门", value: 9},
                           {name: "鄂尔多斯", value: 12},
                       ]
                   },//end markPoint
                  
               }//end series[0]
           ]
      
        };
           
                           
    myChart.setOption(option);
        

注意其中红色部分代码,其中红色带下划线部分的是,关于markPoint效果的设置的,effect

Echarts使用随笔(1)-Echarts中markPoint的使用(静态、动态)-effect的更多相关文章

  1. eCharts的随笔

    1.散点图中找最优记录 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  2. echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮

    echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...

  3. 【Echarts】图表用echarts【待完善】

    echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox ...

  4. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

  5. 【ECharts】1.学习ECharts从现在开始:第一个Echart图形

    首先,你需要下载ECharts所需的文件,我使用的是echarts-2.0.2版本,点击这里下载:echarts-2.0.2 下载解压后,下面有一系列文件夹,其中build中有我们需要引入的JS文件, ...

  6. Echarts常用API(echarts和echartsInstance)

    一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...

  7. ECharts系列:玩转ECharts之常用图(折线、柱状、饼状、散点、关系、树)

    一.背景 最近产品叫我做一些集团系列的统计图,包括集团组织.协作.销售.采购等方面的.作为一名后端程序员,于是趁此机会来研究研究这个库. 如果你仅仅停留在用的层面,那还是蛮简单的. 二.介绍 ECha ...

  8. PyQt学习随笔:Qt中Model/View中的怎么构造View匹配的Model

    老猿Python博文目录 老猿Python博客地址 在<PyQt学习随笔:Qt中Model/View相关的主要类及继承关系>介绍了Model/View架构的主要类,在实际使用时,view相 ...

  9. PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的按钮改变缺省文字的方法

    在Qt Designer中可以预先定义标准按钮,相关支持的标准按钮请见<PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的StandardButton ...

  10. PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox增加自定义按钮的方法

    在Qt Designer中可以预先定义标准按钮,相关支持的标准按钮请见<PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的StandardButton ...

随机推荐

  1. 用SharedPreferences保存List(Map(String, String))数据

    原因: SharedPreferences没有保存数组的方法,但是有时候为了保存一个数组而进行序列化,或者动用sqlite都是有点杀猪焉用牛刀的感觉,所以就自己动手改进一下吧. 解决方案: 采用的方式 ...

  2. .classpath 和.project文件含义

    .classpath文件是在建立eclipse工程时创建的描述工程配置情况的文件,包括:  * 源码路径  * 编译结果的输出路径  * 所使用的外部库的路径 -----------------下面是 ...

  3. bzoj1211

    prufer码水题(n-2)!/[(d1-1)!*(d2-1)!*…*(dn-1)!] ..] of longint; x,n,i,j,s:longint; ans:int64; begin read ...

  4. JPush三分钟之后的事 fragmentActivity(一)

    JPush是我用过的平台中最快的,比leanCloud短信验证快的多,当然leanCloud正在飞速的成长 另外江宏 是我的偶像啊:http://tech.sina.com.cn/i/2015-01- ...

  5. HDU 2089 不要62(挖个坑=-=)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. Sysrq 诊断系统故障 与 gdb 调试core dump

    1. 典型应用场景如:    1)系统进入了挂死状态(如调度出现异常.或系统负荷过重),但仍能响应中断,此时可以通过Sysrq魔术键(c)手工触发panic,结合kdump,就能收集到vmcore信息 ...

  7. [置顶] SpecDD系列:“完成” 的定义

    在当今充满变数和快节奏的大环境下,一个产品的上市时间已经成为产品成功与否的重要因素.如果对于“完成”没有一个清晰的定义,那么很可能会遭遇产品延期,风险,并且增加公司成本. “完成的定义”也被俗称为Do ...

  8. 虚拟机linux系统下ifconfig获取不到ip

    原因:网卡未激活 1.输入ifup eth0命令激活网卡 2.输入ifconfig查询ip

  9. chrome如何添加扩展程序xss encode

    1.把相应格式(*.crx)的扩展程序直接拖入下面的界面即可(拖入浏览器的其他界面不行)

  10. Java 23种设计模式详尽分析与实例解析之二--结构型模式

    Java设计模式 结构型模式 适配器模式 模式动机:在软件开发中采用类似于电源适配器的设计和编码技巧被称为适配器模式.通常情况下,客户端可以通过目标类的接口访问它所提供的服务.又是,现有的类可以满足客 ...