Apache ECharts 图表库的功能特性与快速上手
Apache ECharts 是一个基于 JavaScript 的开源可视化图表库，提供了快速构建 Web 可视化图表的声明式框架。它可以流畅运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11、Chrome、Firefox、Safari 等），底层依赖矢量图形库 ZRender，图表具备直观、交互丰富且支持高度个性化定制的特点。
功能特性
丰富的图表类型
Apache ECharts 提供常规的折线图、柱状图、散点图、饼图、K 线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、树图、旭日图，多维数据可视化的平行坐标，以及用于 BI 的漏斗图、仪表盘，同时支持图与图之间的混搭。
渲染引擎
Apache ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表：
- VML 可兼容低版本 IE
- SVG 避免移动端内存问题
- Canvas 轻松应对大数据量和特效展现
除 PC 和移动端浏览器外，ECharts 还能在 Node.js 上配合 node-canvas 进行服务端渲染（SSR）。从 4.0 开始，ECharts 团队与微信小程序团队合作，提供了对微信小程序的适配。
社区贡献者也提供了多种语言扩展，如 Python 的 pyecharts、R 语言的 echarty、Julia 的 ECharts.jl 等。
数据分析
Apache ECharts 提供图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可对数据进行多维度筛取、视图缩放与细节展示等操作。
更多完整功能特性请参考官方文档：https://echarts.apache.org/zh/feature.html
快速体验
Apache ECharts 支持通过 npm、GitHub 或 CDN 下载，下载文件为 dist 目录下的 echarts.js。
创建一个 index.html，引入 Apache ECharts：
浏览器打开这个 index.html 时页面为空白，只要没有报错就没问题。
接着为 ECharts 准备一个定义了宽高的 DOM 容器：
通过 echarts.init 方法初始化一个 echarts 实例，再用 setOption 方法生成图表。以下是完整的柱状图示例：
ECharts
// 基于准备好的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);
这样便完成了第一个图表。更多使用案例可参照文档：