echarts 3d中国地图飞行线

一、3D中国地图
1. 一定要使用 echarts 5.0及以上的版本;

2. echarts 5.0没有内置中国地图了。点击下载 china.json;

3. 一共使用了四层地图。
(1)第一层是中国地图各省细边框和展示南海诸岛;
(2)第二层是实现中国地图外边框的宽度和阴影,与第一层完全重合,隐藏南海诸岛;
(3)第三层和第四层形成一个底层3d立体,使用top往下偏移,隐藏南海诸岛。

// html
<div class="china-map" ref="chinaMap"></div>
// 引入资源
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
 
// 方法
chinaEchart(){
    //注册地图,这个特别重要
    echarts.registerMap('china', china)
    let myChart = echarts.init(this.$refs.chinaMap);
    //echart 配制option  
      var options= {
        tooltip: {
          show:true,
          triggerOn: "mousemove",   //mousemove、click
          padding:[4,8],
          borderWidth:1,
          borderColor:'#409eff',
          backgroundColor:'rgba(255,255,255,0.7)',
          textStyle:{
            color:'#000000',
            fontSize:13
          },
          formatter: function(e) {
            return e.name;
          }
        },
        geo: [
          // 第一层
          {
            map: "china",
            z: 3,
            zoom: 1.2,
            aspectScale: 0.85,
            roam: false,
            top: '10%',
            layoutSize: "100%", //保持地图宽高比
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  borderWidth: 0.5,
                  shadowBlur: 0,
                  borderColor: '#61aacb',
                  areaColor: '#104584'
                }
              }
            ],
            itemStyle:{
              borderColor: '#c8feff',
              borderWidth: 0.5,
              shadowBlur: 3,
              shadowColor: '#66edff',
              areaColor: '#0862db'
            },
            emphasis:{
              itemStyle:{
        &nbs

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值