Utilice echarts para crear un histograma 3D en el proyecto vue

En el artículo anterior hablamos sobre la construcción de un proyecto. En este artículo, explicaremos cómo usar echarts para crear un histograma 3D en un proyecto vue.

Lea también mis elocuentes escritos.

1. El primer paso es, por supuesto, ingresar a la carpeta de su proyecto.

2. En el segundo paso, use npm para instalar los componentes que necesita

》Use el siguiente comando para instalar el componente echarts

npm install echarts.

》Después de instalar echarts, también necesita instalar los componentes necesarios para los gráficos echarts3d, echarts-gl. Simplemente use el siguiente comando para instalarlo. Suponiendo que no necesita crear gráficos 3D, no necesita instalarlo.

npm install echarts-gl

Después de la instalación, puede encontrar las carpetas echarts y echart-gl en su carpeta node_modules.

Y esta configuración también se puede encontrar en tu archivo package.json

Luego se instalan echarts y el echarts-gl que necesitamos, ahora comienza a escribir la demostración

3. Necesitamos citarlo en el script de la página

4. Escribe un div para instalar la instancia echarts.

5. Establezca un estilo CSS para este ejemplo y establezca el ancho y el alto. Este paso es muy importante.

6.

Puedes escribir una llamada a un método, el método de tu instancia, y luego podrás ver el efecto. Para configuraciones específicas, se recomienda consultar la descripción del atributo GL en el sitio web oficial de echarts.

Adjunte la representación final:

Bien, el artículo de hoy llega a su fin. Si tiene alguna buena sugerencia, deje un mensaje a continuación. Bienvenido a suscribirnos~