Angular2或Angular4使用echarts ， ngx-echarts的方法

一个比较正确的使用方法：https://github.com/xieziyu/ngx-echarts

1、

npm install echarts --save

npm install ngx-echarts --save

如果网速差，可以使用淘宝镜像

2、项目中.angular-cli.json 中添加echarts

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

3、在module 中调用

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

4、html中

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

5、chartOption就是option

6、事件方法

chartClick: It emits the same params of 'click' event
chartDblClick: It emits the same params of 'dblclick' event
chartMouseDown: It emits the same params of 'mousedown' event
chartMouseUp: It emits the same params of 'mouseup' event
chartMouseOver: It emits the same params of 'mouseover' event
chartMouseOut: It emits the same params of 'mouseout' event
chartGlobalOut: It emits the same params of 'globalout' event
chartContextMenu: It emits the same params of 'contextmenu' event (since v1.2.1)
chartDataZoom: It emits the same params of 'dataZoom' event (thanks to averhaegen)

转载于:https://www.cnblogs.com/branton-design/p/7712546.html

Angular2或Angular4使用echarts ， ngx-echarts的方法相关推荐

Angular2或Angular4使用echarts，ngx-echarts
Angular2或Angular4使用echarts,ngx-echarts 1> 安装 npm install echarts --save npm install ngx-echarts@2 ...
ECharts开源图表使用方法简单介绍
ECharts图表是基于Canvas,纯Javascript图表库,基于BSD开源协议,官网地址:http://echarts.baidu.com/index.html 需要先下载插件:https:/ ...
【echarts】echarts开发详解
echarts官方文档: http://echarts.baidu.com/doc/doc.html#简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javas ...
在vue中使用echarts,echarts-map:echarts画地图
1.首先安装:cnpm install echarts --save 2.然后main.js引入(也可以组件内引入) // 引入ECharts图表公共组件 import echarts from 'e ...
Angular2 VS Angular4 深度对比：特性、性能
在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一. Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本 ...
Apache Echarts简介|Echarts基本操作|配置
每个图表均配有对应的源代码以及知识点~~~~ 详情可点开对应的图表学习! 各类常用图表总结在此!配合使用更方便~ https://blog.csdn.net/diviner_s/article/det ...
js获取id、echarts中的绘制方法
获取id function getId(id) {return typeof id === "string" ? document.getElementById(id) : nul ...
Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件
在博主的前述的一篇文章当中,有写到如何在vue项目引入Echarts插件,Echarts插件的应用方法可参考博主之前的文章.在本文中,博主将结合实际开发过程中的操作,介绍一下如何引入echarts-l ...
echarts - 使用echarts过程中遇到的问题(pending...)
1. 配合tab切换时,被display:none的元素init设置echarts失败 2018-11-09 18:09:35 现象描述:有一个tabs选项卡,每个切换项A.B中都有使用echart ...

Angular2或Angular4使用echarts ， ngx-echarts的方法

Angular2或Angular4使用echarts ， ngx-echarts的方法相关推荐

最新文章

热门文章