ECharts 使用超详细，5分钟上手，闭眼都会用

一个基于 JavaScript 的开源可视化图表库

优点：

• 丰富的可视化类型

• 多种数据格式支持

• 流数据的支持

• 移动端优化

• 跨平台使用

• 绚丽的特效

• 详细的文档说明

旧的官网地址：https://www.echartsjs.com/zh/index.html

新地址：Apache ECharts

使用步骤：

步骤1：下载并引入ECHARTS.JS文件	图表依赖这个JS库
步骤2：准备一个具备大小的DOM容器	生成的图表会放入这个容器内
步骤3：初始化echarts实例对象	实例化echarts对象
步骤4：指定配置项和数据(option)	根据具体需求修改配置选项
步骤5：将配置项设置给echarts实例对象	让echarts对象根据修改好的配置生效

步骤详情

步骤1：下载并引入

 

 

 

 在文件中引入

步骤2：准备一个具备大小的DOM容器

步骤3：初始化echarts实例对象

 //    3.初始化echarts 实例对象    
     var myChart =  echarts.init(document.querySelector('.box'));

步骤4：指定配置项和数据(option)     根据具体需求修改配置选项

 

 

 步骤5：将配置项设置给echarts实例对象

 // 5. 将配置项和数据(option) 设置给 实例对象(myChart)
        myChart.setOption(option);

整体代码：浅试一下吧

效果图

问题:能看懂数据吗？是不是有些不理解？

没关系~

配置项手册

术语查询

快速了解功能名称，帮助定位到配置项手册