1.安装typings及echarts

npm install typings echarts --global

2.安装 ECharts 的 TypeScript 定义文件

npm install @types/echarts --save

3.在使用echarts的页面ts文件中引用echarts

import * as echarts from 'echarts'; 

4.在html页面添加div

<ion-content>
<div id="chart"></div>
</ion-content>

5.在scss中配置样式

page-home {
#chart {
position: absolute;
width: 100%;
height: 100%;
}
}

6.在ts文件中初始化

ionViewDidEnter() {
const ec = echarts as any;
const container = document.getElementById('chart');
const chart = ec.init(container);
chart.setOption({
series: {
type: 'pie',
data: [{
name: 'A', value: 10
}, {
name: 'B', value: 20
}, {
name: 'C', value: 30
}]
}
});
}

ionic3使用echarts的更多相关文章

  1. Ionic3实现选项卡切换可以重新加载echarts

    要求 选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果效果如下: 注意点 1.echarts要想每次都能重新加载,需要移除"_echarts_instance_&q ...

  2. ionic3引用外部插件--百度地图及echart报表的使用

    前言 ionic3提供的组件已经相当丰富咯,但是事实上有些特殊的需求,比如使用百度地图,或者第三方插件echart报表插件是,就不能用传统的方式去使用第三方插件咯,如何在Ionic3项目中使用第三方J ...

  3. 一起来玩echarts系列(一)------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  6. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  7. 数据图表插件Echarts(一)

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  8. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  9. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

随机推荐

  1. centos安装MySQL5.7

    Mysql安装 一.查看是否安装MySQL # rpm -qa | grep mysql 二.查看所有mariadb的软件包 # rpm -qa | grep mariadb 三.删除相关的maria ...

  2. String Method的字符串变换的一个例子

    <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8" ...

  3. SQL 姓名,联系方式-脱敏

    SELECT ORDER_PROJECT.project_type AS attribute, ORDER_PROJECT.order_num, ,), "*") AS pv, C ...

  4. 团队合作one

    一.项目介绍 为生活在长大的学生提供方快捷的生活服务,通过帖子发现自己志同道合的朋友,记录自己在长大点滴.本项目的意义在于锻炼团队的scrum能力,加强团队合作能力.确定本项目采用的技术方向:本项目整 ...

  5. QWaiteCondition思考3

    QWaitConditioin::wait() 接收一个mutex作为参数,这个mutex应该被调用线程初始化为锁定状态.在线程进入休眠状态(waite)之前,mutex会被解锁.当线程被唤醒(Wak ...

  6. C#中的Cookie

    cookie属性: name字段为一个cookie的名称. value字段为一个cookie的值. domain字段为可以访问此cookie的域名. path字段为可以访问此cookie的页面路径. ...

  7. Javascript仿贪吃蛇出现Bug的反思

    bug现象:    图一

  8. DashBoard创建各种表(一)

    创建透视表 1.首先需要创建一个DashBoard,然后点击开始导航栏中的透视,创建一个透视表,透视表可以交叉式的显示报告,让我们可以更直观的看到多维数据. 2.把CategroyName和Categ ...

  9. Python:从入门到实践--第六章--字典--练习

    #1.人:使用一个字典来存储一个熟人的信息;包括姓,名,年龄和居住的城市.将字典中的每项信息都打印出来 friend = { 'last_name':'马', 'first_name':'脑壳', ' ...

  10. python 启动时报错无法正常启动(0xc000007b)请单击“确定”关闭应用程序的解决办法

    这是一个自己非常傻逼的问题,但是还是想记录下来 晚上安装python,不管是命令提示符中运行还是python直接打开,都提示报错 各种百度,各种查找排除以后,皆不能解决错误 最后发现:特么64位系统下 ...