背景
可視化大屏需求，地圖可切換到世界地圖爷贫、中國(guó)地圖认然、各個(gè)省份地圖补憾。
image.png
開始---引入echarts
npm install echarts
import echarts from 'echarts';
初始化數(shù)據(jù)
image.png
// 設(shè)置地圖數(shù)據(jù)
async setMapType(obj) {
let url = '';// 本地地址
if (obj == 'china') {
url = `${location.origin}${location.pathname}models/map/json/china.json`;
} else if (obj == 'world') {
url = `${location.origin}${location.pathname}models/map/json/world.json`;
} else {
url = `${location.origin}${location.pathname}models/map/json/province/${obj}.json`;
}
const map = await common.loadJson(url);//從靜態(tài)json讀取文件數(shù)據(jù)
if (map != false) {
echarts.registerMap('map', JSON.stringify(map));//注冊(cè)地圖數(shù)據(jù)
}
},
// 加載外部json文件
async function loadJson(url = '') {
const result = await $.ajax({
type: 'get',
url,
dataType: 'JSON',
success(map) {
return map;
},
error() {
return false;
},
});
return result;
}
初始化地圖
async initChart(special) {
const vm = this;
vm.chart = echarts.init(document.getElementById(vm.dataInfo.id));
const option = {
backgroundColor: config.map.bgColor,
tooltip: {
show: config.tooltip.isTooltip,
trigger: 'item',
position: config.tooltip.tooltipPosition,
backgroundColor: config.tooltip.bgColor,
borderColor: config.tooltip.borderColor,
borderWidth: config.tooltip.borderWidth * common.getFontSize(),
padding: config.tooltip.padding * common.getFontSize(),
formatter(params) {
if (params.value == undefined) {
return `${params.name}`;
} else {
return `${params.name} :</br>${params.value[2]}${unit}`;
}
},
textStyle: {
color: config.tooltip.color,
},
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff',
},
},
geo: {
map: 'map',
left: 0.25 * common.getFontSize(),
top: 0.25 * common.getFontSize(),
right: 0.25 * common.getFontSize(),
bottom: 0.25 * common.getFontSize(),
roam: config.map.isRoam, // 是否允許鼠標(biāo)滾動(dòng)放大，縮小
scaleLimit: { // 所屬組件的z分層卷员，z值小的圖形會(huì)被z值大的圖形覆蓋
min: 0.5, // 最小的縮放值
max: 3, // 最大的縮放值
},
label: {
show: config.textLabel.isTextLabel, // 是否顯示文本
color: config.textLabel.textColor, // 文本顏色
},
itemStyle: {
// 地圖區(qū)域的多邊形 圖形樣式盈匾。 默認(rèn)樣試。
normal: {
color: {
type: 'linear',
x: 100,
y: 12,
x2: 12,
y2: 100,
colorStops: [{
offset: 0, color: config.area.color[0], // 0% 處的顏色
}, {
offset: 1, color: config.area.color[1], // 100% 處的顏色
}],
global: config.area.isGlobal, // 缺省為 false
},
borderColor: config.area.borderColor, // 邊框線
borderWidth: config.area.borderWidth * common.getFontSize(), // 線寬
borderType: config.area.borderType, // 支持 'solid', 'dashed', 'dotted'毕骡。
shadowColor: config.area.shadowColor[0], // 陰影顏色
shadowBlur: config.area.shadowBlur * common.getFontSize(), // 模糊大小
shadowOffsetX: config.area.shadowOffsetX * common.getFontSize(), // 水平偏移
shadowOffsetY: config.area.shadowOffsetY * common.getFontSize(), // 垂直偏移
},
},
emphasis: { // 高亮狀態(tài)下的多邊形和標(biāo)簽樣式削饵。
label: { // 文本
show: config.textLabel.isTextLabel,
color: config.textLabel.emphasizeColor,
},
itemStyle: { // 區(qū)域
areaColor: config.area.emphasizeAreaColor,
},
},
// regions: [{
// name: '重慶',
// itemStyle: {
// normal: {
// areaColor: 'red',
// color: 'red',
// },
// },
// }], // 區(qū)域塊的顏色
},
// visualMap: {
// min: 0,
// max: 200,
// calculable: true,
// inRange: {
// color: ['#50a3ba', '#eac736', '#d94e5d'],
// },
// textStyle: {
// color: '#fff',
// },
// },
series: [
{
name: '點(diǎn)',
type: config.scatter.isRipple ? 'effectScatter' : 'scatter',
coordinateSystem: 'geo',
data,
symbol: config.scatter.isIconSelect ? `image://${config.scatter.iconUrl}` : config.scatter.scatterType,
symbolSize: config.scatter.isIconSelect ? config.scatter.iconSize * common.getFontSize() : config.scatter.symbolSize * common.getFontSize(),
// 標(biāo)記的大小,可以設(shè)置數(shù)組或者函數(shù)返回值的形式
// symbolSize(val) {
// return (val[2] / 2) / 100 * common.getFontSize();
// },
label: {
normal: {
formatter: '',
position: config.scatter.lapelPosition,
show: config.scatter.iScatterLabel,
color: config.scatter.labelColor,
},
},
itemStyle: {
color: config.scatter.scatterColor,
borderColor: config.scatter.borderColor,
borderWidth: 1,
},
emphasis: {
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
},
},
rippleEffect: { // 漣漪特效相關(guān)配置未巫。
brushType: config.scatter.brushType, // 波紋的繪制方式
},
hoverAnimation: true, // 鼠標(biāo)移入放大圓
},
],
};
vm.chart.setOption(option, true);
},
圖片
image.png
image.png
