ionic4-5引入使用 E-charts 图表

本文介绍了如何在Ionic4-5应用中引入并使用ECharts图表。首先需要下载相关插件,然后在 TypeScript 文件中导入图表模块,并在HTML页面中创建图表容器。确保在CSS文件中设置容器的宽度和高度,最后在TS页面中初始化并使用图表。
摘要由CSDN通过智能技术生成

第一步

	npm install echarts --save,
	npm install @types/echarts --save

下载好插件后,在你需要使用 图表的页面 ts 文件里引入

第二步
引入 图表

	import * as echarts from 'echarts';

在这里插入图片描述
然后在 html 页面声明容器

	<div class="echarts" id="chart" ></div>

非常重要:一定要在 css 页面 指定容器的高宽

	.echarts{
	width: 340px;
	height: 200px;
	margin: 0 auto
	}

然后再回到 ts 页面 使用图表

che() {

const ec = echarts as any;
const container = document.getElementById('chart');
this.chart = ec.init(container);
let option = {
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值