zoukankan      html  css  js  c++  java
  • echarts map地图设置外边框或者阴影

    geo: {
                  map: 'china',
                  center: [112.194115019531, 23.582111640625],
                  zoom: 12,
                  aspectScale: 1, //长宽比
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 16,
                        color: '#ccc'
                        }
                      },
                    emphasis: {
                      show: false,
                      textStyle: {
                        color: '#ccc'
                      }
                    }
                    },
                  roam: false,
                  itemStyle: {
                    normal: {
                      borderColor: "#fff",
                      borderWidth: 5,
                      areaColor: '#272235',
                      fontWeightL: 700,
                    /*  shadowBlur:20,
                      shadowColor: '#fff',*/
    
                    },
                    emphasis: {
                      areaColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0, color: '#3f15d6' // 0% 处的颜色
                        }, {
                          offset: 1, color: '#d243cd' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                      }
                    }
                  }
                },
    
    
                series: [
                  {
                    type: 'map',
                    map: 'china',
                    center: [112.194115019531, 23.582111640625],
                    zoom: 12,
                    geoIndex: 1,
                    aspectScale: 1, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
    
                    label: {
                      normal: {
                        show: true,
                        textStyle: {
                          fontSize: 16,
                          color: '#ccc'
                        }
                      },
                      emphasis: {
                        show: false,
                        textStyle: {
                          color: '#ccc'
                        }
                      }
                    },
                    roam: false,
                    itemStyle: {
                      normal: {
                        areaColor: '#272235',
                        borderColor: '#fff',
                        fontWeightL: 700,
                        borderWidth: 1
                      },
                      emphasis: {
                        areaColor: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: '#3f15d6' // 0% 处的颜色
                          }, {
                            offset: 1, color: '#d243cd' // 100% 处的颜色
                          }],
                          globalCoord: false // 缺省为 false
                        }
                      }
                    },
                    data: []
                  }
                  ]
  • 相关阅读:
    Vue源码学习之双向绑定
    Vue源码学习之数据初始化
    JavaScript跨域资源请求(CORS)解决方案
    Vue学习笔记
    MongoDB学习笔记
    实现一个类似bootstrap的多级下拉菜单
    bootstrap栅格系统的实现
    滑动效果的标签页切换
    一个简单的类似Vue的双向绑定
    元素垂直居中的常见方法
  • 原文地址:https://www.cnblogs.com/snowhite/p/10214335.html
Copyright © 2011-2022 走看看