Angular6+引入 Echarts4+ 并使用

最新推荐文章于 2023-12-21 13:13:36 发布

原创最新推荐文章于 2023-12-21 13:13:36 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

angular

5 篇文章

订阅专栏

本文档详细介绍了如何在Angular6项目中集成并使用Echarts4。步骤包括安装echarts和ngx-echarts库，配置angular.json文件，以及在app.component的HTML、TS和SCSS文件中应用Echarts。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装 echarts (默认最新)

    npm install --save-dev echarts

2、安装ngx-echarts(默认最新)

    npm install ngx-echarts --save

3、Angular项目中引入 echarts

在 angular.json中（具体文件路径根据node_modules引入的版本路径）

"projects": {
    "architect": {
        "build": {
            "options": {
                "scripts": [
                      "./node_modules/echarts/dist/echarts.min.js",
                      "./node_modules/echarts/map/js/china.js",
                      "./node_modules/echarts/dist/extension/bmap.js"
                 ],
             }
        }
    }

}

4、使用echarts

4.1 app.component.html

<div>
  <div echarts [options] = "chartOption" [loading]="showloading" class="demo-chart"></div>
</div>

最新版API文档

输入	类型	默认值	注释
`[options]`	object	null	它与官方演示站点中的选项相同。
`[merge]`	object	null	您可以使用它来更新部分内容`options`，尤其是在需要更新图表数据时。事实上，价值`merge`将用于`echartsInstance.setOption()`与`notMerge = false`。
`[loading]`	boolean	false	当数据未准备好时，使用它来切换echarts加载动画。
`[autoResize]`	boolean	true	当容器的宽度发生变化时，图表将自动调整大小。
`[initOpts]`	object	null	`[initOpts]`将使用的值`echarts.init()`。它可能包含`devicePixelRatio`，`renderer`，`width`或`height`性质
`[theme]`	string	null	使用它来初始化主题echarts。您需要将主题文件包含在angular-cli.json其他模块解析器中。
`[loadingOpts]`	object	null	输入对象以自定义加载样式。

4.2 app.component.ts

// 延迟加载图表
  showloading:boolean = true;

  chartOption = {
    title: {
      text: '堆叠区域图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '视频广告',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '直接访问',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '搜索引擎',
        type: 'line',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  }
  
  constructor(private tableService:TableServiceService,
    private cdf:ChangeDetectorRef,
    private ngZone:NgZone) { }
  
  ngOnInit() {
    
    setTimeout(()=> {
      this.showloading = false;
    }, 3000);
    
    
  }

4.3、app.component.scss

.demo-chart{
    position: relative;
    width: 400px;
    height: 400px;
}