“ECharts”的版本间的差异

2018年5月22日 (二) 17:21的最新版本

提示：欢迎帮助我们进一步提升文章质量，当前重点任务包括： 章节补充：使用方法、应用案例章节的内容； 图片补充：用ECharts绘制示例图表、采用ECharts技术的网站截屏； 内容优化：功能特性章节的简化与提炼，补充来源引用与更多阅读链接；

ECharts是一个使用JavaScript实现的开源可视化库，可以运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库ZRender，主要用于数据可视化，可制作高度个性化定制交互式动态图表，由百度公司出品。

概况

发展历程

• ECharts缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足公司商业体系里各种业务系统的报表需求；
• 2012年初，在凤巢数据平台项目中，当时的凤巢前端技术负责人Kener-林峰尝试使用Canvas去做图表，写了一个全新的轻量级Canvas类库ZRender，可以说是ECharts的原型。

功能特性

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. 设置参数，初始化图表

ECharts柱状图示例：北上广深常住人口数（2016）

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

更多阅读

• 官方网站
• 官方网站：ECharts特性
• 官方网站：关于我们
• 知乎：做图表必备的神器 Echarts
• ECharts.js学习（一）简单入门
• ECharts.js学习（二）动态数据绑定
• Echarts地图省市跳转数据展示