angular cli 使用echarts
1、安装库
npm install typings echarts --global
npm install ngx-echarts --save
npm install @types/echarts --save
2、app.module引入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {ButtonModule} from 'primeng/primeng';
import { HeaderComponent } from './components/header/header.component'; // header components
import {NgxEchartsModule} from 'ngx-echarts';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
HeaderComponent,
// selfHttp
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
ButtonModule,
NgxEchartsModule
],
providers: [httpInterceptorProviders, apiList,{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule { }
3、具体文件使用
html代码
<div #myCharts echarts [options]="chartOption" class="demo-chart charstDiv" ></div>
ts代码
import { Component, OnInit, Input } from '@angular/core';
import { MessageService } from 'primeng/api';
import * as ec from 'echarts'; // 没有安装ypes/echarts就会报错
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css'],
providers: [MessageService]
}) export class TableComponent implements OnInit { chartOption: any;
constructor(private messageService: MessageService) { } ngOnInit() {
this.selectedColumns = this.tablelist.header;
this.items = [
{
label: '查看', icon: 'pi pi-eye', command: (event) => this.showDialog()
},
{ label: '删除', icon: 'pi pi-trash', command: (event) => this.del() }
]; }
onRowSelect(event) {
this.data = {
labels: [],
datasets: []
};
this.displaySidebar = true;
// 组装图表
var data1 = [];
var data2 = [];
var data3 = [];
this.selectedList.forEach((element, index) => {
data1.push((element.month + '月'));
// 销量
data2.push(element.sale);
// 店铺数
data3.push(element.comNum);
});
this.chartOption = {
// title: {
// text: '堆叠区域图'
// },
backgroundColor: '#2c343c',
tooltip: {
trigger: 'axis'
},
legend: {
data: ['零售额', '店铺总数',],
textStyle: {//图例文字的样式
color: 'white',
fontSize: 16
}
},
toolbox: {
orient: 'vertical',
top: 'middle',
feature: {
// dataView: {//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
// show: true,//是否显示组件。
// readOnly: false
// },
magicType: {//动态类型切换 示例:feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
show: true,
type: ['line', 'bar']
},
restore: {//配置项还原。
show: true
},
saveAsImage: {}
}
},
dataZoom: {//dataZoom 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。
type: 'slider',//滑动条型数据区域缩放组件
start: 0,//起始位置0
end: 100//结束位置100
},
grid: {
left: '3%',
right: '4%',
bottom: '40px',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 0,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
data: data1,
axisLine: {
lineStyle: {
color: 'white', //更改坐标轴颜色
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
interval: 0,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
color: 'white', //更改坐标轴颜色
}
}
}
],
series: [
{
name: '零售额',
type: 'line',
stack: '总量',
areaStyle: {normal: {
color:new ec.graphic.LinearGradient(0, 0, 0, 1, [ //随机颜色
{ offset: 0, color: 'red' },
{ offset: 0.5, color: 'pink' },
{ offset: 1, color: '#ddd' }
])
}},
itemStyle: {
normal: {
color: function () {
return '#' + Math.floor(Math.random() * 0xffffff).toString(16); // 随机颜色
}
}
},
data: data2
},
{
name: '店铺总数',
type: 'line',
stack: '总量',
areaStyle: {normal: {
color:new ec.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9cd4d8' },
{ offset: 0.5, color: '#aec9fe' },
{ offset: 1, color: 'pink' }
])
}},
itemStyle: {
normal: {
color: function () {
return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
}
}
},
data: data3
},
]
}
} }
注意:渲染数据的时机要选好,组装数据放在最后组装,如果把chartOption 定义在前面,再给series赋值图表是不会更新的,当然ec的方法里面可能会有,但是确挺麻烦的,优先考虑简单的。
有点colorful了,自己调整下。
angular cli 使用echarts的更多相关文章
- angular cli 反向代理实现跨域
版本: 1.后端实现跨域(php) header("Access-Control-Allow-Origin: *"); // // 响应类型 // header('Access-C ...
- Angular环境准备和Angular cli
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular4---起步----环境配置安装@angular/cli
学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...
- 使用Angular CLI进行单元测试和E2E测试
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
- 使用Angular CLI从蓝本生成代码
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 这篇文章主要是讲生 ...
随机推荐
- Undefined symbols for architecture x86_64"_OBJC_CLASS_$_QQApiInterface 怎么搞
今天上午报了一个这样的错误 解决办法 如此如此 ~~ 然后编译 看看报的什么错误 还是不行的话就重新导入三方库 添加依赖库 结果build success
- python列表式推导
1.基本语法 [表达式 for 变量 in 列表] 或者 : [表达式 for 变量 in 列表 if 条件] 2.示例 生成列表 li=[x for x in range(10)] print(l ...
- B.Silly Mistake
题目:愚蠢的错误 题意:中心公司有一个办公室有一个成熟的安全系统,这里面有10^6个雇员,编号从1到10^6 安全系统有入口和出口,数字i表示第i个雇员进入,-i表示第i个雇员出去 公司有一些严格的规 ...
- unittest自动化测试框架
目录 框架的概念 Unittest单元测试框架 常用的assert语句 unittest创建测试代码的方式: unittest构建测试套件(测试用例集合): unittest忽略测试用例: 运行测试集 ...
- 21.跨域和CORS
一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- 大数据学习笔记——Hadoop编程实战之HDFS
HDFS基本API的应用(包含IDEA的基本设置) 在上一篇博客中,本人详细地整理了如何从0搭建一个HA模式下的分布式Hadoop平台,那么,在上一篇的基础上,我们终于可以进行编程实操了,同样,在编程 ...
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 计算机二级Python
概述 计算机二级在近两年新加了python的选择,趁机考了一下,顺便记录一下学习的一些所获 第一章 程序设计语言概述 考纲考点: 这一部分主要是介绍计算机语言的公共常识,一些尝试我就按照自己的理解方式 ...
- python爬虫--多任务异步协程, 快点,在快点......
多任务异步协程asyncio 特殊函数: - 就是async关键字修饰的一个函数的定义 - 特殊之处: - 特殊函数被调用后会返回一个协程对象 - 特殊函数调用后内部的程序语句没有被立即执行 - 协程 ...
- 使用Portainer集中管理多地域内网运行的Docker实例
1. 单机运行的Docker 容器化部署是现在进行时,开源应用大多数支持容器化部署 在少量机器的场景下往往采用docker cli 和 docker-compose管理,进行"单机式管理&q ...