angular封装echarts

最新推荐文章于 2023-04-04 17:23:54 发布
最新推荐文章于 2023-04-04 17:23:54 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： angular 可视化 echarts 自定义指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanglong_web/article/details/78867879
版权
本文介绍了在Angular1.x项目中，由于官方推荐的基于Angular的ECharts库API不够友好，作者选择放弃使用并转向自定义指令进行封装。通过自定义指令的方式，作者实现了更直观和简单的ECharts柱状图指令封装，以适应项目的可视化监控需求。
摘要由CSDN通过智能技术生成

  echarts的官网推荐了几个基于angular的库，可能只是作者在实际开发中为了完善自己的项目而封装的，api不是那么友好，因为我的项目需要可视化的监控信息，而项目又是基于比较老的angular1.x，所以下面的这几个我只研究了第一个
这里写图片描述
  当然在项目里也是可以使用，但是因为api又进行了二次封装，很多的属性设置的时候不能直接从官网的api继承而来，使用起来很不方便，所以研究了一上午之后还是放弃了，转而自己封装自定义指令，后来发现其实封装自定义指令的方式更加直观和简单，我这个项目用的是官网common版本作为项目依赖。
  首先是我的页面，因为是演示，所以data和define-option的值暂且不传（.jade）
这里写图片描述
  接下来是我的echarts-bar.coffee文件，开始考虑过将常用的line,bar,pie，也就是折线图，柱状图和饼图封装成一个指令，但是为了更好的分离，我还是选择了分开封装，这里演示的是柱形图指令的封装

angular.module('zyClient.directives')
.directive
最低0.47元/天 解锁文章
zl_gogogo
关注
专栏目录
angularjs引入echarts包_Echart的angularjs封装
weixin_39647412的博客
12-19 230
ehcart是百度做的数据图表，基于原生js。接口和配置都写的很好很易读，还可以用于商用。下面正题用原生js的话，引入echarts.js无论是图表的样式设置，图表渲染，数据填充都是基于echart对象的option的，官网给出使用方法：var dom = document.getElementById('intro-chart');var chart = echarts.init(dom);ch...
百度 ECharts Angular 封装
weixin_34409703的博客
05-17 267
前言 近期项目中需要可视化图表，恰好 echarts 发布新版本，便选择了 echarts作为基础图表库。但是github 上基于 echarts 的封装大部分为基于2.X版本的封装，与项目不符合。 基于3.0+的版本 https://github.com/liekkas/ng-echarts，但是使用方式上跟我的设想不符合，所以选择重新...
angular下对echarts的封装 【使对象嵌套对象变得可维护】
Lakeson
04-04 287
已知显示图表的API是：chart.setOption(option: Object); 其中option为配置项。如果我们要对x坐标的show, fontSize进行配置，就是这样： const option = { xAxis: { data: ["一班", "二班", "三班"], axisLabel: { font...
AngularJS 自定义指令 - ECharts 2 柱状图
09-24
使用 AngularJS 的自定义指令对 ECharts 2 的柱状图进行封装，以便在页面重复调用。
angular4中引入echarts的方法示例
10-17
其中，ngx-echarts是Angular的ECharts封装组件，它简化了ECharts在Angular中的使用方式。通过npm命令行工具安装这两个包： ```bash npm install echarts --save npm install ngx-echarts --save ``` 安装完成后，...
Angularjs-echarts 点击事件
03-20
Angular-echarts是 wangshijun对echarts利用Angular封装的组件，github地址https://github.com/wangshijun/angular-echarts。附件只是在源码例子里上添加了点击事件。
在angular中使用ECharts
weixin_42344266的博客
07-31 7658
在项目中需要用echart图表，新手使用echart步骤。 1.下载，我是直接用npm下载的。 下载ngx-echarts 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 在 ECharts 的 GitHub 上下载最新的 release ...
Angular2.0/4.0 使用Echarts图表的示例代码
08-28
Echarts 是一个基于 JavaScript 编写的图表库，而 Ngx-echarts 则是一个专门为 Angular 设计的 Echarts 封装库。Ngx-echarts 提供了一个简洁的 API，允许开发者轻松地在 Angular 项目中使用 Echarts。 首先，需要在...
AngularJS 自定义指令 - ECharts 2 折线图
09-24
使用AngularJS自定义指令对 ECharts 2 的折线图进行封装，以便在项目中可以重复调用。
ECharts封装好的例子
01-10
拿来即可以用，简化了原有的模式。不足是封装的图表有限。希望能对大家有帮助
angular使用echarts折线图
kejmln的专栏
05-12 8446
echarts是开源的画图工具，在angular框架中引入echarts不能直接使用。需要新建一个directive //echarts基本参数 app.factory('$echartsConfig', function () { return { tooltip : { trigger: 'axis' }, lege
angularjs封装echarts
qingqingdezou_lei的博客
12-08 2036
使用angularjs的directive来封装echarts对数据可视化，有利于网页的分层，记录下工作中使用过的方式，其中directive代码如下：app.directive('eChart', function($http, $window) { function link($scope, element, attrs) { var myChart = echarts
angular把echarts封装为指令（配合requirejs）
web前端开发
09-08 3317
1、在require中配置echartsjs文件 2、在directives下定义指令（定义为全局的指令，任何页面调用都可以） define(['app','echarts'],function(app,echarts){ app.register.directive('bar',function(){ return { s
Angular中http请求后再执行封装的echarts指令（$watch）
web前端开发
09-23 972
1、项目遇见的bug，http请求后填充echarts指令数据会报错 2、解决方案，在指令中使用$watch监听和判断 （1）指令中定义的变量 （2）指令中添加$watch方法（注：所有的变量都要监听到） 3、再次刷新页面时，echarts图标就会在http请求后渲染出来
echarts封装
最新发布
NewBie96的博客
04-04 405
echarts封装详细代码
Echarts简单封装
咘噜biu的博客
08-10 349
1.引入Echarts (Vue项目)并注册组件 import vueEcharts from "vue-echarts"; import echarts from "echarts"; export default { name: "demo", components: { vueEcharts }, data(){ return { //... } }, //... } 2.页面嵌入 <vue-echarts ref="my_chart" :option
Angular4集成Echarts详细步骤
"本文将详细介绍如何在Angular 4项目中引入并使用ECharts图表库，通过实例步骤指导读者实现这一过程。" 在Angular 4应用中集成ECharts，需要遵循以下步骤： 1. 安装依赖 首先，需要安装ECharts库及其与Angular的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值