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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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中路径问题的解决方案
2006/10/09 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
JavaScript闭包和回调详解
2017/08/09 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python中count函数简单用法
2020/01/05 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
汽车广告策划方案
2014/05/31 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
计划生育汇报材料
2014/12/26 职场文书
出国导师推荐信
2015/03/25 职场文书
社会实践活动总结格式
2015/05/11 职场文书
python中urllib包的网络请求教程
2022/04/19 Python