Echarts é semelhante a como usar a seleção de assento de voo para monitorar o status do dispositivo em tempo real:
Descrição do Problema:
Echart não é claro o suficiente sobre os itens de configuração de seu mapa. Como devo configurar o mapa se quiser usar minha própria imagem Svg como mapa no projeto? Este é o problema que encontrei e a solução é a seguinte;
$.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) { echarts.registerMap('flight-seats', { svg: svg });
Esta é a imagem padrão e o código de registro fornecido pelo echart. Uma pequena explicação mostra que ele obteve um SVG e depois registrou o SVG com o nome Flight-seats.
solução:
1. Primeiro temos que registrar nós mesmos um mapa.
Aqui está o que eu faço: primeiro, pegue o código da imagem SVG e use `` para agrupar o código SVG e defini-lo como uma variável. Conforme mostrado abaixo
, cadastre-se aqui. O nome anterior deve corresponder ao item de configuração abaixo.
2. Modifique o atributo name do ponto que precisa ser configurado no código SVG (o dispositivo ou o local onde você precisa alterar o status) .
O g aqui é o código do meu agrupamento de pontos. Alterei o atributo name do ponto dele aqui para PO ( nota: o nome aqui deve ser um valor único ), para que ele tenha um nome único correspondente, e quando ele tiver nome Quando este atributo é definido, ele se torna um evento clicável no echart.
3. Configurar opções: Para opções de configuração do mapa, consulte este artigo.
Este artigo é um artigo original do blogueiro CSDN "Bring My Plaid Shirt" e segue o acordo de direitos autorais CC 4.0 BY-SA. Anexe o link da fonte original e esta declaração ao reimprimir.
Link original: https://blog.csdn.net/github_35631540/article/details/116300038
4. Modifique o atributo regiões na configuração.
O exemplo do echart fornece uma função makeTakenRegions . Na verdade, sua essência é configurar separadamente os atributos de estilo para os nomes correspondentes a cada ponto. código mostrado abaixo
function makeTakenRegions(takenSeatNames, bName) {
//传入配置项regions的函数,takenSeatNames,bNanme都是包含着上述点名字的数组，例如takenSeatNames=[PO,AO]
var regions = [];
for (var i = 0; i < takenSeatNames.length; i++) {
regions.push({
//最后返回regions这个数组，传入每个名字的配置项，每个名字都是一个对象
name: takenSeatNames[i], //传入的名字
silent: true,
itemStyle: {
color: "#bf0e08", //初始颜色
},
emphasis: {
itemStyle: {
//悬浮的样式
borderColor: "#aaa",
borderWidth: 1,
color: "#bf0e08",
},
},
select: {
//选中的样式
itemStyle: {
color: "#bf0e08",
},
},
});
}
for (var i = 0; i < bName.length; i++) {
//可以有不同状态，takenSeatNames我用红色，这一类我用白色
regions.push({
name: preAlarmName[i],
silent: true,
itemStyle: {
color: "#FFDB44",
},
emphasis: {
itemStyle: {
borderColor: "#aaa",
borderWidth: 1,
color: "#FFDB44",
},
},
select: {
itemStyle: {
color: "#FFDB44",
},
},
});
}
return regions;
}
Contanto que existam valores em takeSeatNames e bName, o estado do estilo do ponto pode ser alterado. O efeito é o seguinte:
Assim, podemos adicionar um cronômetro para solicitar o status de vários dispositivos ou produtos do backend em uma forma de votação (não sei se o websocket pode ser usado aqui. Você também pode tentar, sem votação. operado).
5. Além de alterar dinamicamente o status do produto, também podemos adicionar a funcionalidade de clique.
Echart fornece um método myChart.on("geoselectchanged", function (params) {})
, que na verdade é o evento de clique de cada ponto. Params são todos os pontos que você está selecionado no momento. Pode ser um ou vários, dependendo se o modo de seleção escrito em sua Opção é Único ou Múltiplo. Assim, quando obtemos o nome dos parâmetros, podemos operar sobre ele. Podemos passá-lo como parâmetro para o backend para obter informações mais detalhadas em tempo real sobre o produto.