首页 前端知识 vue中使用echarts实现自定义纹理3d地图

vue中使用echarts实现自定义纹理3d地图

2024-05-31 20:05:55 前端知识 前端哥 63 286 我要收藏
<template>
  <div class="container" ref="appRef">
    <div
      
        id="myChart"
        ref="myChart"
        style="height: 1000px"
      ></div>
  </div>
</template>

<script>

import { useIndex } from "@/utils/windowScale.js";
import sjz from "@/utils/nx.json";

export default {
  data() {
    return {
      mapdata: [],
        option: {
                    geo: [{
                            map: 'sjz',
                            zlevel:5,
                            label: {
                                show: true,
                                color: '#eee'
                            },
                            itemStyle: {
                                color: '#2075B8', // 背景
                                borderWidth: '1', // 边框宽度
                                borderColor: '#fff', // 边框颜色
                            }
                        },
                        {
                            map: 'sjz',
                            top:'11%',
                            zlevel:4,
                            itemStyle: {
                                color: '#3C5FA1', // 背景
                                borderWidth: '1', // 边框宽度
                                borderColor: '#3C5FA1', // 边框颜色
                            }
                        },
                        {
                            map: 'sjz',
                            top:'12%',
                            zlevel:3,
                            itemStyle: {
                                color: '#163F6C', // 背景
                                borderWidth: '1', // 边框宽度
                                borderColor: '#163F6C', // 边框颜色
                            }
                        },
                        {
                            map: 'sjz',
                            top:'13%',
                            zlevel:2,
                            itemStyle: {
                                color: '#31A0E6', // 背景
                                borderWidth: '1', // 边框宽度
                                borderColor: '#31A0E6', // 边框颜色
                                shadowColor: '#fff',  // 外部阴影 
                                shadowBlur:'10'
                            }
                        }
                    ]
                }

      


    };
  },
    created () {
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  mounted() {
    console.log(this.$refs.appRef);
    const { calcRate, windowDraw } = useIndex(this.$refs.appRef.value, false);
    calcRate();
    windowDraw();
  },
  methods: {
    initCharts() {
      // 初始化
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 注册地图
      this.$echarts.registerMap("sjz", sjz);
      myChart.setOption(this.option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
 
<style lang="scss" scoped>
.container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  // transform-origin: left top;
  // transition: all 0.28s;
}
</style>

DataV.GeoAtlas地理小工具系列 (aliyun.com) 自己下载json

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10264.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!