章节1:导读
课时1 Hello ECharts（ 课程介绍，免费浏览 ）18:34
课时2 Why ECharts（ ECharts特性介绍 ，免费浏览）30:29
章节2:基础教程
课时3 EC基础－1：如何使用官网，如何引入ECharts，第一个ECharts例子53:24
课时4 EC < 组件 > 详解：直角系组件，网格，坐标轴，grid，axis37:30
课时5 EC【 图表 】详解：直角系图表，（堆积）折线图，line33:20
课时6 EC【 图表 】详解：直角系图表，（堆积）柱形图，条形图，bar19:06
课时7 EC < 组件 > 详解：标题，title，图例，legend25:50
课时8 EC < 组件 > 详解：直角系组件，区域缩放控件，dataZoom12:59
课时9 EC < 组件 > 详解：详情，tooltip24:56
课时10 EC【 图表 】详解：直角系图表，K线图，k10:10
课时11 EC【 图表 】详解：直角系图表，散点图，气泡图，scatter15:20
课时12 EC【 图表 】详解：饼图，圆环图，南丁格尔玫瑰图，pie26:55
课时13 EC【 图表 】详解：仪表盘，gauge12:05
课时14 EC【 图表 】详解：漏斗图，funne14:16
课时15 EC【 图表 】详解：地图，map33:39
课时16 EC < 组件 > 详解：缩放漫游和值域漫游组件，rc & dataRange21:36
课时17 EC < 组件 > 详解：工具箱，toolbox18:29
课时18 EC基础－2：标注，标线，markPoint，markLine（免费浏览）
课时19 EC基础－3：主题，theme（免费浏览，见参考资料）课时预 览
课时20 简单动态数据
有需要联系v；加客服窗口的联系方式
摘要：本文将深入探讨微专业前端数据展示工具Echarts的基础教程，从安装与配置、基本图表类型、交互式图表制作以及高级应用等方面进行详细阐述，旨在帮助读者全面掌握Echarts的使用技巧，提升数据可视化能力。
1、安装与配置
Echarts是一款基于JavaScript的图表库，支持多种浏览器和平台。要使用Echarts，首先需要将其引入到项目中。可以通过CDN链接或者下载Echarts的压缩包来引入。在配置Echarts时，需要设置图表的容器、主题、数据源等参数。
安装Echarts可以通过npm或者yarn进行。例如，使用npm安装Echarts的命令如下：
npm install echarts –save
配置Echarts时，可以在HTML文件中添加以下代码：
<script src=”https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js”></script>
2、基本图表类型
Echarts提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、雷达图等。这些图表类型可以满足各种数据展示需求。以下是一些基本图表类型的示例：
折线图：用于展示数据随时间的变化趋势。
柱状图：用于比较不同类别或组的数据。
饼图：用于展示各部分占整体的比例。
3、交互式图表制作
Echarts支持交互式图表制作，可以通过鼠标操作来放大、缩小、平移图表，以及通过点击图表元素来获取详细信息。以下是一些交互式图表制作的技巧：
使用tooltip组件显示图表元素的详细信息。
使用legend组件显示图表的图例信息。
使用dataZoom组件实现图表的缩放和平移。
4、高级应用
Echarts的高级应用包括自定义图表样式、数据动态更新、图表动画等。以下是一些高级应用的示例：
自定义图表样式：可以通过设置Echarts的配置项来自定义图表的样式，如颜色、字体、边框等。
数据动态更新：可以通过定时器或者事件监听来实现数据的动态更新。
图表动画：可以通过Echarts的动画配置项来实现图表的动画效果。
总结：
本文详细介绍了微专业前端数据展示工具Echarts的基础教程，从安装与配置、基本图表类型、交互式图表制作以及高级应用等方面进行了阐述。通过学习本文，读者可以全面掌握Echarts的使用技巧，提升数据可视化能力。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
