【Angular】 NG-ZORRO 引用Echarts

第一步 Ts中引入EchartsOption

import { EChartsOption } from 'echarts';

第二步 声明Echarts数据源

这部分可以直接去Echats复制过来，选择自己需要的数据源
链接: Echarts官网实例

public outputOptions: EChartsOption = {
    tooltip: {},
    dataset: {
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
    grid: {
      top: '15px',
      left: '50px',
      right: '10px',
      bottom: '20px'
    }
  };

第三步 html中调用

options中指定数据源 ng-template为模板

   <ng-template #charts style="padding: 0px; margin-bottom: 10px">
      <div echarts [options]="outputOptions" [style]="{ height: '240px' }" [routerLink]="'/enterprise'"> </div>
    </ng-template>

通过nzCover调用相应模板

<nz-card
      nzTitle="信息"
      nzBordered="false"
      [nzCover]="charts"
      nzHoverable="true"
      style="padding: 0px; height: 305px; margin-top: 20px"
      [routerLink]="'/productSearch'"
    >

拓展地图Echarts

定义数据源就不能如上图一样指定outputOptions类型为EChartsOption
因为Map中存在EchatsOption不存在的属性，会报错，所以声明的时候需要声明空数据源

mapOption = {};

赋值时可以再初始化的时候进行赋值

// 地图Echarts数据
    this.http.get('assets/heilongjiang.json').subscribe(geoJson => {
      // @ts-ignore
      echarts.registerMap('China', geoJson);
      this.mapOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 50,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#ADCDEF', '#2171C1']
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'China', //  与注册时的名字保持统一   echarts.registerMap('China', geoJson);
            itemStyle: {
              normal: {
                areaColor: '#AAD5FF',
                borderColor: 'white',
                label: { show: true, color: 'white' }
              },
              emphasis: {
                areaColor: '#A5DABB'
              }
            },
            zoom: 1.2,
            data: [
              { name: '北京', value: 0 },
              { name: '天津', value: 0 },
              { name: '重庆', value: 0 },
              { name: '上海', value: 0 },
              { name: '湖南', value: 0 },
              { name: '广东', value: 20 },
              { name: '福建', value: 0 },
              { name: '江西', value: 0 },
              { name: '四川', value: 0 },
              { name: '广西', value: 0 },
              { name: '新疆', value: 0 },
              { name: '西藏', value: 0 },
              { name: '青海', value: 0 },
              { name: '甘肃', value: 0 },
              { name: '宁夏', value: 0 },
              { name: '内蒙古', value: 0 },
              { name: '海南', value: 0 },
              { name: '山西', value: 0 },
              { name: '陕西', value: 0 },
              { name: '云南', value: 0 },
              { name: '贵州', value: 0 },
              { name: '湖北', value: 0 },
              { name: '浙江', value: 0 },
              { name: '安徽', value: 0 },
              { name: '河南', value: 0 },
              { name: '山东', value: 0 },
              { name: '江苏', value: 0 },
              { name: '河北', value: 0 },
              { name: '辽宁', value: 0 },
              { name: '吉林', value: 0 },
              { name: '黑龙江', value: 0 },
              { name: '台湾', value: 0 }
            ]
          }
        ]
      };
    });

调用方法与上述一致，只是声明数据时不同而已

完结