最近做项目的时候，使用到了ECharts,所以在这里整理总结一下。
首先，ECharts是一个纯JavaScript图标库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。
官网地址：http://echarts.baidu.com/
1、首先在官网，选择适合的版本下载
http://echarts.baidu.com/download.html
2、引入Echarts
<script src="js/echarts.js"></script>
3、绘制一个简单的图表
准备一个DOM容器
<div style="border:2px solid #666666; width:49%; height:450px; float:left" id="chartmain"></div>
4、创建一个简单的雷达图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>测试</title> <script src="F:\VScode测试\TESTfile\echarts.min.js"></script> <script type="text/javascript"> window.onload=function(){ //指定图表的配置和数据 option={ //标题 title:{ text:‘基础雷达图‘ }, tooltip:{}, legend:{ data:[‘预算分配（Allocated Budget）‘,‘实际开销（Actual Spending）‘] }, radarL:{ //shape:‘circle‘, name:{ textStyle:{ color:‘#fff‘, backgroundColor:‘#999‘, borderRadius:3, padding:[3,5] } }, 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,24000], name:‘实际开销（Actual Spending）‘ } ] }] }; //获取dom容器 var myChart = echarts.init(document.getElementById(‘chartmain‘)); //使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } </script> </head> <body> <div style="border:2px solid #666666; width:49%; height:450px; float:left" id="chartmain"></div> </body> </html>
5、名词解释
基本名词
| 名词 | 描述 |
| chart | 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 |
| axis | 直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型 |
| xAxis | 直角坐标系中的一个横轴，通常默认为类目型 |
| yAxis | 直角坐标系中的一个纵轴，通常默认为数值型 |
| grid | 直角坐标系中除坐标轴外的绘图网络，用于定义直角系整体布局 |
| legend | 图例，表述数据和图形的关联 |
| dataRange | 值域选择，常用于展现地域数据时选择值域范围 |
| dataZoom | 数据区域缩放，常用于展现大量数据时选择可视范围 |
| roamController | 缩放漫游组件，搭配地图使用 |
| toolbox | 辅助工具箱，辅助功能，如添加标线，框选缩放等 |
| tooltip | 气泡提示框，常用于展现更详细的数据 |
| timeline | 时间轴，常用于展现同一系列数据在事件维度上的多份数据 |
| series | 数据系列，一个图标可能包含多个系列，每一个系列可能包含多个数据 |
图表名词
| 名词 | 描述 |
| line | 折线图，堆积折线图，区域图，堆积区域图。 |
| bar | 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 |
| scatter | 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 |
| k | K线图，蜡烛图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间互相连接的弦，可体现关系数据 |
| force | 力导布局图。常用于展现复杂关系网络聚类布局。 |
| map | 地图。内置世界地图、中国及中国34个省自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 |
| heatmap | 热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。 |
| gauge | 仪表盘。用于展现关键指标数据，常见于BI类系统。 |
| funnel | 漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。 |
| evnetRiver | 事件河流图。用于展示具有时间属性的多个事件，以及事件随时间的演化。 |
| treemap | 矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。 |
| venn | 韦恩图。用于展示集合以及它们的交集。 |
| tree | 树图。用于展示树形数据结构各节点的层级关系 |
| wordCloud | 词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容 |
PS：参考网站：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
原文：https://www.cnblogs.com/Sheldon180621/p/14313642.html
