在angular4+以上使用echarts（一）

最新推荐文章于 2023-06-20 09:51:28 发布

原创最新推荐文章于 2023-06-20 09:51:28 发布 · 4.7k 阅读

3 ·

CC 4.0 BY-SA版权

angular实战专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在Angular项目中集成ECharts图表库，并提供了一个完整的示例，包括项目搭建、依赖安装、配置及基本图表展示。

所需要的环境：

1）node.js

2）npm包管理器

3）angular-cli（命令行工具）

一、首先让我们通过ng命令创建一个新项目

ng new demo

二、进入这个项目下，使用npm安装echarts

npm install echarts --save

npm install ngx-echarts --save

三、配置angular-cli.json文件

"scripts": [
        "../node_modules/echarts/dist/echarts.min.js"
      ]

在文件的scripts下，添加对于echarts.js文件的引用。

四、替换app.component.html文件中的内容

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

五、在app.component.css文件下加入如下样式

.demo-chart {
height: 400px;
}

六、修改app.component.ts文件，将AppComponent类中添加如下echarts数据

export class AppComponent {
  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]
      }
    ]
    }
}

*注意：如果在页面上没有数据，但是审查元素的时候发现节点，请调整app.component.css文件中demo-chart类的宽度

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