脚本宝典收集整理的这篇文章主要介绍了angular中使用Echarts（环境搭建+简单使用），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一、配置环境
首先为大家介绍两种方法，在Angular中搭建使用可视化工具Echarts的环境：
使用在线依赖-方法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的中文网站上，继续尝试更丰富的内容了
以上是脚本宝典为你收集整理的angular中使用Echarts（环境搭建+简单使用）全部内容，希望文章能够帮你解决angular中使用Echarts（环境搭建+简单使用）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。