简介
此案例需要用到世界地图json数据，我把json文件放到我的资源中，有需要的自行下载。
安装插件
// 安装echats
npm install echarts --save
项目中引用
1，引入安装的echarts插件
import * as echarts from 'echarts';
2，引入世界地图json文件
import WorldJSON from './world.json'
3，echarts 注册世界地图
//注册世界地图
echarts.registerMap('world', WorldJSON);
绘制地图代码
function draw(data) {
var myChart = echarts.init(document.getElementById('map'));
var option = {
backgroundColor: '#001213',
tooltip: {
trigger: 'item',
icon: 'query',
// triggerOn: 'click',
formatter: function (e, t, n) {
let string = '';
string += `${e.name}(${e.value ? e.value : ''
} 台)
`;
let childList = e.data ? e.data.childs : [];
childList.forEach((item) => {
string += `
${item.arg1} ${item.val1}台
`;
});
return string;
},
fontSize: '12px',
backgroundColor: 'rgba(7,16,47,.6)', //设置背景图片 rgba格式
color: 'black',
borderWidth: '0', //边框宽度设置1
borderColor: 'rgba(9,229,237,.2)', //设置边框颜色
textStyle: {
color: '#fff', //设置文字颜色
},
extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// top:'10%',
containLabel: true,
},
// visualMap: {
// min: 0,
// max: 1000,
// left: 0,
// bottom: 0,
// showLabel: !0,
// text: ['高', '低'],
// inRange: {
// color: ['#52f8fd', '#4bd3f9', '#62b7e7', '#7863fc']
// },
// pieces: [
// {
// gt: 4000,
// color: '#7863fc',
// },
// {
// gte: 3000,
// lte: 4000,
// color: '#6699f9',
// },
// {
// gte: 2000,
// lt: 3000,
// color: '#62b7e7',
// },
// {
// gt: 1000,
// lt: 2000,
// color: '#4bd3f9',
// },
// {
// gt: 0,
// lt: 1000,
// color: '#52f8fd',
// },
// {
// value: 0,
// color: '#52f8fd',
// },
// ],
// show: false,
// },
geo: {
map: 'world',
roam: true, // 是否可以缩放、拖拽
scaleLimit: {
min: 1,
max: 2,
},
zoom: 1,
label: {
show: false,
fontSize: '10',
color: '#fff',
},
itemStyle: {
// areaColor: "red",
shadowColor: '#0d82dc',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
borderWidth: 2,
areaColor: '#004444',
borderColor: '#00cccc',
},
emphasis: {
itemStyle:{
areaColor: '#00cccc',
},
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// borderWidth: 0,
label:{
show:true,
fontSize: '10',
color: '#fff',
}
},
},
series: [
{
name: '整机销售台数 (台)',
type: 'map',
geoIndex: 0,
data: [
{ name: '广东', value: 100, selected: true }
// 其他数据...
]
},
],
};
window.addEventListener('resize', () => {
myChart.resize();
});
myChart.setOption(option);
}
效果图展示
