商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
echarts官网：官网地址
官网介绍第一步；可以点击文档下拉单的特性介绍深入了解echarts；
第二步：可以点击教程，教程的第一课就教你如何使用第一个echarts模板实例。
在不断学习的过程中配置项手册可以直接搜查哥属性的特性，很好用
下面是我的第一个模板的实例 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <!-- step 1:引入Echarts.js --> <!-- step 2:HTML DOM中药准备一个div，将来用于渲染图表 --> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 // step 3： 初始化ECharts图表 var myChart = echarts.init(document.getElementById('main')); // step 4：指定图表的配置项和数据 var option = { title: { text: '我的第一个echarts实例' }, tooltip: {}, legend: { //图例 data:['销量'] }, xAxis: {//x轴 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {},//y轴 series: [{ name: '销量', type: 'bar',//直方图 data: [5, 20, 36, 10, 10, 20] }, { name: '销量', type: 'line',//直方图 data: [8, 30, 50, 60, 70, 80], bac }] }; // step 5：使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>