angular6.x 引入echarts
因为angular2+ 使用 ==typescript==开发,所以想要使用echarts,必须安装echarts针对angular的插件ngx-echarts。本文案列实际效果如上图。
安装ngx-echarts
npm install echarts --save
npm install ngx-echarts@3.2.0 --save
注意
- echarts >= 3.x
- angular >= 6 使用 v 3.0.0 以上版本
- angular <= 6 使用 v 2.3.1 以下版本
在项目中引入echarts
在angular.json文件中引入echarts.js
// angular.json 文件
{
...
"build":{
...
"options":{
...
"scripts":[
"node_modules/echarts/dist/echarts.min.js"
]
}
}
}
引入ngx-echarts模块
在 app.modules.ts根模块中引入 NgxEchartsModule
// app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {NgxEchartsModule} from 'ngx-echarts'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxEchartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
使用
app.component.ts
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {}
public chartOption={
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 274, name: '联盟广告' },
{ value: 235, name: '视频广告' },
{ value: 400, name: '搜索引擎' }
].sort(function(a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.6)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return Math.random() * 200;
}
}
]
}
}
app.component.html
// app.component.html
<div echarts [options]="chartOption" class="chart"></div>
app.component.css
// app.component.css
.chart {
height: 400px;
}
angular6.x 引入echarts的更多相关文章
- AngularJS引入Echarts的Demo
最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...
- vue引入echarts、找不到的图表引入方法、图表中的点击事件
1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...
- vue按需引入echarts
下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...
- vue-webpack 引入echarts 注意事项
0.执行教程 https://www.cnblogs.com/goloving/p/8654176.html1.在index 中创建 div <!DOCTYPE html> <htm ...
- mpvue中按需引入echarts
大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了.因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大.解决办法如下: 安装 首先我们先安装 ...
- 16、vue引入echarts,划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- Angular6如何引入jQuery-knob
Angular6如何引入jQuery-knob 1.概述 Angular6引入jQuery变得异常简单,请参考https://blog.csdn.net/qq_35321405/article/det ...
- 【React】react项目引入echarts插件 K线图
参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
随机推荐
- 关于网站登录后的页面操作所携带的不同cookie值
对于课堂派网站,登录后的页面操作只需要携带PHPSESSID或者cookie中间那部分即可,两个都带也可,SERVERID不知道是干啥的,每次响应的都会变. 代码实现: cookie = None c ...
- 15.flag在index里
查看一下源代码 点进去,发现没有什么有价值的东西~ 根据题目提示flag在index.php里面,所以我们可以通过php://filter读取文件内容 构造payload: http://123.20 ...
- 洛谷 SP14932 LCA - Lowest Common Ancestor
洛谷 SP14932 LCA - Lowest Common Ancestor 洛谷评测传送门 题目描述 A tree is an undirected graph in which any two ...
- 站点部署,IIS配置优化指南[转]
站点部署,IIS配置优化指南 目录 一. 设置应用程序池默认设置 二. 常规设置 三. 优化回收策略 四. 性能 五. IIS初始化(预加载 ...
- 在windows环境下部署nuxt项目(线上发布部署)
因为公司项目需要兼容SEO,同时我们也一直希望能够真正的实现前后端分离,于是毫不犹豫的选择了nuxt. 话说要重构前后端分离真是一个大工程,由于各种原因我们团队花了近两年时间都没有完成,最近才又重启把 ...
- 试着用workerman开发一个在线聊天应用
聊天功能是很常见的一种功能,Workerman是一款开源高性能异步PHP socket即时通讯框架. 什么是Workerman? Workerman是一款 开源 高性能异步 PHP socket即时通 ...
- 游戏设计模式——Unity事件队列(纪念京阿尼事件)
“对消息或事件的发送与受理进行时间上的解耦.” 在游戏开发过程中,经常会出现不同板块之间的信息交流,或是存在“当...,就...”的情况,事件队列编程模式可以有效解决消息传递中产生的脚本耦合问题,让同 ...
- mysql数据库的十种查询方式及多表查询
--mysql数据库的十种查询方式 -- (1)查询时起别名 SELECT id AS '编号',NAME AS '姓名',age AS '年龄' FROM student; -- (2)查询时添加常 ...
- P站全新官方精选集Pixivision
P站是一个主要由日本艺术家所组成的虚拟社群,主打插画.漫画.二次元作品网上沟通. 不过好消息是,P站全新的精选网站Pixivision上线了,多种语言界面,国内用户访问毫无压力. 近期精选的一系列作品 ...
- php使用inotify扩展监控文件或目录的变化
一.安装inotify扩展 1.下载inotify扩展源码 https://pecl.php.net/package/inotify 对于php7以上版本,请下载 inotify-2.0.0.tgz. ...