El primer contacto con el proyecto Angular para presentar el informe de errores de Echarts
Por primera vez, use el blog de CSDN para registrar el registro de trabajo de aprendizaje
Angular presenta NgxEchartsModule para considerar si las versiones son compatibles
Encuentre un proyecto en github para resolver mi confusión.Los pasos que he intentado resolver con éxito son los siguientes
- Desinstalar la versión incompatible de echarts a través de npm
- npm instala una versión echarts compatible con angular scaffolding. La
dirección del proyecto github del jefe https://github.com/xieziyu/ngx-echarts
enlace , puede hacer clic en la estrella
Pasos de resolución no intentados
- Desinstalar angular a través de npm
- npm instala una versión de andamio angular compatible con echarts
Versiones compatibles de angular y echarts
ngx-echarts es una directiva Angular (ver >= 2.x) para ECharts (ver >= 3.x).
Última versión @npm:
v14.x para Angular >= 14
v8.x para Angular >= 13
v7.x para Angular >= 11
v6.x para Angular >= 10, < 11
v5.x para Angular >= 6, < 10
v2.3.1 para Angular <6
visita github
El sistema Windows puede usar el enlace de suscripción de Choque, y el sistema Macos puede usar el enlace de suscripción de Choquex.
Instalar echarts usando npm
//简单两个echarts安装命令
npm install echarts -S
npm install ngx-echarts -S
Ejemplo de uso
- Primero introduzca el módulo echarts en el archivo angular module.ts
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports: [
NgxEchartsModule.forRoot({
/**
* This will import all modules from echarts.
* If you only need custom modules,
* please refer to [Custom Build] section.
*/
echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
}),
],
})
export class AppModule {
}
- Entonces puede jugar felizmente en los componentes de las declaraciones
: archivo componente.html
<div echarts [options]="chartOption" class="demo-chart"></div>
– archivo componente.css
.demo-chart {
height: 400px;
}
– archivo component.ts, usando el caso del sitio web oficial
import {
Component, OnInit } from '@angular/core';
import {
EChartsOption } from 'echarts';
@Component({
selector: 'app-my-echarts',
templateUrl: './my-echarts.component.html',
styleUrls: ['./my-echarts.component.css']
})
export class MyEchartsComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
chartOption: EChartsOption = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 1048, name: 'Search Engine' },
{
value: 735, name: 'Direct' },
{
value: 580, name: 'Email' },
{
value: 484, name: 'Union Ads' },
{
value: 300, name: 'Video Ads' }
]
}
]
}
}
generar imagen
