本文共 674 字，大约阅读时间需要 2 分钟。

了解Echarts

什么是Echarts？Echarts是百度的一个开源的数据可视化工具，可以帮助我们在前端展示各式各样的图，它是一个纯js图表库。

Echarts在ionic中的使用

1. 首先安装typings库，以及 ECharts：

npm install typings echarts --global

2. 其次需要安装 ECharts 的 TypeScript 定义文件

npm install @types/echarts --save

3. 然后要在 ts 文件中引入 echarts，这样才能在 ts 文件中使用echarts

import * as echarts from 'echarts';

4. 如果我们要在页面上展现图表，就必须要有div元素作为图表的容器。在HTML页中定义一个模板本地变量

当然，除此之外还要规定div的css样式，指定div的宽和高。

5. 接下来最重要的一步就是根据自己的需求写图表的配置了，如果是刚开始接触这个插件，我们可以借助官网的例子。

比如我们打开了一个实例，我们只需要将左边的代码复制到我们的 ts 文件中，然后根据我们想要的效果修改修改就可以了。

刚开始接触我们肯定也不知道图表的属性有什么，以及怎么修改，不用担心，还有，我们需要改成什么样，去配置手册中查就可以了。

6. 最后一步 ，界面初始化完成后，加载图表就可以了。

图表渲染有两种方式：Canvas 和 SVG ，具体用哪种方式，可以参见官网的介绍，this.lineChart就是图表的配置。

如何让图表的标签全部显示

转载地址：https://blog.csdn.net/zwj_jyzl/article/details/89856313 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！