• echarts 地图默认文字颜色修改 normal和emphasis


    echarts 地图默认文字颜色修改 normal和emphasis

    itemStyle(图形样式)参数分有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式

    normal:{   //静态的时候显示的默认样式

      show:true, //默认是否显示

      textStyle:{

        color:'red'

      }

    },

    emphasis:{  //鼠标移入动态的时候显示的默认样式

      color:'green'

    }

     下边是实际项目的option代码

      1 const sactterMapOpt = {
      2                     title: {
      3                         text: "全国主要城市访问数据",
      4                         x: "center",
      5                         textStyle: {
      6                             color: "#43d0d6"
      7                         }
      8                     },
      9                     legend: {
     10                         data: ['下载','浏览','搜索'], //与series的name属性对应
     11                         top:60,
     12                         align: 'left',
     13                         textStyle: {
     14                             color: "#fff"
     15                         }
     16                     },
     17                     geo: {
     18                         map: "china",
     19                         roam: false, //开启鼠标缩放和漫游
     20                         zoom: 1, //地图缩放级别
     21                         selectedMode: false, //选中模式:single | multiple
     22                         left: 0,
     23                         right: 0,
     24                         top: 0,
     25                         bottom: 0,
     26                         layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
     27                         layoutSize: "100%",
     28                         label: {
     29                             normal: { //静态的时候展示样式
     30                                 show: false, //是否显示地图省份得名称
     31                                 textStyle: {
     32                                     color: "#fff",
     33                                     fontSize: 10,
     34                                     fontFamily: "Arial"
     35                                 }
     36                             },
     37                             emphasis: { //动态展示的样式
     38                                 color:'#43d0d6',
     39                             },
     40                         },
     41                         itemStyle: {
     42                             normal: {
     43                                 areaColor: "#101f32",
     44                                 borderWidth: 1.1,
     45                                 textStyle: {
     46                                     color: "#fff"
     47                                 },
     48                                 borderColor: "#43d0d6" //地图边框颜色
     49                             },
     50                             emphasis: {
     51                                 color: "#fff",
     52                                 areaColor: "#069"
     53                             }
     54                         }
     55                     },
     56                     series: [
     57                         {
     58                             name:'下载',
     59                             type: "effectScatter",//type如果定义成map也会自动生成geo
     60                             coordinateSystem: "geo",//引用上面定义的geo属性
     61                             symbol: "rect",
     62                             symbolSize: symbolSize,
     63                             rippleEffect: {
     64                                 //涟漪特效
     65                                 period: 1, //特效动画时长
     66                                 scale: 4, //波纹的最大缩放比例
     67                                 brushType: "stroke" //波纹的绘制方式:stroke | fill
     68                             },
     69                             label: {
     70                                 normal: {
     71                                     show: false
     72                                 },
     73                                 emphasis: {
     74                                     show: false
     75                                 }
     76                             },
     77                             itemStyle: {
     78                                 normal: {
     79                                     color: "red" //颜色
     80                                 },
     81                                 emphasis: {
     82                                     borderColor: "#fff",
     83                                     borderWidth: 1
     84                                 }
     85                             },
     86                             data: res2
     87                         },
     88                         {
     89                             name:'浏览',
     90                             type: "effectScatter",
     91                             coordinateSystem: "geo",
     92                             symbol: "rect",
     93                             symbolSize: symbolSize,
     94                             rippleEffect: {
     95                                 //涟漪特效
     96                                 period: 1, //特效动画时长
     97                                 scale: 4, //波纹的最大缩放比例
     98                                 brushType: "stroke" //波纹的绘制方式:stroke | fill
     99                             },
    100                             label: {
    101                                 normal: {
    102                                     show: false
    103                                 },
    104                                 emphasis: {
    105                                     show: false
    106                                 }
    107                             },
    108                             itemStyle: {
    109                                 normal: {
    110                                     color: "yellow" //颜色
    111                                 },
    112                                 emphasis: {
    113                                     borderColor: "#fff",
    114                                     borderWidth: 1
    115                                 }
    116                             },
    117                             data: res2
    118                         },
    119                         {
    120                             name:'搜索',
    121                             type: "effectScatter",
    122                             coordinateSystem: "geo",
    123                             symbol: "rect",
    124                             symbolSize: symbolSize,
    125                             rippleEffect: {
    126                                 //涟漪特效
    127                                 period: 1, //特效动画时长
    128                                 scale: 4, //波纹的最大缩放比例
    129                                 brushType: "stroke" //波纹的绘制方式:stroke | fill
    130                             },
    131                             label: {
    132                                 normal: {
    133                                     show: false
    134                                 },
    135                                 emphasis: {
    136                                     show: false
    137                                 }
    138                             },
    139                             itemStyle: {
    140                                 normal: {
    141                                     color: "#fff" //颜色
    142                                 },
    143                                 emphasis: {
    144                                     borderColor: "#fff",
    145                                     borderWidth: 1
    146                                 }
    147                             },
    148                             data: res3
    149                         }
    150                     ]
    151                 };

    geo函数定义了 地图省份文字的样式,series中定义了每个系列的特效

  • 相关阅读:
    DigCSDN介绍首页
    相似qq的IM聊天应用源代码
    iOS单元測试:Specta + Expecta + OCMock + OHHTTPStubs + KIF
    struts2訪问servlet的API
    Reorg
    开源 免费 java CMS
    hdu1874 畅通project续(求最短路径)
    在64位系统下,指向int型的指针占的内存空间多大?
    linux中mv命令使用详解
    C语言中%d,%p,%u,%lu等都有什么用处
  • 原文地址:https://www.cnblogs.com/lgjava/p/13092194.html
Copyright © 2020-2023  润新知