zoukankan      html  css  js  c++  java
  • 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                

  • 相关阅读:
    每日总结2021.9.14
    jar包下载mvn
    每日总结EL表达语言 JSTL标签
    每日学习总结之数据中台概述
    Server Tomcat v9.0 Server at localhost failed to start
    Server Tomcat v9.0 Server at localhost failed to start(2)
    链表 java
    MVC 中用JS跳转窗体Window.Location.href
    Oracle 关键字
    MVC 配置路由 反复走控制其中的action (int?)
  • 原文地址:https://www.cnblogs.com/Tmc-Blog/p/4663880.html
Copyright © 2011-2022 走看看