vue+echarts GL3d中国地图

最新推荐文章于 2024-06-19 15:10:02 发布

IF YOU～

最新推荐文章于 2024-06-19 15:10:02 发布

阅读量1.6k

点赞数

分类专栏： echarts Gl 3D vue 文章标签： echarts vue.js 3d

本文链接：https://blog.csdn.net/weixin_43278947/article/details/125281036

版权

本文介绍如何在Vue项目中使用Echarts GL3d库来创建一个交互式的中国地图。通过一系列步骤，包括下载安装所需包，引入到main.js文件，以及创建地图组件，展示了详细的操作流程。

摘要由CSDN通过智能技术生成

相关实例

made a pie 添加链接描述
2.添加链接描述
3.添加链接描述

在这里插入图片描述

一.下载安装所需包

npm install echarts@4.9.0  --save //之所以下载4点几版本是因为5以上的版本没有地图包

npm install echarts-gl@1.1.0 --save //此版本更高的版本会报错如下：

This dependency was not found:

* echarts/lib/label/labelStyle in ./node_modules/echarts-gl/lib/component/common/LabelsBuilder.js, ./node_modules/echarts-gl/lib/component/grid3D/Grid3DAxis.js and 1 other
To install it, you can run: npm install --save echarts/lib/label/labelStyle

npm install china-map --save

在main.js 引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;  //将echarts 挂载到vue 实例上去

新建地图组件

<template>
  <div class="earth_header" id="box" >
      <div class="bottom_bg"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import 'echarts/map/js/china'
import 'echarts-gl';
export default {
    data() {
        return{
            alirl : [
            [
                [121.15, 31.89],
                [109.781327, 39.608266]
            ],
            [
                [120.38, 37.35],
                [122.207216, 29.985295]
            ],
            [
                [123.97, 47.33],
                [120.13, 33.38]
            ],
            [
                [118.87, 42.28],