一、认识 ECharts
ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。Echarts在行业内应用特别广泛。
二、ECharts 有哪些特点
1，ECharts 属于开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，另外还提供了柱状图、折线图、饼图、气泡图及四象限图等；
2，ECharts 使用简单，在官网中为我们封装了 JS，只要会引用就会得到完美的展示效果；
3，ECharts 种类多，ECharts 实现简单，各类图形都有；相应的模板，还有丰富的 API 及文档说明，非常详细；
4，ECharts 兼容性好，基于HTML5，有着良好的动画渲染效果；
三、ECharts 官网，很好很详细
四、简单应用
下面通过几个简单的示例直观的了解一下Echarts
-
柱状图示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bar</title> <!-- 【1】引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> </head> <body> <!-- 【2】为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 【3】基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 【4】指定图表的配置项和数据 var option = { // 标题 title: { text: 'ECharts 入门示例' }, // 工具箱 toolbox: { show: true, feature: { saveAsImage: { show: true } } }, // 图例：在某一位置放置，可配置。可以打开或关闭某一项。 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, // 数据 series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 【5】使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
柱状图.png
-
折线图示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>line</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, toolbox: { show: true, feature: { saveAsImage: { show: true } } }, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }, { name: '产量', type: 'line', // 【折线图】 data: [7, 30, 50, 11, 40, 80] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
折线图.png
-
可更换不同的主题（theme）
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'),'dark'); //【此处可以设置图示的主题】 </script>
深色主题.png
我们可以看到，这几步里只有
option这一步比较复杂，有好多配置项，这就是显示图形内容的主要部分了，简单看一下都有哪些配置项以及各个配置项的含义。
-
title（标题组件）
// 指定图表的配置项和数据 var option = { title: { show:true, text: 'ECharts 入门示例', // 【标题】 subtext:'学习ECharts', // 【副标题】 left:'left', // 【数字就是像素值 ，也可以是 center left right这种值】 borderColor:'red', // 【边框】 borderWidth:5, textStyle:{ fontSize:20 } }, toolbox: { show: true, feature: { saveAsImage: { show: true } } }, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
标题.png
-
toolbox（工具箱组件）
// 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例', }, toolbox: { // 【工具箱】 show: true, feature: { dataView:{ show:true }, restore:{ show:true }, dataZoom:{ show:true }, saveAsImage: { show: true }, magicType: { // 【视图类型切换，柱状图或折线图。。。等之间的切换】 type: ['line', 'bar'] } } }, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
工具箱.png
-
tooltip（弹窗提示组件）
var option = { title: { text: 'ECharts 入门示例', }, tooltip: { // 【根据鼠标移动显示提示，显示更直观】 trigger: 'axis', // formatter: "{a} <br/>{b} : {c}" // 【字符串模板，a、b、c 分别代表不同的含义，详见官网】 }, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
弹窗提示.png
-
mark（标记）
var option = { title: { text: 'ECharts 入门示例', }, tooltip: { trigger: 'axis' }, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20], markPoint: { // 【标记点】 data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值',symbol:'arrow'} // 【符号的形状，大小，旋转角度，都可以自己定义】 ] }, markLine: { // 【标记线】 data: [ {type: 'average', name: '平均值'} ] } }] };
标记.png
-
pie饼状图
// 指定图表的配置项和数据 var option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" // 【字符串模板，a、b、c分别代表不同的含义】 }, legend: { // 【图例：在某一位置放置，可配置。可以打开或关闭某一项。】 orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', // 【图例名字】 type: 'pie', // 【饼图类型】 radius : '55%', // 【半径】 center: ['50%', '60%'], // 【圆心坐标】 data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };
饼图.png
-
gauge仪表图
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ { name: '业务指标', type: 'gauge', // 【仪表图】 detail: {formatter:'{value}%'}, data: [{value: 32, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); setInterval(function () { // 【模拟动态数据，修改仪表的动态效果】 option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); },2000); </script>
仪表图.png
-
radar雷达图
option = { title: { text: '基础雷达图' }, tooltip: {}, legend: { data: ['预算分配（Allocated Budget）', '实际开销 （Actual Spending）'] }, radar: { // shape: 'circle', indicator: [ { name: '销售（sales）', max: 6500}, { name: '管理（Administration）', max: 16000}, { name: '信息技术（Information Techology）', max: 30000}, { name: '客服（Customer Support）', max: 38000}, { name: '研发（Development）', max: 52000}, { name: '市场（Marketing）', max: 25000} ] }, series: [{ name: '预算 vs 开销（Budget vs spending）', type: 'radar', // areaStyle: {normal: {}}, data : [ { value : [4300, 10000, 28000, 35000, 50000, 19000], name : '预算分配（Allocated Budget）' }, { value : [5000, 14000, 28000, 31000, 42000, 21000], name : '实际开销（Actual Spending）' } ] }] };
雷达图.png
-
还可配置多个y轴
option = { tooltip: { trigger: 'axis' }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['蒸发量','降水量','平均温度'] }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { // 第一个y轴 type: 'value', name: '水量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { // 第二个y轴 type: 'value', name: '温度', min: 0, max: 25, interval: 5, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均温度', type:'line', yAxisIndex: 1, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] } ] };
多个y轴.png
-
dataZoom：用于区域缩放，x轴数据量大时可配置。
-
dataRange：值域漫游。
还有一些，比如散点图，k线图，地图 等等，就不一一介绍了，用到的时候还是去官网查阅。
五、相对免费的视频资源
-
还可以结合一些
相关视频和官网辅助我们更好更快地学习并应用Echarts。
网友评论