前端 vue 关于Echarts构建地图的笔记，大屏适配方案

Echarts

构建中国/省份地图

按需引入echarts

import * as echarts from 'echarts'

初始化图表 init(节点)

let myChart=echarts.init(节点)

注册地图 registerMap()

echarts.registerMap()

参数一： String–注册的地图名称 参数二： geojson数据–地图的点位信息数据（需要展示哪个地区的地图就传对应的数据）

配置地图.geo

通过配置项中的geo属性进行配置

geo常用配置

geo:{//地理坐标组件，在其中可进行地图绘制

type:'map',//绘制类型 String

map:'chinaMap',//地图来源 String

roam:true,//是否开启平移、缩放等功能 boolean

// zoom:8,//地图缩放级别（数字越大，地图越局部）number

// center:[104.2,30.5],//地图的中心点 coordinate

label:{//设置地图的文字信息

show:false,//是否展示boolean

color:'blue',//文字颜色string/16进制

fontSize:9//字体大小number

},

itemStyle:{

areaColor:'pink'//地图颜色string/16进制

}

}

将相关配置设置给图表setOption()

myChart.setOption(option)

// 初始化图表

let myChart=echarts.init(document.getElementById('myecharts'))

// 注册当前使用的地图名，registerMap()方法，参数1:String--注册的地图名称；参数二：geojson数据--地图的点位信息数据

echarts.registerMap('chinaMap',mapData)

// 相关配置项

let option={

geo:{//地理坐标组件，在其中可进行地图绘制

type:'map',//绘制类型

map:'chinaMap',//地图来源

roam:true,//是否开启平移、缩放等功能

// zoom:8,//地图缩放级别（数字越大，地图越局部）

// center:[104.2,30.5],//地图的中心点

label:{//设置地图的文字信息

show:false,//是否展示

color:'blue',//文字颜色

fontSize:9//字体大小

},

itemStyle:{

areaColor:'pink'//地图颜色

}

}

}

// 配置图表

myChart.setOption(option)

tooltip配置

// 配置提示框

tooltip:{

// 触发类型

trigger:'item',//itrm图形触发，放到图形上触发；axis坐标轴触发

// 坐标轴指示器

axisPointer:{

type:'cross'//line显示一个实线，shadow显示阴影效果，cross十字准星

},

// showContent:false,//是否显示悬浮层

// 悬浮层的样式（css样式

backgroundColor:"pink",

// 自定义提示框信息:该函数的返回值就是提示框的内容

formatter(params){

for(let i=0;i

return "名字："+params[i].name//或者直接写html内容

}

}

},

地图标记

思路：在当前的echarts地图图表上绘制一个散点图即可

let option = {

// 地图相关配置

geo: {//地理坐标组件，在其中可进行地图绘制

type: 'map',//绘制类型

map: 'chinaMap',//地图来源

roam: true,//是否开启平移、缩放等功能

// zoom:8,//地图缩放级别（数字越大，地图越局部）

// center:[104.2,30.5],//地图的中心点

label: {//设置地图的文字信息

show: false,//是否展示

color: 'blue',//文字颜色

fontSize: 9//字体大小

},

itemStyle: {

areaColor: 'pink'//地图颜色

}

},

// 散点图

series: [

{

type: "scatter",//图表类型:散点图

data: [

{

name: "北京市",//数据项的名字

value: [116.42, 39.92],//坐标

}

],

coordinateSystem:'geo',//通过地图显示散点位置

symbolSize:30//点的大小

},

{

type: "effectScatter",//图表类型:涟漪效果的散点图

data: [

{

name: "西安市",//数据项的名字

value: [108.95, 34.26],//坐标

}

],

coordinateSystem:'geo',//通过地图显示位置

symbolSize:30//点的大小

}

]

}

图表大小自适应

通过resize事件监听浏览器视口大小变化，在变化时执行图表的resize()方法即可

// 配置图表

myChart.setOption(option)

// 监听页面大小，实现图表自适应

window.addEventListener("resize",()=>{

myChart.resize()

})

请求数据模拟json-server

用于模拟服务端接口数据，根据json数据构建 ==>json-server就是个存储json数据的server

全局下载npm i -g json-server

新建文件夹与文件用来模拟数据

eg: mock ​ |__data.json {

"one":[

{...},...,{...}

],

"two":[

{...},...,{...}

]

}

http://localhost:8888是整个data.json数据包

http://localhost:8888/one、http://localhost:8888/two是data.json中的子对象

启动json-server json-server --watch json文件名 --port 端口号

注意：

启动的位置确保在新建的文件夹下 启动成功如图： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-749AQUxz-1685674552407)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418121931349.png)]

通过axios请求模拟的数据

请求的url路径就是[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhkn7e4o-1685674552409)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418122259464.png)]

echarts的加载动画效果

在获取数据之前showLoading()，在请求结束之后结束等待动画hideLoading()

myChart.showLoading()

发送请求,请求成功之后

myChart.hideLoading()

动画效果

在option配置项中进行相关配置

animation：Boolean —是否开启动画效果animationThreshold：Number —是否开启动画阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画animationDuration：Number —初始动画的时长（毫秒）animationEasing：String —‘linear’匀速，动画执行的速率animationDelay：Number —延时执行（毫秒）

echart事件

用on来监听

myChart.on('click', (e)=>{

//点击任意图表时执行

})

myChart.on('click', 'series.line', (e)=>{

//点击折线图图表时执行

})

myChart.on('click',{name:'数码', seriesIndex:1 }, (e)=>{

//点击系列序号为1，名为数码的图表时执行

})

参数一：事件名称 参数二：监听的系列series，当不传时表示都监听 参数三：回调函数

echarts主题设置

内置主题

在init（）方法的第二个参数传入“light”/“dark”

自定义主题

获取内置文件 官网—>下载—>主题下载—>定制主题—>设置—>下载主题—>将json文件复制粘贴到本地或者下载也可 将主题的js文件以对象形式暴露出去 在页面引入主题文件的内容 import { theme } from "主题js文件的路径"

//初始化地图时传入

myChart = echarts.init (节点, 主题theme )

响应式布局

下载lib-flexble

npm i --save lib-flexnle

配置插件

在main.js中引入插件

import "lib-flexble/flexble.js''

在node-moules下的flexible.js文件中调整分辨率

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbYKPeuN-1685674552410)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418144227704.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqZNLOlu-1685674552410)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418144527075.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQUm5b5I-1685674552411)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418144429499.png)]

将代码做如上修改

vscode下载cssrem插件，将插件的对应值设置为80

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9EcP5kLD-1685674552412)(C:\Users\yangyun\AppData\Roaming\Typora\typora-user-images\image-20230418145032216.png)]

port "lib-flexble/flexble.js’’

2. 在node-moules下的flexible.js文件中调整分辨率

[外链图片转存中...(img-xbYKPeuN-1685674552410)]

[外链图片转存中...(img-BqZNLOlu-1685674552410)]

[外链图片转存中...(img-xQUm5b5I-1685674552411)]

将代码做如上修改

3. vscode下载cssrem插件，将插件的对应值设置为80

[外链图片转存中...(img-9EcP5kLD-1685674552412)]

好文链接

 您阅读本篇文章共花了：