标签：图表 name max 地图 展现 介绍 堆叠 数据 Echarts
最近做项目的时候，使用到了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>
View Code
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
标签：图表,name,max,地图,展现,介绍,堆叠,数据,Echarts 来源： https://www.cnblogs.com/Sheldon180621/p/14313642.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。