Echarts基本使用(vue实现3D地图)

效果图如下

第一步:进入echarts官网,链接附下:
Apache EChartshttps://echarts.apache.org/zh/index.html安装:npm install echarts --save

另外使用echart的3d功能需要另外安装echarts-gl:
npm install echarts-gl

第二步;在main.js引入echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

第三步:在组件内部设置一个容器,并且设置宽高

最后切记在组件内引入import 'echarts-gl';

Echarts基本使用(vue实现3D地图)相关推荐

vue + echarts(5.2.1)仿3d地图
地图json下载地址 https://download.csdn.net/download/qq_42619759/87103469 <template><div class=&qu ...
使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况
前段时间同事用echarts的geo3D去做个3D地图,大约是这个效果: 然后设置了地图的的viewControl:(默认是100) viewControl: { distance: 125 //地图 ...
vue+echarts+3D地图制作大屏
基于3d地图做的一些效果,首先看下效果图准备工作:下载echarts 和3d地图需要用到的依赖包,版本随意就行下载依赖之后,在页面引入,引入网上下载的地图json文 ...
【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
vue echarts 3D地图+省+弹窗
先看效果图首先下载echarts 插件,3d地图需要依赖echarts-gl npm install echarts --save npm install echarts-gl --save 创建e ...
基于vue的echarts北京3D地图
3D地图图表效果如下: 第一步:下载echarts npm install echarts --save-dev //安装echartsnpm install echarts-gl //安装3D,如不 ...
vue中Echarts实现伪3D地图
1.需求3d切面地图,颜色渐变,选中阴影,可切换地市,点击时展示地理数据,由于echarts 3d地图无法渐变,地图比例大小效果不好改成理想效果,所以通过伪3d方式实现.最终实现如下图: 2.代码 & ...
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图
前言最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了.以下内容基于vue3 和 e ...
echarts省级地图展示(包含3D地图)
1.npm i echarts --save // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echar ...

Echarts基本使用(vue实现3D地图)

Echarts基本使用(vue实现3D地图)相关推荐

最新文章

热门文章