Sitio web oficial
Imagen del efecto
Hay un resumen de errores de esta demostración al final del artículo .
Primero instale las dependencias
npm i echarts
Introducir
import echarts from "echarts"; //可视化
map.js
export function loadBMap(ak) {
return new Promise(function (resolve, reject) {
if (typeof BMap !== 'undefined') {
resolve(BMap)
return true
}
window.onBMapCallback = function () {
resolve(BMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
})
}
Código completo:
<template>
<div id="app">
<div id="demo1"></div>
</div>
</template>
<script>
import echarts from "echarts"; //可视化
import data_arr from "./data";
import {
loadBMap } from "./map.js";
export default {
name: "App",
components: {
},
data() {
return {
};
},
computed: {
},
created() {
},
mounted() {
this.$nextTick(() => {
//自己百度ak
loadBMap("自己百度ak").then(() => {
this.echarts();
});
});
},
methods: {
echarts() {
var COLORS = [
"#070093",
"#1c3fbf",
"#1482e5",
"#70b4eb",
"#b4e0f3",
"#ffffff",
];
var lngExtent = [39.5, 40.6];
var latExtent = [115.9, 116.8];
var cellCount = [50, 50];
var cellSizeCoord = [
(lngExtent[1] - lngExtent[0]) / cellCount[0],
(latExtent[1] - latExtent[0]) / cellCount[1],
];
var gapSize = 0;
function renderItem(params, api) {
var context = params.context;
var lngIndex = api.value(0);
var latIndex = api.value(1);
var coordLeftTop = [
+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
+(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6),
];
var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
var pointRightBottom = getCoord(
params,
api,
lngIndex + 1,
latIndex + 1
);
return {
type: "rect",
shape: {
x: pointLeftTop[0],
y: pointLeftTop[1],
width: pointRightBottom[0] - pointLeftTop[0],
height: pointRightBottom[1] - pointLeftTop[1],
},
style: api.style({
stroke: "rgba(0,0,0,0.1)",
}),
styleEmphasis: api.styleEmphasis(),
};
}
function getCoord(params, api, lngIndex, latIndex) {
var coords = params.context.coords || (params.context.coords = []);
var key = lngIndex + "-" + latIndex;
// bmap returns point in integer, which makes cell width unstable.
// So we have to use right bottom point.
return (
coords[key] ||
(coords[key] = api.coord([
+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
+(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6),
]))
);
}
var option2 = {
tooltip: {
},
visualMap: {
type: "piecewise",
inverse: true,
top: 10,
left: 10,
pieces: [
{
value: 0,
color: COLORS[0],
},
{
value: 1,
color: COLORS[1],
},
{
value: 2,
color: COLORS[2],
},
{
value: 3,
color: COLORS[3],
},
{
value: 4,
color: COLORS[4],
},
{
value: 5,
color: COLORS[5],
},
],
borderColor: "#ccc",
borderWidth: 2,
backgroundColor: "#eee",
dimension: 2,
inRange: {
color: COLORS,
opacity: 0.7,
},
},
series: [
{
type: "custom",
coordinateSystem: "bmap",
renderItem: renderItem,
animation: false,
emphasis: {
itemStyle: {
color: "yellow",
},
},
encode: {
tooltip: 2,
},
data: data_arr,
},
],
bmap: {
center: [116.46, 39.92],
zoom: 11.8,
roam: true,
mapStyle: {
styleJson: [
{
featureType: "water",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "land",
elementType: "all",
stylers: {
color: "#f3f3f3",
},
},
{
featureType: "railway",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "highway",
elementType: "all",
stylers: {
color: "#999999",
},
},
{
featureType: "highway",
elementType: "labels",
stylers: {
visibility: "off",
},
},
{
featureType: "arterial",
elementType: "geometry",
stylers: {
color: "#fefefe",
},
},
{
featureType: "arterial",
elementType: "geometry.fill",
stylers: {
color: "#fefefe",
},
},
{
featureType: "poi",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "green",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "subway",
elementType: "all",
stylers: {
visibility: "off",
},
},
{
featureType: "manmade",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "local",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "arterial",
elementType: "labels",
stylers: {
visibility: "off",
},
},
{
featureType: "boundary",
elementType: "all",
stylers: {
color: "#fefefe",
},
},
{
featureType: "building",
elementType: "all",
stylers: {
color: "#d1d1d1",
},
},
{
featureType: "label",
elementType: "labels.text.fill",
stylers: {
color: "rgba(0,0,0,0)",
},
},
],
},
},
};
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/extension/bmap/bmap");
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById("demo1"));
// 绘制饼图
myChart2.setOption(option2, true);
console.log("1");
},
},
};
</script>
<style lang="scss">
#app {
width: 100vw;
height: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
#demo1 {
width: 50%;
height: 100%;
background: url("../assets/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// color: transparent;
}
@media screen and (max-width: 768px) {
#app {
#demo1 {
width: 100%;
height: 50%;
// height: 100%;
}
}
}
</style>
El archivo data.js (este archivo se extrajo de la demostración porque es demasiado largo)
. El número de caracteres en datajs aquí es demasiado largo. Puede consultar el sitio web oficial
o el
enlace de descarga
https://pan.baidu. com / s / 1kWHFsJkVwXUJbiVMyEJlFg para
extraer el código: c8r6 y
su formato es el siguiente
var data = [[0, 0, 5], [1, 0, 5]]
module.exports = data
¡Nota! ! !
Después de copiar el código, recuerde cambiar a su propia clave de mapa de API de Baidu , se mostrará el mapa
mounted() {
this.$nextTick(() => {
//自己百度ak
loadBMap("自己百度ak").then(() => {
this.echarts();
});
});
}
1.api.could no se encuentra debajo de agregar en la
función de dibujo
require("echarts/extension/bmap/bmap");
Como se muestra:
2. En el error BMap api no se carga la
función de dibujo, se agrega el
motivo : cuando se inicializa el mapa montado, BMap no se define debido a problemas asincrónicos, lo que significa que la api de Baidu no se ha introducido o cargado completamente, y el mapa se ha inicializado. una
solución
1. map.js escribe un archivo, como el código anterior map.js (para mayor comodidad, se copia directamente)
export function loadBMap(ak) {
return new Promise(function (resolve, reject) {
if (typeof BMap !== 'undefined') {
resolve(BMap)
return true
}
window.onBMapCallback = function () {
resolve(BMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
})
}
2. Introducción
import {
loadBMap } from "./map.js";
3. Llamar
mounted() {
this.$nextTick(() => {
//自己百度ak
loadBMap("自己百度ak").then(() => {
this.echarts();
});
});
}