ECharts使用学习

  ECharts是百度团队用JavaScript开发的的开源图表库(已捐赠给Apache基金会),其官网、文档及源码地址请见参考文献2-6。本文开始学习该图表库的使用方法,本文主要介绍ECharts的安装及使用示例。

安装

  根据参考文献3,ECharts有几种安装使用方式,可以用npm安装,也可以CDN方式使用,还可以直接在GitHub上下载编译的最新的js文件直接在网页中使用。本文采用最后一种方式。
  访问参考文献5,目前最新的ECharts版本为V5.2.2,直接在页面中下载源文件压缩包,然后直接在页面中引用dist文件夹中的echarts.js或echarts.min.js文件即可。
在这里插入图片描述

使用示例

  本文使用参考文献7中的代码进行测试,主要是测试功能,后续文章中会根据ECharts官网中的文档一一学习并测试。测试代码主要参考自参考文献7,这里就不重复粘贴代码,代码的测试效果如下:
在这里插入图片描述
  值得说明的是,使用chart.js绘图时需要指定canvas对象,而使用ECharts绘图需要准备一个具备高宽的 DOM 容器,后者调整图表尺寸只需调整容器尺寸即可。

参考文献:
[1]https://baike.baidu.com/item/ECharts/55931618?fr=aladdin
[2]https://echarts.apache.org/zh/index.html
[3]https://echarts.apache.org/handbook/zh/basics/download
[4]https://echarts.apache.org/examples/zh/index.html
[5]https://github.com/apache/echarts
[6]https://echarts.apache.org/zh/option.html#title
[7]https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

猜你喜欢

转载自blog.csdn.net/gc_2299/article/details/121186351
今日推荐