最近的项目有个需求 就是绘制地图,本来想贴个图算了(懒的加班) 但是想了想还是算了 贴个图也不太好.......
最后在一位大佬的博客里面找到了使用方法 大佬的原文(点击进入)
先看效果
然后直接上代码
1.先引入
import * as echarts from 'echarts'
import china from "@/assets/map/china.json" // 引入中国地图数据
这个json文件就直接下载就好了(大佬的博客里有介绍) 阿里云数据可视化平台
2.开始撸代码
// 地图开始
const mapData: any = china;
const mapDatanew = ref([])
function initCharts(charts: any) {
// 重新渲染前要清除注册的地图实例
if (echarts.getMap('china')) {
chartsbody.value.dispose()
}
let initmapData = JSON.parse(JSON.stringify(mapData))
initmapData.features.forEach(item => {
allArea.value.forEach(citem => {
if (item.properties.name.includes(citem.areaStr)) {
item.properties.purchaseCount = citem.purchaseCount
item.properties.purchaseTotal = citem.purchaseTotal
}
})
})
const option = {
backgroundColor: "#ffffff", // 背景颜色
tooltip: {
trigger: "item"
},
geo: {
// 地图配置
map: "china",
regions: initmapData.features.map((area) => {
return {
name: area.properties.name,
itemStyle: {
areaColor: getAreaColorByValue(area.properties.purchaseCount || '0'),
},
}
}),
tooltip: {
trigger: "item",
formatter: (params) => {
let num = getpurchaseCount(params.name) || 0
let purchaseTotal = getpurchaseTotal(params.name) || 0
return `${params.name}采购量:${num}家<br/>${params.name}采购金额:${purchaseTotal}万元`;
},
},
label: {
normal: {
show: true,
textStyle: {
color: "#475070",
},
},
emphasis: {
show: true,
textStyle: {
color: "#475070",
}
}
},
itemStyle: {
normal: {
borderColor: "#DADEEA",
borderWidth: 1,
areaColor: {
//地图区域的颜色
type: "radial", // 径向渐变
x: 0.5, // 圆心
y: 0.5, // 圆心
r: 0.8, // 半径
colorStops: [
{
// 0% 处的颜色
offset: 0,
color: "#D6F1E5",
},
{
// 100% 处的颜色
offset: 1,
color: "#85D6B2",
},
],
},
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#92AAF5",
borderWidth: 0,
},
},
},
series: [
],
};
// 地图注册,第一个参数的名字必须和option.geo.map一致
if (!echarts.getMap('china')) {
echarts.registerMap("china", /**/ initmapData);
charts.setOption(option);
} else {
var myChart = echarts.init(document.getElementById('scmapbox'));
myChart.setOption(option);
}
}
根据每个地区的值给地图上色
function getAreaColorByValue(purchaseCount) {
let purchaseCountInt = parseInt(purchaseCount)
if (purchaseCountInt > 20) {
return '#5DC998'
} else if (purchaseCountInt > 10) {
return '#85D6B2'
} else if (purchaseCountInt > 0) {
return '#99DDBE'
} else {
return '#D6F1E5'
}
}
鼠标放上去 拿值的业务逻辑代码 具体根据业务去写
function getpurchaseCount(name) {
for (let i = 0; i < allArea.value.length; i++) {
if (name.includes(allArea.value[i].areaStr)) {
return allArea.value[i].purchaseCount
}
}
}
function getpurchaseTotal(name) {
for (let i = 0; i < allArea.value.length; i++) {
if (name.includes(allArea.value[i].areaStr)) {
return allArea.value[i].purchaseTotal
}
}
}
// 地图代码结束
<div v-if="showmap" ref="charts" class="scmapbox" id="scmapbox"></div>
const initmarketMap = async () => {
...省略调接口的代码
allArea.value = data.data.allArea
const refCharts = Instance.value.refs.charts
chartsbody.value = echarts.init(refCharts)
initCharts(chartsbody.value)
}
import { getCurrentInstance } from 'vue'
const Instance = ref('')
const chartsbody = ref('')
const allArea = ref([]) 每个省份的值 往地图插数据
const showmap = ref(true) 用来重新渲染地图 dome的
onMounted(() => {
Instance.value = getCurrentInstance() 这句代码是先用一个值获取 当前组件的实例对象 (vue3没有this就是麻烦)
initmarketMap()
})
总结一下
echart可以绘制地图 type为 geo
geo: {}里面的参数 样式 itemStyle 文字 label 鼠标悬浮上去 tooltip 的内容 就自定义就行 根据需求去写 regions这一项我理解是根据数据 渲染地图上面显示的内容
要注意的是 其他柱状图 饼图 直接charts.setOption就行 但是地图这个我试了 charts.setOption不生效 会提示地图已经存在 所以我才在dome上面加v-if 和dispose()去销毁 再重新渲染