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