關(guān)于做angular4引入echarts圖表

注意：該echarts版本為v3.0.0 ngx-echarts版本v2.1.0angular版本為v6.0.0以下本文下面采用最新版本的 echarts4.1.0ngx-echarts3.1.0angular6.0.0最新的和2.1.0用法變化不大。就是添加了些API

案例

1.安裝ngx-echarts

npm install echarts --save

npm install ngx-echarts --save

2.在項(xiàng)目中引入echarts

在項(xiàng)目包配置文件中引入js腳本

//angular-cli.json文件

{
    "apps": [{
        "scripts":[
            "../node_modules/echarts/dist/echarts.min.js",
            "../node_modules/echarts/map/js/china.js",
            "../node_modules/echarts/dist/extension/bmap.js"
        ]
    }]
}

3.使用

echarts.module.ts
import { NgModule } from '@angular/core';
import { EchartsComponent } from './echarts/echarts.component';
import { AngularEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    AngularEchartsModule
  ],
  declarations: [EchartsComponent],
})
export class EchartsModule { }
echarts.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-echarts',
  templateUrl: './echarts.component.html',
  styleUrls: ['./echarts.component.scss']
})
export class EchartsComponent implements OnInit {
  showloading:boolean = true;

  constructor() { 
    
    setTimeout(()=> {
      this.showloading = false;
    }, 3000);
  }

  ngOnInit() {
  }

  chartOption = {
    title: {
      text: '堆疊區(qū)域圖'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '直接訪問(wèn)', '搜索引擎']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '郵件營(yíng)銷',
        type: 'line',
        stack: '總量',
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '聯(lián)盟廣告',
        type: 'line',
        stack: '總量',
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '視頻廣告',
        type: 'line',
        stack: '總量',
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '直接訪問(wèn)',
        type: 'line',
        stack: '總量',
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '搜索引擎',
        type: 'line',
        stack: '總量',
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  }

  Baroptions = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>: {c} (u0z1t8os%)"
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data: ['直達(dá)', '營(yíng)銷廣告', '搜索引擎', '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '百度', '谷歌', '必應(yīng)', '其他']
    },
    series: [
      {
        name: '訪問(wèn)來(lái)源',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],

        label: {
          normal: {
            position: 'inner'
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: '直達(dá)', selected: true },
          { value: 679, name: '營(yíng)銷廣告' },
          { value: 1548, name: '搜索引擎' }
        ]
      },
      {
        name: '訪問(wèn)來(lái)源',
        type: 'pie',
        radius: ['40%', '55%'],

        data: [
          { value: 335, name: '直達(dá)' },
          { value: 310, name: '郵件營(yíng)銷' },
          { value: 234, name: '聯(lián)盟廣告' },
          { value: 135, name: '視頻廣告' },
          { value: 1048, name: '百度' },
          { value: 251, name: '谷歌' },
          { value: 147, name: '必應(yīng)' },
          { value: 102, name: '其他' }
        ]
      }
    ]
  }



  linkoption = {
    title: {
      text: '懶貓今日訪問(wèn)量'
    },
    color: ['#3398DB'],
    //氣泡提示框，常用于展現(xiàn)更詳細(xì)的數(shù)據(jù)
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
        type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
      }
    },
    toolbox: {
      show: true,
      feature: {
        //顯示縮放按鈕
        dataZoom: {
          show: true
        },
        //顯示折線和塊狀圖之間的切換
        magicType: {
          show: true,
          type: ['bar', 'line']
        },
        //顯示是否還原
        restore: {
          show: true
        },
        //是否顯示圖片
        saveAsImage: {
          show: true
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: [21231,1212,21231,3213],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        rotate: 20
      },
    }],
    yAxis: [{
      name: "懶貓今日訪問(wèn)量",
      type: 'value'
    }],
    series: [{
      name: '今日訪問(wèn)次數(shù)',
      type: 'bar',
      barWidth: '60%',
      label: {
        normal: {
          show: true
        }
      },
      data:[21231,1212,21231,3213]
    }]
  }


  datamapvalue = [
       {name: '海門(mén)', value: [121.15,31.89,9]},
       {name: '鄂爾多斯', value: [109.781327,39.608266,12]},
       {name: '招遠(yuǎn)', value: [120.38,37.35,12]},
       {name: '舟山', value: [122.207216,29.985295,12]},
       {name: '齊齊哈爾', value: [123.97,47.33,14]},
       {name: '鹽城', value: [120.13,33.38,15]},
       {name: '赤峰', value: [118.87,42.28,16]},
       {name: '青島', value: [120.33,36.07,18]},
       {name: '乳山', value: [121.52,36.89,18]},
       {name: '金昌', value: [102.188043,38.520089,19]}
   ];


  mapoption = {
    backgroundColor: '#404a59',
    title: {
      text: '全國(guó)主要城市空氣質(zhì)量',
      subtext: 'data from PM25.in',
      sublink: 'http://www.pm25.in',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      y: 'bottom',
      x: 'right',
      data: ['pm2.5'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    },
    series: [
      {
        name: 'pm2.5',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: this.datamapvalue,
        symbolSize: function (val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: '',
            position: 'right',
            show: false
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#ddb926'
          }
        }
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: this.datamapvalue,
        symbolSize: function (val) {
          return val[2] / 10;
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: '',
            position: 'right',
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#f4e925',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        zlevel: 1
      }
    ]
  }

}

補(bǔ)充

echarts.component.html
    <div echarts [options] = "chartOption" [loading]="showloading" class="demo-chart"></div>
    <div echarts [options] = "Baroptions" [loading]="showloading" class="demo-chart"></div>
    <div echarts [options] = "linkoption" [loading]="showloading" class="demo-chart"></div>
    <div echarts [options] = "mapoption" [loading]="showloading" class="demo-chart"></div>

關(guān)于api文檔

[options]：與官方演示網(wǎng)站的選項(xiàng)相同
[dataset]：您可以忽略“options”中的“data”屬性，并用于dataset綁定系列數(shù)據(jù)。
[loading]：布爾屬性。當(dāng)您的數(shù)據(jù)未準(zhǔn)備好時(shí)，使用它來(lái)切換加載動(dòng)畫(huà)的echarts。
theme：用它來(lái)初始化具有主題的echarts。你需要在主題文件.angular-cli.json或index.html。例如，如果我們要dark.js在Echarts主題頁(yè)面中使用：<div echarts theme = "dark" class = "demo-chart" [options] = "chartOptions"></div>這樣我們就使用成功dark主題了。
(chartInit)它暴露了echartsInstance 'chartInit'事件。所以，你可以直接調(diào)用的API一樣：resize()，showLoading()

例如

html


<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>

ts

onChartInit(ec) {
  this.echartsIntance = ec;
}

resizeChart() {
  if (this.echartsIntance) {
    this.echartsIntance.resize();
    this.echartsIntance.showLoading();
  }
}

后續(xù)在更新吧！ 畢竟上班時(shí)間搞這個(gè) (?????)

最新版本的 echarts4.1.0ngx-echarts3.1.0angular6.0.0

最新版API文檔

輸入 類型 默認(rèn)值 注釋
[options] object null 它與官方演示站點(diǎn)中的選項(xiàng)相同。
[merge] object null 您可以使用它來(lái)更新部分內(nèi)容options，尤其是在需要更新圖表數(shù)據(jù)時(shí)。事實(shí)上，價(jià)值merge將用于echartsInstance.setOption()與notMerge = false。因此，您可以參考ECharts文檔以獲取詳細(xì)信息。
[loading] boolean false 當(dāng)數(shù)據(jù)未準(zhǔn)備好時(shí)，使用它來(lái)切換echarts加載動(dòng)畫(huà)。
[autoResize] boolean true 當(dāng)容器的寬度發(fā)生變化時(shí)，圖表將自動(dòng)調(diào)整大小。
[initOpts] object null [initOpts]將使用的值echarts.init()。它可能包含devicePixelRatio，renderer，width或height性質(zhì)。有關(guān)詳細(xì)信息，請(qǐng)參閱ECharts文檔。
[theme] string null 使用它來(lái)初始化主題echarts。您需要將主題文件包含在angular-cli.json其他模塊解析器中。
[loadingOpts] object null 輸入對(duì)象以自定義加載樣式。有關(guān)詳細(xì)信息，請(qǐng)參閱ECharts文檔。

輸出事件
chartClick：它會(huì)發(fā)出相同params的'click'事件
chartDblClick：它會(huì)發(fā)出相同params的'dblclick'事件
chartMouseDown：它會(huì)發(fā)出相同params的'mousedown'事件
chartMouseUp：它會(huì)發(fā)出相同params的'mouseup'事件
chartMouseOver：它會(huì)發(fā)出相同params的'mouseover'事件
chartMouseOut：它會(huì)發(fā)出相同params的'mouseout'事件
chartGlobalOut：它會(huì)發(fā)出相同params的'globalout'事件
chartContextMenu：它發(fā)出同樣params的'contextmenu'事件（從v1.2.1開(kāi)始）
chartDataZoom：它發(fā)出相同params的'dataZoom'事件（感謝averhaegen）

Service服務(wù)

NgxEchartsService 是全局 echarts 對(duì)象的包裝器。您可以直接獲取本機(jī)echarts對(duì)象或使用包裝器方法。例如：

import {NgxEchartsService} from 'ngx-echarts';

//...
constructor(private es: NgxEchartsService) {}

ngOnInit() {
  const echarts = this.es.echarts;
  echarts.registerMap('HK', HK_GEO_JSON);
  // Or you can:
  // this.es.registerMap('HK', HK_GEO_JSON);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容