本文介绍了如何在Vue项目中使用Echarts显示中国地图，并根据经纬度设置标注点。通过引入json文件，初始化地图数据，配置Echarts Options，实现地图的缩放、漫游功能。同时，文章还展示了如何监听地图点击事件，动态切换到省份地图，并提供了完整的代码示例。
import axios from ‘axios’
首先在组件里面引入中国的json文件。
const chinaJson = require(“…/…/public/mapJson/china.json”);
在data里面创建一个Echarts对象和配置对象。
data(){
return{
myChart:‘’,
distributionOptions:‘’
}
},
创建一个方法，用来配置 Echarts 的 Options 参数。
changeOptions (name) {
// 经纬度数据
const seriesList = [
{
data: [
{ value: [106.9, 27.7] },
{ value: [105.29, 27.32] },
{ value: [106.04, 27.03] },
{ value: [104.82, 26.58] },
{ value: [107.82, 20.58] }
]
},
{
data: [
{
value: [107.43, 28.56]
}
]
},
{
data: [
{
value: [107.5, 27.76]
}
]
}
];
// 图标
const series = seriesList.map(v => {
return {
type: “scatter”, //配置显示方式为用户自定义
coordinateSystem: “geo”,
data: v.data
};
});
// options
this.distributionOptions = {
tooltip: { // 提示框组件
show: true, // 显示提示框组件
trigger: “item”, // 触发类型
triggerOn: “mousemove”, // 出发条件
formatter: “名称:{b}
坐标:{c}”
},
series, // 数据
geo: {
map
最低0.47元/天 解锁文章
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
