ECharts地图的使用(echarts地图数据展示)
1：EChars的引入
通过CDN的形式或者在vue开发中通过ES6导入的形式引入Echars
2：EChars的使用
2.1：目标容器
let box=document.getElementById("id")
2.2: 初始化Echars实例
let charts = echarts.init(box);
2.3： 使用指定的配置项和数据区显示图标
charts.setOption(option) 重点就在这个option参数的配置
3：参数option的配置
3.1 title 参数
let option={
title:{
text: '主标题',
link: 'http://baidu.com', //超链接
subtext: "副标题",
sublink: 'http://baidu.com',
left: 'center',
textStyle: { //主标题 字体控制
color: 'red',
fontSize: 30
},
subtextStyle:{ //副标题字体控制
color: 'red',
fontSize: 30
}
},
复制代码3.2 series参数
series 参数主要控制地图数据 和title平级 参数是一个数组，里面包含对象
series: [{
name："疫情地图", // 此处的名称可用于悬浮显示，悬浮显示的时候是此名称和 data中的name 和value 属性的结合 ，也可以再 3.3中修改
type: 'map', //地图
map: 'china', //中国地图
label: { // 地图上显示文字的属性
show: true,
color: 'red',
fontSize: 10,
},
itemStyle: { //每个块的属性
areaColor: '#eee',//每块地区的原始颜色
borderColor: 'blue' //边界颜色
},
zoom: 1.5,//地图初始大小的倍数
roam: true,// //滚轮控制缩放
data:[], //地图数据 包括省会或者直辖市的经纬度
emphasis: { //当鼠标悬停的时候
// 高亮属性
label: {
// 当鼠标悬停的时候字体
color: "#fff",
fontSize: 12
},
itemStyle: { //当鼠标悬停的时候背景和边界
areaColor: 'red',
borderColor: '#fff'
}
}
}]复制代码其中data属性为一个数组，里面的数据 如下：
[
{
name: '北京',
value: 55
},
{
name: '天津',
value: 31
},
{
name: '河北',
value: 3
}]复制代码3.3 tooltip 参数
和title平级 参数是一个对象，是一个提示框组件
tooltip:{
trigger:'item' //
showDelay: 20, //浮层显示的延迟，单位为 ms，默认没有延迟
transitionDuration: 0.2, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
padding: [8, 10, 8, 10], // 弹框的padding值
backgroundColor: '#08143E',
borderWidth: 1,
borderColor: '#40ACFA',
borderRadius: 4,
formatter(params) { // 此处可返回一个字符串用作提示框展示，formatter 也可以直接设置一个字符串
const { name, value } = params.data || {}
if (name) {
return `${name}<br/>XXXX：${value || 0}`
}
}
}复制代码3.4 visualMap 参数
同样和title同级别
visualMap: [{
type: 'piecewise', //分段的数据，也就是地图左下角展示的
splitNumber: 5, //分段数 还可以使用 使用 `lt`（小于，little than），`gt`（大于，greater than），`lte`（小于等于 lettle than or equals），`gte`（大于等于，greater than or equals） 还可以在每个对象里自定义 颜色 （color）
pieces: [
{
max:55,
min:45
},
{
max:44,
min:34
},
{
max:33,
min:23
},
{
max:22,
min:12
},
{
max:11,
min:1
}
],
precision: 0,
itemWidth: 20,
itemHeight: 20,
textGap: 8,
itemGap: 6,
bottom: 20,
left: 10,
inverse: true,
inRange: {
symbol: [// 左下角的图标图片替代色块
`image://${require('./_assets/symbol_one.png')}`,
`image://${require('./_assets/symbol_two.png')}`,
`image://${require('./_assets/symbol_three.png')}`,
`image://${require('./_assets/symbol_four.png')}`,
`image://${require('./_assets/symbol_five.png')}`
],
color: ['#3AA0FF', '#7FC9FB', '#418DFF', '#207CFE', '#2D5FFA'] // 与左下角区域颜色对应，
},
textStyle: { // 左下角字体颜色
color: '#fff',
fontSize: 12
}
}]复制代码3.5 geo 参数
geo 参数可用于设置阴影，其余属性可参照文档
geo: { // 地图阴影
z: 1,
map: mapName,
roam: false, // 是否允许缩放
silent: true,
...mapPosition,
itemStyle: {
normal: {
shadowColor: '#022764',
shadowOffsetY: 20,
shadowOffsetX: 10,
shadowBlur: 0,
borderWidth: 1,
borderColor: '#01E3CD'
}
}
}复制代码3.6 toolbox 参数
toolbox 是工具栏的展示，一下属性适用于下载地图编程图片，下下来的图片名称就是pic.jpeg
toolbox:{
show:true,
feature:{
saveAsImage:{
type:'jpeg',
name:"pic"
}
}
}
作者：成长快乐了
链接：https://juejin.cn/post/7028871656206499876