ECharts图表的引用

ECharts图表的引用

开发工具与关键技术：Visual Studio 2015，ECharts，JS
作者：易金亮
撰写时间：2019.04.02

下面我们来介绍一下如何引用ECharts图表，引用ECharts图表大致分为以下几个步骤：

1. 准备存放ECharts图表的“盒子”
2. 引用“echarts.min.js”插件
3. 初始化echarts实例
4. 指定图表的配置项和数据
5. 使用指定的配置项和数据显示图表
6. 引用完成！
   首先，我们来准备一个存放ECharts图表的“盒子”，其代码如下截图所示：
   
   
   通过以上代码，就可以实现如下图所示的效果了：
   

这样，一个放置ECharts图表的“盒子”就准备好了，然后把“echarts.min.js”插件引入到项目中，如下截图所示：

把插件引入进来后，然后通过var Chart = echarts.init(document.getElementById(“echarts”));初始化echarts实例。初始化echarts实例后就是指定图表的配置项和数据了，其具体操作如下截图所示：

当然，也可以直接在项目中指定图表的配置项和数据。指定好图表的配置项和数据后，接下来就应该使用指定的配置项和数据去显示图表了，如下代码所示：

最终，我们就成功的引用了一个ECharts图表了，其效果如下截图所示：