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 半径
时间: 2024-08-06 20:02:10