Angular6如何引入第三方插件和Angular6如何使用echarts--如china.js

• 如何引入第三方插件以jquery为例

1.安装
npm install --save jquery

2.angular.json 配置
"styles": [
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

3.$是javaScript的AppCompoment是TyptScript的，不能直接引用，将对应的类型文件安装本地库
npm install @types/jquery --save-dev

4.使用
import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));

• 如何使用echarts

1.安装
npm install echarts --save
npm install ngx-echarts --save

2.app.modules.ts根模块中引入 NgxEchartsModule
import {NgxEchartsModule} from "ngx-echarts";


@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxEchartsModule

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


3.demo如下

• AppComponent.html的ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  chartOption = {
    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, 255, 0.6)'
            }
          }
        },
        labelLine: {
          normal: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#c23531',
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  }

  ngOnInit(): void {

    this.chartOption;
  }
}

• html

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

如果还是不行就用如下方法，以在angular4中添加china.js为例

0.先requre导入china.js

1.你已经按照上面的操作导入了model类和相应依赖npm命令，在ts中添加如下代码

import * as echarts from 'echarts';

/**
 * @Description : 中国地图
 * @Auth : Xuhy
 * @Date : 2019/5/24
 * @Time : 10:00
 */
@Component({
    selector: 'app-china-js',
    templateUrl: './china-js.component.html',
})
export class ChinaJsComponent implements OnInit {

    // 中国地图
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}</br>{c}'
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                selectedMode: 'multiple',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    {name: '广东', selected: true, value: 22}
                ]
            }
        ]
    };

    app: any;
    dom: HTMLElement;

    myChart: any;

    ngOnInit(): void {
        this.app = {};
        this.dom = document.getElementById('map');
        this.myChart = echarts.init(this.dom);
        this.myChart.setOption(this.option, true);
    }
}

2.在html中添加如下代码

<div id="map" class="chart" style="width: 400px;height: 400px;"></div>