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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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实现的SESSION类
2014/12/02 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
vue实现选中效果
2020/10/07 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
详解Python 解压缩文件
2019/04/09 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
优秀医生事迹材料
2014/02/12 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
毕业设计工作总结
2015/08/14 职场文书