Angular+ionic2+Echarts 实现图形制作
Posted dakunqq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular+ionic2+Echarts 实现图形制作相关的知识，希望对你有一定的参考价值。
step1:添加插件echart;
npm install echarts --save
package.json文件中会在dependencies中添加echarts
step2:运行cmd,创建echart-pie组件；
ionic g component echart-pie
echart-pie.html文件:
<div #echart class="echart-pie"> </div>
echart-pie.scss文件：
echart-pie .echart-pie width: 100%; height: 380px;
echart-pie.ts文件：
import Component, OnInit, ElementRef, ViewChild from ‘@angular/core‘; import * as echarts from ‘echarts‘; //引入图表插件 @Component( selector: ‘echart-pie‘, templateUrl: ‘echart-pie.html‘ ) export class EchartPieComponent implements OnInit @ViewChild(‘echart‘) echart: ElementRef;//显示图形的容器 //显示数据为官方文档数据 pieChart = //标题 title: text: ‘某站点用户访问来源‘, subtext: ‘纯属虚构‘, x: ‘center‘ , //百分比提示信息 tooltip: trigger: ‘item‘, formatter: "a <br/>b : c (d%)" , //用例 legend: orient: ‘vertical‘, left: ‘left‘, data: [‘直接访问‘, ‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘搜索引擎‘] , //扇形配置项 series: [ name: ‘访问来源‘, type: ‘pie‘, radius: ‘55%‘, center: [‘50%‘, ‘60%‘], data: [ value: 335, name: ‘直接访问‘ , value: 310, name: ‘邮件营销‘ , value: 234, name: ‘联盟广告‘ , value: 135, name: ‘视频广告‘ , value: 1548, name: ‘搜索引擎‘ ], itemStyle: emphasis: shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0, 0.5)‘ ] ; constructor() ngOnInit() this.getEchart(); getEchart() //echarts初始化 echarts.init(this.echart.nativeElement).setOption(this.pieChart, true);
step3:在需要图形显示的位置调用该组件。
注意：在对应的module中引入该组件，以home为例.在home.module.ts中引入EchartPieComponent，如下：
import NgModule from ‘@angular/core‘; import IonicPageModule from ‘ionic-angular‘; import HomePage from ‘./home‘; import EchartPieComponent from ‘../../components/echart-pie/echart-pie‘; @NgModule( declarations: [ HomePage, EchartPieComponent ], imports: [ IonicPageModule.forChild(HomePage), ], exports: [ HomePage ] ) export class HomePageModule
在home.html中使用：
<ion-header> <ion-toolbar> <ion-title>重点关注</ion-title> </ion-toolbar> </ion-header> <ion-content> <echart-pie></echart-pie> </ion-content>
step4：
over~
$.ajax(type : "POST",async : false,url : ‘$ctx/basic/bsAllPictureGuarantee/pictJson‘,da ...
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
JAVA简单Swing图形界面应用演示样例 package org.rui.hello; import javax.swing.JFrame; /** * 简单的swing窗体 * @author l ...
最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点,Echarts 早就开放了 . 自己学Echarts的时候走了很多的弯路,毕竟谁让自己菜呢,多撞几次南墙才晓得疼 才知道学习方法,新手上 ...
案例: http://www.internetke.com/jsEffects/2018040406/ 前段时间用echarts做了流程图,在此记录下制作步骤. 一.Echarts是什么 Echart ...
echarts是开源的画图工具,在angular框架中引入echarts不能直接使用.需要新建一个directive //echarts基本参数 app.factory(‘$echartsConfig ...
Echarts是一个开源的图表组件,图表比较丰富,工作中需要用到它来搭建一个数据展示系统.但是系统原有的框架是基于angular的,而echarts是基于原生js的,如果直接使用的话就丢失了angul ...
</!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...
Couchbase是membase的升级版,membase与memcache是同一家公司出的,Couchbase包含了memcache的功能. 从其官网上下载最新的版本安装即可.安装成功后会弹出设置页 ...
mysql命令执行sql文件的两种方法 摘要:和其他数据库一样,MySQL也提供了命令执行sql脚本文件,方便地进行数据库.表以及数据等各种操作.下面笔者讲解MySQL执行sql文件命令的两种方法,希 ...
苹果公司开发者账号注册流程详解 http://www.cnblogs.com/xilinch/p/4037164.html 真机调试教程 http://segmentfault.com/a/11900 ...
// 在坐标(10,50)创建宽320,高200的画布 var paper = Raphael(10, 50, 320, 200); // 在坐标(x = 50, y = 40)绘制半径为 10 的圆 ...
在网络化的环境中,特别是基于互联网发布的Winform程序,程序的自动更新功能是比较重要的操作,这样可以避免挨个给使用者打电话.发信息通知或者发送软件等,要求其对应用程序进行升级.实现程序的自动更新, ...
使用到了ba-haschange.js <script src="../style/js/plugin/template-native-debug.js"></s ...
2212: [Poi2011]Tree Rotations http://zzdxjyzd.com/Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 391 Solved: 127[Submi ...
ubuntu server 14.04 上安装jdk1.8 1.使用apt-get安装oracle-jdk安装oracle jdk sudo apt-get install python-softwa ...
1.线程分类 线程由程序员创建,可是创建的方式不同,总体来说有两种,一种是个人构造,也就是使用thread类new线程对象创建,这一类线程是大部分程序员知道的,也叫专用线程;还有一种是由CLR创建,这 ...
一.客户端/服务器架构1.C/S架构:(1)硬件C/S架构(打印机)(2)软件C/S架构(web服务)2.生活中的C/S架构:饭店是S端,所有食客是C端3.C/S架构与socket的关系:socke就 ...
以上是关于Angular+ionic2+Echarts 实现图形制作的主要内容，如果未能解决你的问题，请参考以下文章
Ionic2系列——使用DeepLinker实现指定页面URL
IONIC2/Angular2 ngOnChange 不起作用