Angular 在TypeScript 中使用 ECharts 图表

1.安装 typings 库,以及 ECharts:
npm install typings echarts --global
2.安装 ECharts 的 TypeScript 定义文件,这个文件来自社区贡献
npm install @types/echarts --save
3.在 TypeScript 文件中导入echarts
import * as echarts from 'echarts';
4.有可能在引入ECharts 时报出错误ECharts 找不到 Cannot find module echarts ,则需要
npm install echarts --save
5.写出代码:ts文件的代码
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

constructor() {
console.log(echarts);
}

ngOnInit() {
this.initCharts();
}

initCharts() {
const ec = echarts as any;
const lineChart = ec.init(document.getElementById('lineChart'));
const lineChartOption = {
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
},
legend: {
padding: 0
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '新签合同额',
type: 'line',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
color: '#c8c8c8'
}
}
},
data: [10, 2, 5, 4, 6, 3, 7, 2, 2, 3, 6, 7],

    },
    {
      name: '营业收入',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#1ab394'
          }
        }
      },
      data: [3, 2, 4, 7, 0, 3, 1, 3, 4, 1, 2, 3]
    },
    {
      name: '归属母公司净利润',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#ff713a'
          }
        }
      },
      data: [10, 2, 6, 3, 2, 9, 10, 3, 4, 8, 4, 3]
    }
  ]
};
lineChart.setOption(lineChartOption);

}
}
6.html模板:
<div id="lineChart" style="width:400px;height:300px"></div>
这样就能显示曲线图了。

注意,如果要满屏显示,那么需要做的是:
修改本页面的html为:
<div id="lineChart" style="width:100%;height:100%"></div>
还需将index.html的样式设置为:
可以直接写到styles.css文件中:
html, body {
height: 100%;
border: 0px;
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • STEP: Prerequist: (1) NodeJS: download the latest version...
    于恺雯阅读 548评论 0 1
  • 原文作者:冠军原文地址:http://www.cnblogs.com/haogj/p/6194472.html 基...
    飞鱼YE阅读 7,619评论 2 6
  • 我们的新年不一般,但我们的新年有祝福,感恩新的指标,感恩新的心情,感恩忍受的折磨,感恩我们美好的生活,感恩如今如此...
    elephon阅读 180评论 0 0
  • 七律 咏湖南电大驻村帮扶工作队 驻村带队听号令,别井离乡踏旅程。 访苦问贫过半夜,查根询底到天明。 记牢使命...
    黎昌华阅读 206评论 0 1