ECharts 图形框架 (折线图,条形图,扇形图,地图等多种UI图形展现)

1.ECharts 使用方便,可以轻松搞定多种复杂可视化的UI界面,如果想要了解更多,再查查资料.不做更多解释.

2.我这里放一个ECharts的官网地址:https://www.echartsjs.com/examples/zh/index.html

3.可能有些同学做的过程中,想要实现自己的效果,但却不知道如何使用ECharts相关属性,我这里放一个教程地址,供学习:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-83o62cpj.html

4.接下来我将在Angular中实现一个案例,案例所展现的是一个简单的折线图,其中包含数据绑定,以及相关属性的使用.

5.话不多说，效果图如下：

6.我们先创建一个新的Angular工程【命令：ng new my-app】，在工程的index.html页面中引入echarts 所需要的js文件；

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

7.我们新建一个组件 line-chart 【命令：ng generate component line-chart】用来展示我们的图形；

   创建完成后；我们在app.component.html页面中引入此组件；目的：起始页；

<app-line-chart></app-line-chart>

 然后我们回到刚才创建的新组件页，添加div标签，用来显示图形；

<div id="chart111" style="width: 28rem;height:16rem;"></div>