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<params.length;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":[
{...},...,{...}
]
}启动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)]
