“ECharts”的版本间的差异
来自Wiki.Citydatum
小 |
小 |
||
第25行: | 第25行: | ||
== 使用方法 == | == 使用方法 == | ||
+ | === 基本操作 === | ||
+ | '''1. 创建一个空白[[HTML]]文件''' | ||
+ | '''2. 引用ECharts.js文件'''([http://echarts.baidu.com/download.html 下载Echarts],并放置在当前目录中的js子目录下) | ||
+ | <pre><script type="text/javascript" src="js/echarts.js"></script></pre> | ||
+ | |||
+ | '''3. 准备放置图表的容器''' | ||
+ | <pre><div id="chartmain" style="width:600px; height: 400px;"></div></pre> | ||
+ | |||
+ | '''4. 设置参数,初始化图表''' | ||
+ | [[文件:ECharts_Tutor_01.png|192px|缩略图|ECharts柱状图示例:北上广深常住人口数(2016)]] | ||
+ | <pre><script type="text/javascript"> | ||
+ | //指定图标的配置和数据 | ||
+ | var option = { | ||
+ | title: {text: 'ECharts 柱状图示例:北上广深常住人口数(2016)'}, | ||
+ | tooltip: {}, | ||
+ | legend: {data:['用户来源']}, | ||
+ | xAxis: {data:["北京","上海","广州","深圳"]}, | ||
+ | yAxis: {}, | ||
+ | series: [{ | ||
+ | name:'常住人口(万人)', | ||
+ | type:'bar', | ||
+ | data:[2173,2420,1404,1191] | ||
+ | }] | ||
+ | }; | ||
+ | //初始化echarts实例 | ||
+ | var myChart = echarts.init(document.getElementById('chartmain')); | ||
+ | //使用制定的配置项和数据显示图表 | ||
+ | myChart.setOption(option); | ||
+ | </script></pre> | ||
== 应用案例 == | == 应用案例 == |
2018年5月21日 (一) 00:34的版本
ECharts是一个使用JavaScript实现的开源可视化库,可以运行在PC和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库ZRender,主要用于数据可视化,可制作高度个性化定制交互式动态图表,由百度公司出品。
概况
发展历程
- ECharts缩写来自Enterprise Charts,商业级数据图表,它最初是为了满足公司商业体系里各种业务系统的报表需求;
- 2012年初,在凤巢数据平台项目中,当时的凤巢前端技术负责人Kener-林峰尝试使用Canvas去做图表,写了一个全新的轻量级Canvas类库ZRender,可以说是ECharts的原型。
功能特性
- 丰富的可视化类型:ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图;用于统计的箱线图;用于地理数据可视化的地图、热力图、线图;用于关系数据可视化的关系图、treemap、旭日图;多维数据可视化的平行坐标;还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。除内置的图表外,ECharts 还提供了自定义系列;
- 多种数据格式无需转换直接使用:
- 庞大数据(千万级数据量)的前端展现:
- 移动端优化:
- 多渲染方案,跨平台使用:
- 深度的交互式数据探索:
- 多维数据的支持以及丰富的视觉编码手段:
- 动态数据:
- 绚丽的特效:
- 通过 GL 实现更多更强大绚丽的三维可视化:
- 无障碍访问(4.0+):
使用方法
基本操作
1. 创建一个空白HTML文件
2. 引用ECharts.js文件(下载Echarts,并放置在当前目录中的js子目录下)
<script type="text/javascript" src="js/echarts.js"></script>
3. 准备放置图表的容器
<div id="chartmain" style="width:600px; height: 400px;"></div>
4. 设置参数,初始化图表
<script type="text/javascript"> //指定图标的配置和数据 var option = { title: {text: 'ECharts 柱状图示例:北上广深常住人口数(2016)'}, tooltip: {}, legend: {data:['用户来源']}, xAxis: {data:["北京","上海","广州","深圳"]}, yAxis: {}, series: [{ name:'常住人口(万人)', type:'bar', data:[2173,2420,1404,1191] }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置项和数据显示图表 myChart.setOption(option); </script>
应用案例
城市规划与研究领域