Apache ECharts介绍
Apache ECharts
1 介绍
Apache ECharts 是一款基于 JavaScript 的数据可视化图表库,提供直观、生动、可交互、可个性化定制的数据可视化图表。
官网地址:https://echarts.apache.org/zh/index.html
常见效果展示:
1). 柱形图
2). 饼形图
3). 折线图
总结:不管是哪种形式的图形,最本质的东西实际上是数据,它其实是对数据的一种可视化展示。
2 入门案例
Apache Echarts官方提供的快速入门:https://echarts.apache.org/handbook/zh/get-started/
效果展示:
实现步骤:
- 引入echarts.js文件(当天资料已提供)
- 为ECharts准备一个设置宽高的DOM
- 初始化echarts实例
- 指定图表的配置项和数据
- 使用指定的配置项和数据显示图表
代码开发:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="echarts.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
总结:使用Echarts,重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据,然后响应给前端来展示图表。
到此这篇关于Apache ECharts简介的文章就介绍到这了,更多相关Apache ECharts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
linux 上在指定时间段内每隔多少分钟自动执行任务计划crontab
这篇文章主要介绍了linux 上在指定时间段内每隔多少分钟自动执行任务计划crontab,需要的朋友可以参考下2019-11-11Linux(CentOS)同步服务器chrony的安装配置和常用命令
Chrony是一款开源的网络时间协议(NTP)客户端和服务端软件,旨在提供高精度的时间同步功能,相较于传统的NTP实现如ntpd,Chrony提供了一些改进和优势,包括更快的同步速度、低延迟、低CPU占用和低内存消耗,本文介绍Linux(CentOS)同步服务器chrony的安装配置和常用命令2024-06-06
最新评论