Angular8引入百度Echarts进行图表分析的实现代码


Posted in Javascript onNovember 27, 2019

最近突发奇想,想自己做一个理财分析记录的网页,主要给自己记账,然后想到了把每天,每周的消费用图标分析出来,于是就需要用到百度的echarts图标插件,talk is cheep, show me the code。

1. npm 安装ngx-echarts及相关的依赖

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D

2. 添加js引导文件

{
 "scripts": [
  "../node_modules/echarts/dist/echarts.min.js" // or echarts.js for debug purpose
 ],
}

3. AppModule引入NgxEchartsModule

这里有个坑,记得在你调用了echarts的相关模块的Module里面引入NgxEchartsModule,不然会报错:Template parse errors: Can't bind to 'options' since it isn't a known property of 'div'.所以切记

import { NgxEchartsModule } from 'ngx-echarts';
 
@NgModule({
 imports: [
  ...,
  NgxEchartsModule
 ],
 ...
})
export class AppModule { }

4. 使用echarts

html

<div echarts [options]="chartOption" class="demo-chart"></div>

scss

.demo-chart {
 height: 400px;
}

component

import { EChartOption } from 'echarts';
chartOption: EChartOption = {
 xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
  type: 'value'
 },
 series: [{
  data: [820, 932, 901, 934, 1290, 1330, 1320],
  type: 'line'
 }]
}

5. 参考网站

https://www.npmjs.com/package/ngx-echarts
angular echarts 在线模板

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
js 图片懒加载的实现
Oct 21 Javascript
vue实现浏览器全屏展示功能
Nov 27 #Javascript
js中apply和call的理解与使用方法
Nov 27 #Javascript
vue-cli在 history模式下的配置详解
Nov 26 #Javascript
js实现淘宝首页的banner栏效果
Nov 26 #Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 #Javascript
vue实现pdf文档在线预览功能
Nov 26 #Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
You might like
php下统计用户在线时间的一种尝试
2010/08/26 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
教师绩效考核方案
2014/01/21 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
初一学生期末评语
2014/04/24 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
会计试用期自我评价
2014/09/19 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
Redis如何实现分布式锁
2021/08/23 Redis
MySQL日期时间函数知识汇总
2022/03/17 MySQL
Spring Bean是如何初始化的详解
2022/03/22 Java/Android