Echarts堆叠图介绍及使⽤⽅法
最近做项⽬的时候，使⽤到了ECharts，所以在这⾥整理总结⼀下。
⾸先，ECharts是⼀个纯JavaScript图标库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是⼀款⾮常优秀的可视化前端框架。
1、⾸先在官⽹，选择适合的版本下载
2、引⼊Echarts
<script src="js/echarts.js"></script>
3、绘制⼀个简单的图表
  准备⼀个DOM容器
<div id="chartmain"></div>
4、创建⼀个简单的雷达图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "/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">
//指定图表的配置和数据
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.ElementById('chartmain'));
/
/使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
}
</script>
</head>
<body>
<div 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韦恩图。⽤于展⽰集合以及它们的交集。
svg图
tree树图。⽤于展⽰树形数据结构各节点的层级关系
wordCloud词云是关键词的视觉化描述，⽤于汇总⽤户⽣成的标签或⼀个⽹站的⽂字内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。