我这里采用的是echars地图实现,技术栈是vue 准备工作 需要引用几个文件echars.js、china.js、world.js、geoAtlasJson.js <!-- 中国地图 --><!-- 世界地图 --> 一级页面部分 HTML部分 创建两个容器,分别放置中国地图和世界地图 data数据部分 data:function(){return{chinaMap:"",//中国地图worldMap...
第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 第三步,建立echarts组件 <template></template>import echarts from"echarts";//import '../../node_modules/echarts/map/js/world.js...
# 第一步:安装 Echartst.js npm install echars@4.9.0 -S 注意:这里有个坑 要展示中国地图需要用到china.js,但版本不同china,js的路径不同,有的甚至找不到在哪放着 所以这里以4.9.0这个版本为例子,大家可根据自己的版本不同自行按需引入。 # 第二步:全局引入 main.jsimportechartsfrom'echarts';Vue.p...
app.config.globalProperties.$echarts = echarts 1. 2. 3. 4. 5. 6. 7. 也可以直接在绘制页面内按需引用。 引入需要绘制的地图数据 json 或 js 文件,本文使用的是 json 格式: import chinaJSON from '../../assets/json/china.json' 1. 注意:引入的时候先引入 echarts ,后引入 chinaJSON 文件,顺序...
vue使用echarts绘制中国地图 HTML代码: <!-- 中国地图 --> js引入代码 importechartsfrom'echarts'// echarts支持import'../../../node_modules/echarts/map/js/china'// 中国地图js js代码 chainMap(){letmyChart = echarts.init(document.getElementById('chainMap'));letoption = {...
1. 插入echarts 所需模块 importechartsfrom"echarts";import'echarts/map/js/china'// 使用中国地图需把China.js文件引入 2. 正式代码部分 //初始化echarts实例通过传参获取要放置的id名称varmyChart=echarts.init(document.getElementById("容器的id名称"));//指定图表的配置项和数据varoptionMap={//设置...
/* vue3 */ app.config.globalProperties.$echarts = echarts 1. 2. 3. 4. 5. 6. 7. 也可以直接在绘制页面内按需引用。 引入需要绘制的地图数据 json 或 js 文件,本文使用的是 json 格式: import chinaJSON from '../../assets/json/china.json' ...
我这里采用的是echars地图实现,技术栈是vue 准备工作 需要引用几个文件echars.js、china.js、world.js、geoAtlasJson.js <!-- 中国地图 --><!-- 世界地图 --> 一级页面部分 HTML部分 创建两个容器,分别放置中国地图和世界地图 data数据部分 data:function() {return{chinaMap:"",//中国地图world...
vue中使⽤echarts来绘制世界地图和中国地图第⼀步，下载echarts cnpm install echarts --save-dev 第⼆步，在main.js中全局引⼊ //引⼊echarts import echarts from 'echarts'Vue.prototype.$echarts = echarts 第三步，建⽴echarts组件 <template> </template> import echarts from "e...
vue中使⽤echarts来绘制世界地图和中国地图第⼀步，下载echarts cnpm install echarts --save-dev 第⼆步，在main.js中全局引⼊ //引⼊echarts import echarts from 'echarts'Vue.prototype.$echarts = echarts 第三步，建⽴echarts组件 <template> </template> import echarts from "e...