前端开源图表库ECharts精简实用教程
49 浏览量
2021-01-08
15:29:01
上传
评论
收藏 182KB PDF 举报
前端开源图表库前端开源图表库ECharts精简实用教程精简实用教程
1、简介、简介
ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库
ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
2、安装、安装
（（1）直接下载）直接下载 echarts.min.js 并用标签引入。并用标签引入。echarts下载链接下载链接
（（2）还可以使用）还可以使用CDN方法加载网络上的文档方法加载网络上的文档
Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
百度：https://echarts.baidu.com/dist/echarts.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
3、、ECharts的初始化的初始化
（（1）引入）引入 ECharts 文件文件
引入本地文件
CDN方式
（（2）创建容器）创建容器
为Echarts创建一个具备宽高的DOM容器。
（（3）初始化）初始化Echarts
通过echarts.init()方法传入指定的容器(DOM元素)来生成一个ECharts对象。
var myChart = echarts.init(document.getElementById("main"));
4、、ECharts的基本配置的基本配置
ECharts需要通过一个Option对象来进行配置，配置信息采用的是json格式。
Option对象的常用属性有：标题(title)、图例(legend)、网格(grid)、提示信息(tooltip)、x轴(xAxis)、y轴(yAxis)、系列列表(series)等，接下来将会对每个属性进行介绍。
var option = {
title:{}, //标题
grid:{}, //网格
tooltip:{}, //提示信息
xAxis:{}, //x轴
yAxis:{}, //y轴
series:[{}] //系列列表
}
资源评论
weixin_38547151
- 粉丝: 2
- 资源: 899
