angular中使用Echarts（环境搭建+简单使用）

2024年1月11日 254次阅读 来源: 安女士

一、配置环境

首先为大家介绍两种方法，在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的中文网站上，继续尝试更丰富的内容了

    原文作者：安女士
    原文地址: https://segmentfault.com/a/1190000015692394
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞