Angular ngx-echarts图表
1. 安装echarts包、ngx-echarts包
npm install echarts --save
npm install ngx-echarts --save
2. angular.json中引入echarts.js文件
"scripts": [ "node_modules/echarts/dist/echarts.js" ]
3. 根模块中导入NgxEchartsModule模块
import {NgxEchartsModule} from 'ngx-echarts';
imports: [ NgxEchartsModule ]
4. 组件中使用echarts图表
(1). HTML - test.component.html
<div echarts [options]="chartOption" class="demo-chart" style="width: 100%; height: 560px;"></div>
(2). TS - test.compont.ts
export class TestComponent implements OnInit {
// 定义图表项
chartOption: any;
constructor(private _httpClient: HttpClient){}
ngOnInit() {
// 查询图表所需数据
this._httpClient.get('路径').subscribe((data: any) => {
//图表项赋值
this.chartOption = {
color = ['#59a1f8', '#78c87d', '#f6d464', '#445285', '#8e67de', '#e36f7e', '#70c9ca', '#d396c6', '#b09e6c', '#4f58d5', '#96a36f'];
legend = {};
tooltip = {};
dataset = {
source: data
};
xAxis = {type: 'category'};
yAxis = {};
series = [
{type: 'bar'}
];
};
});
}
data数据格式:
[
["发布日期","数量"],
["2014-03-25",1],
["2014-04-04",1],
["2014-04-09",1],
["2014-04-14",2],
["2014-04-17",1]
...
]
5. 重启程序,浏览器访问:
扩展 --------------------
项目中多次用到了柱形图,配置变量options如何做成通用的??
解决方案:
1. 添加模型文件 bar.model.ts
// echart- 柱形图Option
export class BarOptionModel {
color = ['#59a1f8', '#78c87d', '#f6d464', '#445285', '#8e67de', '#e36f7e', '#70c9ca', '#d396c6', '#b09e6c', '#4f58d5', '#96a36f'];
legend = {};
tooltip = {};
dataset = {
source: []
};
xAxis = {type: 'category'};
yAxis = {};
series = [
{type: 'bar'}
];
}
2. 修改test.component.ts如下:
import {BarOptionModel} from '模型文件';
export class TestComponent implements OnInit {
// 定义图表项
chartOption: BarOptionModel;
constructor(private _httpClient: HttpClient){}
ngOnInit() {
// 查询图表所需数据
this._httpClient.get('路径').subscribe((data: any) => {
// 配置图表项
this.chartOption = new BarOptionModel();
// 图表项中添加数据
this.chartOption.dataset.source = data;
});
}
Angular ngx-echarts图表的更多相关文章
- Angular echarts图表自适应屏幕指令
关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...
- 使用angular封装echarts
Echarts是一个开源的图表组件,图表比较丰富,工作中需要用到它来搭建一个数据展示系统.但是系统原有的框架是基于angular的,而echarts是基于原生js的,如果直接使用的话就丢失了angul ...
- angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...
- Angular7如何动态刷新Echarts图表
1 概述 echarts是百度的开源图表插件 Angular中引入echarts网上教程很多 Angular引入echarts,并使用动态刷新 2 安装 请参考大神的博客:https://blog.c ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line,Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
随机推荐
- markdown 使用示例,包含常用的标题、图片、文字样式、代码块、链接等
ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/Markdown%E7%A4%BA%E4%BE%8B # ...
- 极简Docker和Kubernetes发展史
2013年 Docker项目开源 2013年,以AWS及OpenStack,以Cloud Foundry为代表的开源Pass项目,成了云计算领域的一股清流,pass提供了一种"应用托管&qu ...
- 洛谷 P1514 【引水入城】
题库 :洛谷 题号 :1514 题目 :引水入城 link :https://www.luogu.org/problemnew/show/P1514 思路 :搜索从第一排开始能覆盖最后一排的区间L ~ ...
- Linux中安装PostgreSQL-10.1
环境说明 Linux版本:CentOS Linux release 7.6.1810 (Core) PostgreSQL版本:PostgreSQL-10.1 PostgreSQL下载网址:https: ...
- IT项目经理入门心法
- codeforces 486 D. Valid Sets(树形dp)
题目链接:http://codeforces.com/contest/486/problem/D 题意:给出n个点,还有n-1条边的信息,问这些点共能构成几棵满足要求的树,构成树的条件是. 1)首先这 ...
- yzoj P1126 塔 题解
题意:给n个积木,搭成两个高度相同的塔,问最高高度 正解是dp 答案在dp[n][0] 代码 #include<bits/stdc++.h> using namespace std; in ...
- win、mac 设置 php上传文件大小限制
修改php.ini win平台WAMP修改 步骤 左键点击wamp 选择php 在弹出的窗口中选择php.ini 在打开的文件中进行修改(修改步骤如下) 修改完毕,保存并重启wamp mac MAM ...
- springboot统一ajax返回数据格式,并且jquery ajax success函数修改
服务端代码: package com.zhqn.sc.cfg; import org.springframework.core.MethodParameter; import org.springfr ...
- 基于SSM后台管理系统/人事管理系统
今天给大家分享一个基于SpringMVC+Mybatis+Mysql的后台管理系统,顾名思义,一个系统一般分为前台和后台,前台主要面向用户,而后台主要面向的则是管理员,后台和前台有所不同,后台的业务一 ...