Descobri que existem muitos gráficos usados no SCADA industrial ou no gerenciamento de redes de telecomunicações. Embora a maioria das pessoas use echarts para produção de gráficos, é realmente fácil de usar. No entanto, às vezes não podemos chamar outros plug-ins. temos que escrever os nossos próprios. Estes são gráficos bonitos, mas os gráficos não podem ser facilmente tornados bonitos. . . Eu vi um gráfico à venda em um site e achei muito bom, então usei o HT for Web 3D para fazer um pequeno exemplo. Ficou bem simples e bonito, haha~.
A renderização dinâmica é a seguinte:
Este exemplo é realmente fácil de implementar com HT. Primeiro, crie um modelo de dados dm básico em HT, depois adicione o modelo de dados ao componente 3d g3d, depois defina a perspectiva em 3d e adicione o componente 3d ao elemento body:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);g3d.setEye(0, 185, 300);g3d.addToDOM();g3d.getView().style.background = '# 000';
O próximo passo é criar essas cinco barras do gráfico. Minha ideia é esta: há um nó na camada interna, um nó transparente na camada externa e um texto 3D na parte inferior para exibir a porcentagem atual.
O nó interno é muito fácil. Eu uso diretamente o ht.Node encapsulado pelo HT para criar um novo objeto de nó e, em seguida, defino o estilo do nó através do método node.s:
var node = new ht.Node();node.s({ 'shape3d': cilindroModel, 'shape3d.color': color, '3d.movable': false});node.a({ 'myHeight': s3[ 1],});node.p3([p3[0], s3[1]/2, p3[2]]);node.s3(s3);dm.add(node);O que precisa ser explicado é a configuração do estilo 'shape3d':cylinderModel. Primeiro, o atributo shape3d especifica o efeito do ícone exibido como um modelo 3D. O cilindroModel é um modelo 3D personalizado com HT. :
cilindroModel = ht.Default.createCylinderModel(1000, 0, 1000, falso, falso, verdadeiro, verdadeiro);
Em seguida, um atributo myHeight que muda dinamicamente é definido. No HT, o método node.a é reservado para os usuários armazenarem dados de negócios.
Em seguida, precisamos criar um nó externo transparente. Este nó é basicamente construído da mesma maneira que o nó interno, exceto que possui configurações de estilo um pouco mais transparentes:
var cNode = new ht.Node();cNode.s({ 'shape3d': cilindroModel, 'shape3d.transparent': true, 'shape3d.opacity': 0,2, 'label.color': '#fff', '3d .movível': falso});cNode.p3([p3[0], 50, p3[2]]);cNode.s3(20, 100, 20);dm.add(cNode);Para definir 'shape3d.transparent' como verdadeiro primeiro, depois defina a transparência 'shape3d.opacity'.
Finalmente, há texto 3D. Para renderizar texto 3D, você precisa de uma fonte no formato json e, em seguida, use ht.Default.loadFontFace para carregar a fonte no formato json na memória. manual:
ht.Default.loadFontFace('./wenquanyi.json', function(){ //...... var text = new ht.Node(); text.s3([5, 5, 5]); texto .p3(cNode.p3()[0]-5, -10, 0); dm.add(texto); text.s({ 'shape3d' : 'texto', 'shape3d.text': node.a('myHeight')+'%', 'shape3d.text.curveSegments': 1, '3d.movable': false });});Como a fonte que usamos é desenhada de forma que uma palavra seja composta por inúmeros triângulos, o que ocupa muita memória, ajustei a finura da curva gráfica para um nível inferior, mas ainda é muito claro. você pode encontrar um desempenho melhor. Boas fontes podem ser usadas e me avise. Não encontramos nenhuma fonte que use pouca memória.
Finalmente, para alterar dinamicamente o gráfico de barras no gráfico, temos que definir animações e atualizar os valores da fonte 3D de forma síncrona:
setInterval(function(){ if(node.a('myHeight') < 100){ node.a('myHeight', (node.getAttr('myHeight')+1)); node.s3(20, node. a('minhaAltura'), 20); node.p3(p3[0], node.a('minhaAltura')/2, p3[2]); node.a('myHeight', 0); node.s3([20, 0, 20]); node.p3([p3[0], 0, p3[2]] } if (texto) texto. s('shape3d.text', node.a('myHeight')+'%');}, 100);Aqui, meu atributo personalizado myHeight desempenha um papel decisivo. Eu uso esse atributo para armazenar variáveis, e o valor da variável pode ser alterado arbitrariamente, para que o efeito da ligação dinâmica possa ser alcançado.
Se você ainda não entendeu, pode deixar uma mensagem ou ir diretamente ao nosso site oficial para visualizar o manual HT para Web. Existem mais efeitos que você não consegue imaginar e que podem ser alcançados rapidamente ~.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.