大佬教程收集整理的这篇文章主要介绍了angular2 echarts 插件ngx-echarts,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
1、安装插件,必须安装echarts.js基础js文件和ngx-echarts插件文件
npm install echarts --save npm install ngx-echarts --save
2、配置 echarts.js
首先要引入echarts.js文件 A: 使用angular-cli创建项目,打开angular-cli.json,作如下配置 { "scripts": [ "../node_modules/echarts/dist/echarts.min.js" ],} B: 使用webpack创建项目,打开webpack.common.js 作如下配置 new webpack.ProvidePlugin({ echarts: "echarts" }) C: 如果不知道使用什么创建项目,呵呵,可以直接在index.html文件中通过cdn链接引入echarts.js文件 <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
3、配置ngx-echarts
import { AngularEchartsModule } from 'ngx-echarts'; ... @NgModule({ imports: [ AngularEchartsModule ],... })
<div echarts [options]="echartsOption" class="echartsStyle"></div>
5、在组件中书写配置,可以在echarts官网查询配置细节
import { Component,OnInit } from "@angular/core"; @Component({ SELEctor: "echarts",templateUrl: "./echarts.component.html" }) export class EchartsComponent implements OnInit { public echartOption: any; constructor() { } ngOnInit() { this.echartOption = { BACkgroundColor: '#2c343c',title: { text: 'Customized Pie',left: 'center',top: 20,textStyle: { color: '#ccc' } },tooltip: { trigger: 'item',formatter: "{a} <br/>{B} : {C} ({D}%)" },visualMap: { show: false,min: 80,max: 600,inRange: { colorLightness: [0,1] } },series: [ { name: '访问来源',type: 'pie',radius: '55%',center: ['50%','50%'],data: [ { value: 335,name: '直接访问' },{ value: 310,name: '邮件营销' },{ value: 274,name: '联盟广告' },{ value: 235,name: '视频广告' },{ value: 400,name: '搜索引擎' } ].sort(function(a,b) { return a.value - b.value; }),roseType: 'radius',label: { normal: { textStyle: { color: 'rgba(255,255,0.3)' } } },labelLine: { normal: { linestyle: { color: 'rgba(255,0.3)' },smooth: 0.2,length: 10,length2: 20 } },itemStyle: { normal: { color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0,0.5)' } },animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function(idX) { return Math.random() * 200; } } ] } } }
6、通过标签<echarts></echarts>将这个组件引用到其他界面就可以使用了
注意: 1. 必须设置高度 2. 不要忘记引入echarts.js文件
7、如果想使用地图,那么先要在echarts网站下载地图的js文件,然后和配置echarts.js文件一样,做相应的配置,然后修改组件中的配置就可以了。
以上是大佬教程为你收集整理的angular2 echarts 插件ngx-echarts全部内容,希望文章能够帮你解决angular2 echarts 插件ngx-echarts所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。