ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>echart学习</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); //使用 require( [ 'echarts', 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载 'echarts/chart/line' ], function(ec){ // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); // 过渡--------------------- myChart.showLoading({ text: '正在努力的读取数据中...', //loading话术 }); myChart.hideLoading(); option = { title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { // trigger: 'axis' trigger:'item' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { 清秀的中心 : {show: true}, dataView : {show: true, readOnly: false}, //数据视图 magicType : {show: true, type: ['line', 'bar']}, //动态类型切换,柱状折现切换 restore : {show: true}, //重置 saveAsImage : {show: true} //保存为图片 } }, calculable : true, //是否启用拖拽重计算特性，默认false xAxis : [ { type : 'category', boundaryGap : false, // 坐标轴两端空白策略 data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10], 清秀的中心Point : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, 清秀的中心Line : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], 清秀的中心Point : { data : [ {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} ] }, 清秀的中心Line : { data : [ {type : 'average', name : '平均值'} ] } } ]}; // 为echarts对象加载数据 myChart.setOption(option); } ); // } </script></body></html>
效果图