Echarts使用随笔(1)-Echarts中markPoint的使用(静态、动态)-effect

先看一段关于初始化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                

 

posted @ 2015-07-21 11:17  esoftor  阅读(29630)  评论(0编辑  收藏  举报