Angular-集成-Typescript-版本-Echarts-（附代码）

最新推荐文章于 2024-09-06 10:41:19 发布

egrhef

最新推荐文章于 2024-09-06 10:41:19 发布

阅读量438

点赞数 3

CC 4.0 BY-SA版权

分类专栏：程序员文章标签： typescript angular.js echarts

本文链接：https://blog.csdn.net/egrhef/article/details/137387076

程序员专栏收录该内容

196 篇文章

订阅专栏

本文介绍了如何在Angular应用中使用ECharts库创建图表，并展示了TypeScript编写的组件实例。内容涵盖了AngularCLI的使用，EChartsAPI指令的整合，以及图表事件的处理。同时还提及了一个完整的Angular-ECharts学习资源包，包括架构进阶学习路线和大厂面试准备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular works!

有需要的话也可以使用 [initOpts] 等 API，这些会在后面介绍

然后写一个被广泛流传的 echarts-typescript 例子：

import { Component } from ‘@angular/core’;
import { EChartOption } from ‘echarts’

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘angular-echarts-example’;

chartOption: EChartOption = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’,
crossStyle: {
color: ‘#999’
}
}
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false,
title: ‘Datensicht’
},
magicType: {
show: true,
type: [‘line’, ‘bar’],
title: ‘migic type’
},
restore: {
show: true,
title: ‘Zurücksetzen’
},
saveAsImage: {
show: true,
title: ‘Speichern’
}
}
},
legend: {
data: [‘蒸发量’, ‘降水量’, ‘平均温度’]
},
xAxis: [
{
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],
axisPointer: {
type: ‘shadow’
}
}
],
yAxis: [
{
type: ‘value’,
name: ‘水量’,
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: ‘{value} ml’
}
},
{
type: ‘value’,
name: ‘温度’,
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: ‘{value} °C’
}
}
],
series: [
{
name: ‘蒸发量’,
type: ‘bar’,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: ‘降水量’,
type: ‘bar’,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: ‘平均温度’,
type: ‘line’,
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}
}

储存并启动 Angular 程序：

$ ng serve --open

会看到如下页面，并且可以用鼠标与其进行交互式操作

[图片上传失败…(image-ef8f6e-1595846992017)]

echarts 前端

2 ngx-echarts 文档

2.1 echarts API 指令

在 HTML 的 echarts 模板中可以可以使用如下指令：

[options]：与官方 options 设置一致
[merge]：用于更新部分 options，比如需要更新图表数据的时候，且通常 echartsInstance.setOption() 与 notMerge = false 联用，具体看原文
[loading]：用于在数据未加载完成时的过渡阶段效果
[autoResize]：图表的大小与其所在的容器宽度自动调整尺寸
[initOpts]：用于图表初始化配置，比如包括 devicePixelRatio, renderer, width 或 height 属性
[theme]：用于设置图表主题背景（需要首先引入主题文件）
[loadingOpts]：定义加载渲染，详细见官方文档
[detectEventChanges]：定义是否需要捕获鼠标的 event handler，避免不必要的事件捕获

2.2 事件（Event）

原生 echarts 支持丰富地鼠标事件，如：click, dbclick, mousedown, mouseup, mouseover, mouseout, globalout，这些事件同样包含在 ngx-echarts 指令中，但在命名上加了 chart 前缀，比如： click 在 ngx-echarts 中叫做 chartClick，其用法与原生的 echarts event 是一样的。

例如 HTML：

chartClick 会捕获鼠标在前端点击的事件，然后我们就可以用 typescript 将捕获的事件进行处理。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。