ECharts实现数据可视化入门教程

目录

一：ECharts是什么

 二：Echarts入门教程

三： 主要相关配置（常用的）

四：ECharts常用图表

4.1.柱状图

4.2折线图

---

一：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>

 步骤3：准备一个呈现图表的盒子

 <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',