echarts学习总结

ECharts学习总结
使用步骤
1 引入ECharts <script src="echarts.min.js"></script>
2 绘制一个简单的图表
  为ECharts准备具有宽高的DOM容器
  而后就能够经过 echarts.init 方法初始化一个 echarts 实例并经过 setOption 方法生成一个简单的柱状图

//基于准备好的dom,初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));
//指定图表的配置和数据
var option={
    title:{
        text:'ECharts 入门示例'
    },
    tooltip:{}, //提示
    legend:{ //图例
        data:['销量']
    },
    xAxis:{ //坐标轴
        data:["衬衫","羊绒衫","洗衣机","高跟鞋","裤子","雪纺衫"]
    },
    yAxis:{},
    series:[{ //数据系列  type 表示什么形状的图形
        name:'hahha',type:'bar',data:[2,5,20,37,100,107]
    }]
};
//使用刚指定的配置顶好和数据显示图集。
myChart.setOption(option);

名词解析
基本名词
  名词   描述
  chart    是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
  axis 直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型
  xAxis    直角坐标系中的横轴，一般并默认为类目型
  yAxis    直角坐标系中的纵轴，一般并默认为数值型
  grid 直角坐标系中除坐标轴外的绘图网格，用于定义直角系总体布局
  legend   图例，表述数据和图形的关联
  dataRange    值域选择，经常使用于展示地域数据时选择值域范围
  dataZoom 数据区域缩放，经常使用于展示大量数据时选择可视范围
  roamController   缩放漫游组件，搭配地图使用
  toolbox  辅助工具箱，辅助功能，如添加标线，框选缩放等
  tooltip  气泡提示框，经常使用于展示更详细的数据
  timeline 时间轴，经常使用于展示同一系列数据在时间维度上的多份数据
  series   数据系列，一个图表可能包含多个系列，每个系列可能包含多个数据
图表名词
line   折线图，堆积折线图，区域图，堆积区域图。
bar        柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter    散点图，气泡图。散点图至少须要横纵两个数据，更高维度数据加入时能够映射为颜色或大小，当映射到大小时则为气泡图
k      K线图，蜡烛图。经常使用于展示股票交易数据。
pie    饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar  雷达图，填充雷达图。高维度数据展示的经常使用图表。
chord  和弦图。经常使用于展示关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互链接的弦，可体现关系数据
force  力导布局图。经常使用于展示复杂关系网络聚类布局。
map        地图。内置世界地图、中国及中国34个省市自治区地图数据、可经过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
heatmap    热力图。用于展示密度分布信息，支持与地图、百度地图插件联合使用。
gauge  仪表盘。用于展示关键指标数据，常见于BI类系统。
funnel 漏斗图。用于展示数据通过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver 事件河流图。经常使用于展现具备时间属性的多个事件，以及事件随时间的演化。
treemap    矩形式树状结构图，简称：矩形树图。用于展现树形数据结构，优点是能最大限度展现节点的尺寸特征。
venn   韦恩图。用于展现集合以及它们的交集。
tree   树图。用于展现树形数据结构各节点的层级关系
wordCloud  词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容

radius 半径