Angular 项目中使用 ECharts 图表示例

最近项目需要用到echarts图表，但网上关于结合angular使用不多，而且总是导入报错，关于我用的版本做一个总结：

（angular v6.0.9，echarts v4.1.0，@types/echarts v0.0.13）

1.安装 typings 库，以及 ECharts：

npm install typings echarts --global

2.安装 ECharts 的 TypeScript 定义文件，这个文件来自社区贡献

npm install @types/echarts --save

3.在 TypeScript 文件中导入echarts

（有可能在引入ECharts 时报出错误ECharts 找不到 Cannot find module echarts ，则需要npm install echarts --save）

import * as echarts from 'echarts';

ts代码：

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
@Component({selector: 'app-dashboard',templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {constructor() {console.log(echarts)}ngOnInit() {this.initCharts();}initCharts(){const ec = echarts as any;let lineChart = ec.init(document.getElementById('lineChart'));let lineChartOption ={tooltip : {trigger: 'axis'},toolbox: {show : false,},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);}
}

html模板：

<div id="lineChart" style="width:400px;height:300px"></div>
//一定要记得设置宽高

下图为显示结果：

文章参考自：https://zhuanlan.zhihu.com/p/28902584

Angular 项目中使用 ECharts 图表示例相关推荐

Angular项目中使用echarts中国地图
首先要在Angular项目中安装echarts的依赖: npm install echarts --save npm install ngx-echarts --save 第二.在创建包含地图的Ang ...
react项目中引入echarts图表
一.在一般html页面使用 1.在已有项目的终端输入进行安装 npm install echarts --save 2.在import里面输入 import echarts from 'echarts ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
在vue项目中使用echarts中的dataset制作多维度的柱状图
1.背景公司给我分配了一个任务是做一个大屏项目,类似于监控中心那种.页面内容比较简单,最下面是两个柱状图,柱状图是多维度的,而我也是第一次在项目中使用echarts,记录一下此次过程. 2.开始 2 ...
如何在项目中使用ECharts
文章目录前言一.ECharts介绍二.ECharts使用时的流程步骤 1.下载echarts并且引入到你的页面中 2.准备一个div盒子 3.初始化echarts实例对象 4.指定配置项和数据( ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...

Angular 项目中使用 ECharts 图表示例

Angular 项目中使用 ECharts 图表示例相关推荐

最新文章

热门文章