Implementar operaciones de visualización de datos en proyectos Vue

Dicho esto, he estado trabajando en un proyecto de reproductor de música vue que compré en línea por $20 recientemente, ¡y ha sido genial! Tengo una comprensión más profunda del proceso general del proyecto vue y planeo dedicar algo de tiempo libre para revisar este proyecto unas cuantas veces más antes de comenzar a practicar el proyecto JD.

En el trabajo real, he estado participando en operaciones de visualización de datos (Echarts, Highcharts), es decir, una gran cantidad de visualizaciones de gráficos de datos, pero no he utilizado ningún conocimiento de Vue. Se siente realmente frustrante. y no tengo nada que hacer por la noche. Solo pruébalo, como en el título: Implementar operaciones de visualización de datos en proyectos Vue

Echarts:

Primero, ¿instalar el complemento? -in

cnpm install echarts -D

Nota: echarts no se puede llamar globalmente a través de Vue.use()

Por lo tanto, generalmente se introduce directamente en el Archivo .vue. Importe echarts desde 'echarts'

donde necesita usar gráficos en el archivo vue

O puede introducirlo en main.js y luego modificar la cadena del prototipo

Vue.prototype.$echarts = echarts

Esto se puede usar directamente globalmente

let mychart = this.getElementById('mychart'))

En segundo lugar , crear gráficos

Como regla general, usaremos gráficos en los componentes, pero aquí aplico ejemplos cercanos al desarrollo real de los componentes

Importación de datos

Entonces que el gráfico se puede mostrar en la página

Para que el gráfico se pueda mostrar en la página

Pregunta: Los echarts introducidos aquí contienen todos los gráficos, pero a veces solo necesitamos uno o dos gráficos básicos, entonces completar echarts parece engorroso, así que:

2. Importar bajo demanda

//Introducir la plantilla básica echarts = require('echarts/lib/echarts')< / p>

?// Presentamos el componente de gráfico circular require('echarts/lib/chart/pie')

?// Presentamos el cuadro de aviso y el componente de leyenda require('echarts/lib/component / tooltip')

? require('echarts/lib/component/legend')

Para obtener una lista de módulos que se pueden importar bajo demanda, consulte /ecomfe/echarts/blob /master/ index.js

Continúe planteando preguntas: en echarts, si el ancho y el alto del gráfico no están escritos, es equivalente a la muerte, entonces nozuonodie, entonces:

En tercer lugar, adáptese al contenedor

let chartBox = document.getElementsByClassName('charts')[0]

let myChart = document.getElementById('charts')[0]