目录
一:ECharts是什么
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
通俗的理解:
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】,且可定制(支持自定义)
二:Echarts入门教程
步骤1:下载echarts.js文件
官网教程:五分钟入门
1.下载echarts.js
下载链接:https://www.jsdelivr.com/package/npm/echarts?path=dist
完全版:echarts.js,体积最大,包含所有的图表和组件
常用版:echarts.common.js,体积适中,包含常见的图表和组件
精简版:echarts.simple.js,体积较小,仅包含最常用的图表和组件
也可以使用在线引入地址,进入网址选择要引用的版本即可:http://www.bootcdn.cn/echarts/
步骤2:引入echarts.js文件
<!-- 引入echarts.js文件 -->
<script src="echarts.min.js"></script>
<div style="width: 600px;height: 400px;"></div>
步骤4:初始化echarts实例对象
// 初始化echarts实例对象
// 参数,dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));
步骤5:准备配置项
var option = {
xAxis:{
type: 'category',
data:['小明','小红','小王']
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',