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
  ],...
})

4、html文件，其中包括配置和样式

<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

相关推荐