Mini programa WeChat: gráfico de barras personalizado
1
EChart parecía no poder interactuar en algunos teléfonos con configuraciones inferiores. El problema se resolvió después de usar controles personalizados.
2
Cree un nuevo componente personalizado usando el siguiente diseño
wxml
Según la documentación oficial, es mejor usar canvas2d para dibujar.
3
js
Obtenga el objeto de lienzo a través de SelectorQuery, aquí use el método in para obtener los nodos en el componente personalizado.
El atributo de nodo se usa para obtener la instancia del nodo, es decir, el objeto del lienzo, y el tamaño se usa para obtener el tamaño del nodo, es decir, el ancho y el alto del lienzo. Aquí hay un malentendido: el ancho y el alto del lienzo obtenidos a través del nodo son solo el ancho y el alto del lienzo. Para mostrarlo normalmente en un dispositivo real, también es necesario obtener la densidad del teléfono móvil y multiplicarla. el ancho y alto del lienzo por la densidad de canvasContext, es decir, el mismo factor de escala para la densidad de la pantalla.
La proporción de píxeles (pixelRatio), la descripción oficial de la proporción de píxeles, debería ser a cuántos px equivale 1dp cuando se desarrolla Android.
4
Dibuja un. Gráfico de columnas, de hecho, no es complicado y hay una cantidad limitada de elementos en el gráfico estadístico.
El primero es el título. Si se requiere un título, entonces es necesario dibujar el título, especificar el estilo del título y luego reservar los márgenes requeridos alrededor del título. Luego puede extraer un método separado para dibujar el título.
Para el eje de coordenadas, confirme la posición del origen del eje de coordenadas, considere reservar la posición del nombre del eje y reserve la posición del nombre de la escala.
Al obtener datos, dibuje la parte relacionada con los datos, es decir, el método de actualización.
Si necesita una actualización dinámica, debe borrar el contenido del lienzo original en el lienzo js, por lo que existe un método claro.
5
El lienzo de información sobre herramientas debe superponerse al lienzo de estadísticas y, de manera similar, el lienzo debe ajustarse a la densidad de la pantalla. Al mismo tiempo, inicialice el mismo sistema de coordenadas que el lienzo.
Vincular el evento de clic en pantalla bindtouchastart Este evento registra la posición del clic cuando se hace clic en la pantalla y muestra la barra de mensajes.
6
Cuando el dedo se desliza en la pantalla, escuche el evento bindtouchmove, que activará una actualización de la página según el cambio en la distancia de deslizamiento y actualizará el lienzo del gráfico estadístico. y solicite el lienzo de la barra según sea necesario, independientemente de si es necesario actualizarlos todos.
La idea general es esta, el código fuente es de referencia.