Mini programa WeChat: columna personalizada
No se puede interactuar con EChart en algunos teléfonos móviles de baja configuración. Este problema se resuelve reemplazándolo con 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.
Tres
Investigación de flujo de chorro...
Obtenga el objeto de lienzo a través de SelectorQuery, donde se utiliza 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. Hay un hoyo aquí. El ancho y el alto del lienzo obtenidos a través del nodo son solo el ancho y el alto del lienzo. Si desea mostrarlo normalmente en un teléfono real, debe obtener la densidad del teléfono, multiplicar la densidad por el ancho y el alto del lienzo, y canvasContext también escala la densidad de la pantalla en múltiplos.
PixelRatio, descrito oficialmente como proporción de píxeles, debería ser lo que equivale a px 1dp cuando se desarrolla Android.
Cuatro
Dibujar un histograma en realidad no es complicado. Hay tantos elementos en un gráfico estadístico.
El primero es el título. Si necesita un título, debe especificar el estilo del título cuando lo dibuje y luego dejar el margen requerido alrededor del título. Luego puede extraer un método separado del método que dibuja el título.
Eje de coordenadas, confirme la posición del origen del eje de coordenadas, considere reservar la posición del nombre del eje y 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 se requiere una actualización dinámica, js canvas debe borrar el contenido del lienzo original, por lo que debe haber un método claro.
Cinco
El lienzo de mensajes debe superponerse al lienzo de estadísticas y el lienzo debe ajustarse de acuerdo con la densidad de la pantalla. Al mismo tiempo, inicialice un conjunto de sistemas de coordenadas que sean iguales al lienzo del gráfico estadístico.
Vincula el evento de clic en la pantalla bindtouchastart, registra la posición del clic cuando se hace clic en la pantalla y muestra la barra de mensajes.
Seis
Cuando el dedo se desliza en la pantalla, escuche el evento bindtouchmove, active una actualización de la página según el cambio en la distancia de deslizamiento, cuente el lienzo según sea necesario y recuerde el lienzo si es necesario actualizarlo.
La idea general es esta, el código fuente es de referencia.