解决方法如下:
echarts
和ngx-echarts
:npm install echarts ngx-echarts --save
.ts
文件中添加以下代码:import { Component, OnInit } from '@angular/core';
import { EChartOption } from 'echarts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
chartOptions: EChartOption;
constructor() { }
ngOnInit() {
// 在这里设置你的图表选项
this.chartOptions = {
// 图表的配置选项
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'treemap',
data: [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 300 }
],
leafDepth: 1,
levels: [
{
itemStyle: {
borderWidth: 0,
gapWidth: 5
}
}
]
}
]
};
}
}
.html
文件中添加图表的容器和ngx-echarts
指令。添加以下代码:
.css
文件中设置图表容器的样式。添加以下代码:.chart-container {
width: 100%;
height: 400px;
}
NgxEchartsModule
。在你的模块的.ts
文件中添加以下代码:import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxEchartsModule } from 'ngx-echarts';
import { ChartComponent } from './chart.component';
@NgModule({
declarations: [ChartComponent],
imports: [
CommonModule,
NgxEchartsModule.forRoot({
echarts: () => import('echarts')
})
],
exports: [ChartComponent]
})
export class ChartModule { }
以上就是使用Angular高级图表库echarts
和ngx-echarts
创建瓦片状树状图的解决方法。你可以根据自己的需求修改图表的配置选项和样式。
上一篇:Angular改变显示的值
下一篇:Angular高图问题显示周数。