angular中使用Echarts（環境搭建+簡單使用）

安女士發表於2019-02-16
AngularEcharts

一、配置環境

首先為大家介紹兩種方法，在angular中搭建使用視覺化工具Echarts的環境：

  1. 快速簡單，但是依賴網路(自己試用或學習Echarts時，可用這種方法)
  2. 需下載但是使用穩定（一般在專案中使用這種辦法）

使用線上依賴-方法1 ：
在angular專案中的src資料夾中，找到index.html檔案，在<head></head>中加入線上依賴包

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>

使用本地依賴-方法2：

  • 首先使用npm來安裝echarts（在專案資料夾中開啟cmd，輸入以下命令）
npm install --save-dev echarts

然後檢視package.json中的dependencies裡是否已經有echarts了

  • angular專案資料夾src/assets資料夾內新建一個js資料夾，將bower_components/echarts/dist中的echarts.min.js拷貝到新建的js資料夾內
  • 在angular專案中的src資料夾中，找到index.html檔案，在<head></head>中加入本地依賴包
  <script src="../assets/js/echarts.min.js"></script>

二、簡單使用echarts

一般我們使用echarts時會單獨建立一個檔案，避免與元件的component.ts的邏輯搞混。
那麼我們在使用echarts的元件資料夾中，新建一個echart_1.ts，將視覺化展示相關的內容與ts邏輯內容分離。

  • 在html中加入div
 <div id="chart111" style="width: 30rem;height:20rem;"></div>
  • 在echarts.ts中寫一個折線圖，名為GRAPH1
    declare const echarts: any;
    export const GRAPH1 = {
        xAxis: {
            type: `category`,
            data: [`Mon`, `Tue`, `Wed`, `Thu`, `Fri`, `Sat`, `Sun`]
        },
        yAxis: {
            type: `value`
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: `line`,
            smooth: true
        }]};
  • 在ts中使折線圖與dom元素相關聯（只看註釋行就行）
import {Component,OnInit} from `@angular/core`;
import { GRAPH1 } from `./echart`;   //從echart.ts中引入折線圖GRAPH1 
declare const echarts: any;
@Component({
  selector: `app-contain-exchart`,
  templateUrl: `./contain-exchart.component.html`,
  styleUrls: [`./contain-exchart.component.css`]
})
export class ContainExchartComponent implements OnInit {
  public myChart1;
  public graph1;
  constructor() {}

  ngOnInit() { 
    //把折線圖關聯到html的元素
    echarts.init(document.getElementById(`chart111`)).setOption(GRAPH1);

  }
}

至此exchar的折線圖t就會在頁面上顯示了
接下來，就可以在exchart的中文網站上，繼續嘗試更豐富的內容了

相關文章