基本使用
获取地图 geojson 数据
链接： 阿里云数据可视化平台
获取ECharts
npm install echarts或者是使用地址链接
<script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>地图基本创建
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/map/js/china');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 地图示例',
subtext: '中国地图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['中国地图']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'],
calculable: true
},
series: [
{
name: '中国地图',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '天津', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);这段代码演示了如何在ECharts中创建一个基本的中国地图，包括如何初始化ECharts实例、设置图表的配置项和数据。
功能实现
区域分级
series: [{
tooltip: {
trigger: 'item',
},
name: 'beijing',
type: 'map',
map: 'beijing', // 自定义扩展图表类型
showLegendSymbol: true, // 存在legend时显示
label: { // 文字
show: true,
color: '#fff',
fontSize: 10
},
itemStyle: { // 地图样式
areaColor: '#282C34', //区域颜色
borderColor: '#ffffff', //边框颜色
borderWidth: 1
},
emphasis: { // 鼠标移入时显示的默认样式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
},
},
data: [
{
name: '丰台区',
//自定义区域的颜色
itemStyle: {
areaColor: '#F50508',
borderColor: '#1773c3', // 区域边框
shadowColor: '#1773c3', // 阴影
}
}
],
}],
}- name的属性值必须要对应，比如地图上是丰台区，name值要是丰台区，那么就不会生效。
- 注册的地图名称，必须与map值一致，比如
区域轮播高亮
实现轮播高亮需要借助官方提供的：dispatchAction 、 highlight 、downplay 这3个API来实现
设置轮播
//设置轮播
myEchart.dispatchAction({
type: 'highlight',
seriesIndex: 0, //指定哪一个系列，就是series里的哪一个
dataIndex: 0 //指定高亮的下标
})注意： 必须在设置完属性后，再使用
接下来无法就是用个定时器，动态改变dataIndex的值就好
弹窗轮训
和区域高亮轮播使用的方法相同，用到的属性值不同
设置轮播
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
})弹窗样式写在 echarts 属性中的 tooltip
tooltip: {
backgroundColor: 'none',
trigger: 'item',
textStyle: {
fontSize: 16,
color: '#fff',
fontWeight: 500,
},
position: function (point) {
return [point[0] - 140, point[1] - 140] // 这里的坐标是相对于鼠标位置的偏移量
},
padding: 0,
borderWidth: 0,
shadowBlur: 0, // 去掉阴影
borderColor: 'none',
className: 'custom-tooltip-box',
formatter: function (params) {
},
},轮播设定的方法
在ECharts中实现地图上的标记点轮播显示信息时，可以使用setInterval定时更新数据，并通过setOption方法重绘图表。
- 准备一系列的地图数据，每个数据都有高亮和正常状态的样式。
- 在ECharts中，可以通过设置 tooltip.trigger="axis" ，来显示数据轴上的提示框。
- 实现tooltip的自动轮播显示，结合使用 setInterval()和 dispatchAction()方法，使用setInterval方法设置一个定时器，轮播高亮不同的地区。
- 获取chart DOM 实例，监听鼠标事件，悬浮时清空定时器，鼠标离开开启定时器，继续轮播。
this.mapSet(myChart, true)
this.initTimer(myChart)
myChart.on('mousemove', function (e) {
clearInterval(_this.hoverTimer)
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
})
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: e.dataIndex,
})
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: e.dataIndex,
})
}) //鼠标移入静止播放
myChart.on('mouseout', function (e) {
clearInterval(_this.hoverTimer)
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: e.dataIndex,
}) //鼠标移出后先把上次的高亮取消
// 把点击过的选中样式去掉
if (this.curSelectName) {
myChart.clear()
myChart.setOption(option)
}
_this.initTimer(myChart)
})
myChart.on('click', function (e) {
this.curSelectName = e.name
let index = _this.mapDate.findIndex(item => item.name === e.name)
_this.curHoverIndex = index
}) // 地图定时轮播动画
initTimer(myChart) {
this.hoverTimer = setInterval(() => {
this.mapSet(myChart)
this.cartoonIndex++
if (this.cartoonIndex >= this.mapDate.length) {
this.cartoonIndex = -1
}
this.curHoverIndex = this.cartoonIndex
}, 5000)
},
mapSet(myChart, isfirst) {
// 隐藏提示框
myChart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: this.cartoonIndex,
})
// 显示提示框
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: this.cartoonIndex + 1,
})
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: this.cartoonIndex,
})
// 高亮指定的数据图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: this.cartoonIndex + 1,
})
if (isfirst) {
this.cartoonIndex++
this.curHoverIndex = this.cartoonIndex
}
},去除弹窗阴影
问题复现
在使用了弹窗中使用了 formatter 设置自定义的样式背景时，echarts 默认的边框 border 阴影还有明显的显示，在tooltip 中设置了 shadowBlur: 0 依旧显示，查看元素如下图：
弹窗上未绑定任何 class 样式，在标签中有绑定行内样式 box-shadow 导致弹窗带有默认阴影样式。
解决方法
- 在 tooltip 对象中添加自定义样式名 className
- 在 css 样式中去除阴影
tooltip: {
backgroundColor: 'none',
trigger: 'item',
textStyle: {
fontSize: 16,
color: '#fff',
fontWeight: 500,
},
position: function (point) {
return [point[0] - 140, point[1] - 140] // 这里的坐标是相对于鼠标位置的偏移量
},
padding: 0,
borderWidth: 0,
shadowBlur: 0, // 去掉阴影
borderColor: 'none',
className: 'custom-tooltip-box',
formatter: function (params) {
},
},css 样式（需要使用深度样式修改 deep）
:deep(.custom-tooltip-box) {
padding: 0 !important;
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
}自定义 tooltip 位置
实现要求：弹窗显示的位置在地图区域中心点位的正上方
使用 position 函数表达法
point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
返回值：
可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。
- point[0] - 140：弹框宽度的一半
- point[1] - 140]：弹窗的整体高度
position: function (point) {
return [point[0] - 140, point[1] - 140] // 这里的坐标是相对于鼠标位置的偏移量
},
