ECharts图表的引用

2023年2月18日 154次阅读 来源: 北极光LG

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图表的引用》
    通过以上代码，就可以实现如下图所示的效果了：
    《ECharts图表的引用》

这样，一个放置ECharts图表的“盒子”就准备好了，然后把“echarts.min.js”插件引入到项目中，如下截图所示：
《ECharts图表的引用》
把插件引入进来后，然后通过var Chart = echarts.init(document.getElementById(“echarts”));初始化echarts实例。初始化echarts实例后就是指定图表的配置项和数据了，其具体操作如下截图所示：
《ECharts图表的引用》
当然，也可以直接在项目中指定图表的配置项和数据。指定好图表的配置项和数据后，接下来就应该使用指定的配置项和数据去显示图表了，如下代码所示：
《ECharts图表的引用》
最终，我们就成功的引用了一个ECharts图表了，其效果如下截图所示：

《ECharts图表的引用》

    原文作者：北极光LG
    原文地址: https://blog.csdn.net/weixin_44538667/article/details/89075740
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞